基于 Docker 打造前端持续集成开发环境

知乎: https://zhuanlan.zhihu.com/p/37961402


 本文将以一个标准的 Vue 项目为例,完全抛弃传统的前端项目开发部署方式,基于 Docker 容器技术打造一个精简的前端持续集成的开发环境。

前置知识:

  1. CI(持续集成):阮一峰老师的关于 CI 的介绍

  2. Docker: Docker 快速入门


目标:

  1. 代码无需在本地构建

  2. 只需将代码推上 Github ,自动构建 -> 部署

  3. 版本易管理,可轻松回退版本


现在开始进入主题

第一步: 初始化 Vue 项目(使用vue官方脚手架 vue-cli)

1. 初始化 vue 项目:vue init webpack vue-docker-demo

2. 在项目根目录下编 Dockerfile


Dockerfile 内容如下(如果是构建其他项目,比如 angular4,只需安装 angular-cli,将构建参数改成 ng build 即可,大同小异)

FROM node:6.10.3-slim
RUN apt-get update \    && apt-get install -y nginx
WORKDIR /app
COPY . /app/
EXPOSE 80
RUN  npm install \     && npm run build \     && cp -r dist/* /var/www/html \     && rm -rf /app
CMD ["nginx","-g","daemon off;"]

3. 初始化 git, 连接并将代码推送到 Github 仓库,


第二步:使用 DaoCloud 搭建 Devops 流程

 (也可以使用其他公有云服务,差别不大,本文将以简单易操作并且对个人开发者免费的 DaoCloud 为例)

1. 注册一个 DaoCloud 账号

2. 用户中心 -> 代码托管,授权可访问你的 Github 仓库


2. 在 Devops 项目中新建一个项目,并选择 Github 中对应刚才新创建的项目


3. 先手动构建一个镜像版本,便于下面用这个镜像版本创建一个应用



4. 连接自有主机(没有自有主机的,也可以使用云端测试环境)

tips:可以去购买 vultr 等主机,按照指示流程完成主机接入,大概很简单的三四步操作,注意在完成主机连接后,需要手动在主机上启动 docker(service docker start)



太酷了,我们已经将我们的主机接入了 DaoCloud,接下来就来完成最有意思的一步。

5. 创建一个应用

进入【镜像仓库】选择刚才手动构建出来的镜像,并部署最新版本到自由主机或者云端测试环境



稍等片刻,便可以点击“立即部署”


等待完成镜像拉取,待容器列表中的容器起来后,通过地址查看我们部署的 vue 应用




太棒了,我们已经可以访问到我们刚才部署的 vue 应用了,也表示我们已经将我们的镜像部署到我们的自有主机上去了,此时进入主机查看容器运行情况,可以看到有一个正在运行中的容器,正是我们刚刚部署的,一切都是完美的。


完成到这里,我们可以说已经完成了 99% 的工作,但是还非常重要的最后 1%,那就是真正的自定义持续集成流程,让一切都自动化起来,现在让我们回到刚才 Devops 项目的【流程定义】中去

6.定义自动构建,自动发布任务

回到 Devops 项目里对自动化流程进行定义


首先我们来定义一下自动构建任务,我们设定规则是只有在有新 tag 时才执行构建任务,构建时查找根目录下的 Dockerfile,并以此构建镜像



其次,我们再来定义自动发布任务,当构建任务完成时自动触发自动发布任务,并发布到自有主机的应用上去




至此,我们已经完成了,所有流程控制工作,去测试一下整个流程是否能走通?


第三步: 测试整个流程

回到我们本地,修改一下文本内容,提交,并推送到远端,并且打下我们的第一个版本tag 1.0.0,并将 tag 推送到远端


可以看到,与此同时,我们打 tag 的操作触发了我们定义的 CI 流程


稍等片刻,可以看到我们的应用更新了,对应的版本就是我们刚刚推上去的 1.0.0


我们还可以对应用的版本进行切换,回退等操作



至此,我们在只编写了一个 Dockerfile 配置文件,没有编写脚本的情况下,成功地搭建了一套前端的持续集成开发环境,之后我们只需要专心编写我们的业务代码就好了,打一个 Tag 便可以轻松地完成自动部署上线。


如有问题,请随时联系我,谢谢。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367124.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

哪个内存更快?Heap或ByteBuffer或Direct?

Java正在成为新的C / C ,它被广泛用于开发高性能系统。 对像我这样的数百万Java开发人员来说非常好! 在这个博客中,我将分享我可以用Java完成的不同类型的内存分配实验以及您从中获得的好处。 Java中的内存分配 Java提供哪种类型的内存分配…

java没有打印mysql日志_0216 aop和打印数据库执行日志

需求maven依赖p6spyp6spy3.8.7com.google.guavaguava28.2-jreorg.springframework.bootspring-boot-starter-data-jpaorg.springframework.bootspring-boot-starter-webmysqlmysql-connector-javaruntimeorg.projectlomboklomboktrue打印sql配置要点:驱动配置 appli…

php数组基础

php中,数组的下标可以是整数,或字符串。 php中,数组的元素顺序不是由下标决定,而是由其“加入”的顺序决定。 定义: $arr1 array(元素1,元素2,。。。。。 ); array(1, 5, 1.1, “abc”, tr…

1.格式化输入输出

1.格式化输入input() input()函数,通常只能返回一个数据类型,那么怎么可以进行多个变量的复制呢?看下面这段代码。 1 str1, str2 eval(input("请输入两个字符串:")) 2 print(str1, str2) 3 4 num1, num2 eval(input(…

canvas像素点操作 —— 视频绿幕抠图

原文地址 主要内容 上篇文章学习了canvas像素点的获取 —— 传送门, 今天学一下canvas像素点操作。 一个方法:putImageData putImageData 用法: context.putImageData(imgData, x, y, dX, dY, dWidth, dHeight);参数描述imgData规定要放…

Java中的迭代器设计模式–示例教程

迭代器模式是一种行为模式,用于提供遍历一组对象的标准方式。 Iterator模式在Java Collection Framework中得到了广泛使用,其中Iterator接口提供了遍历集合的方法。 根据GoF,迭代器设计模式的意图是: 提供一种在不暴露其基础表示…

random

1 import random2 3 result random.randint(1, 7) # 随机生成1到7的整数4 result random.random() # 随机生成[0,1)的浮点数5 result random.randrange(1, 7) # 随机生成1到7的整数6 result random.choice([1, 2, 3, 4]) # 从列表中随机选择一个元素7 result random.c…

面向对象 解释 经典啊

想必大家都知道面向对象三大特征:继承,封装,多态。 假如你现在有一个女朋友,那么现在你就可以称呼你的女朋友为对象啦。首先,你女朋友的身高三围等我们称作为属性,你如果想要跟你好基友分享一下你女朋友的身…

关于Unity实现AR功能(五)摄像头转换与闪光灯开关控制

1 /// <summary>2 /// 摄像头转换3 /// </summary>4 /// <param name"s_cameraDirection">摄像头转换方向</param>5 public void ChangeCameraDirectionMet(CameraDevice.CameraDirection s_cameraDirection)6 {7 …

并发编程(一):基础概述

本篇博客主要讲述并发编程中的一些基础内容&#xff0c;并了解一下基本概念。 首先我们了解一下什么是并发&#xff1f; 同时拥有两个或者多个线程&#xff0c;如果程序在单核处理器上运行&#xff0c;多个线程将交替的换入或者换出内存&#xff0c;这些线程是同时“存在”的&a…

Dumb Bones UVA - 10529(概率dp)

题意&#xff1a; 你试图把一些多米诺骨牌排成直线&#xff0c;然后推倒它们。但是如果你在放骨牌的时候不小心把刚放的骨牌碰倒了&#xff0c;它就会把相临的一串骨牌全都碰倒&#xff0c; 而你的工作也被部分的破坏了。 比如你已经把骨牌摆成了DD__DxDDD_D的形状&#xff0c;…

M - 非常可乐

1 #include <string.h>2 #include <stdio.h>3 #include <queue>4 using namespace std;5 6 int s,n,m;7 int vis[105][105][105];8 9 struct node10 {11 int s,n,m,step;12 };13 int check(int x,int y,int z)//平分条件14 {15 if(x 0 && y…

ArrayList和Vector的区别

这两个类都实现了List接口&#xff08;List接口继承了Collection接口&#xff09;&#xff0c;他们都是有序集合&#xff0c;即存储在这两个集合中的元素的位置都是有顺序的&#xff0c;相当于一种动态的数组&#xff0c;我们以后可以按位置索引号取出某个元素&#xff0c;并且…

【luogu1613】跑路 - 倍增+Floyd

题目描述 小A的工作不仅繁琐&#xff0c;更有苛刻的规定&#xff0c;要求小A每天早上在6&#xff1a;00之前到达公司&#xff0c;否则这个月工资清零。可是小A偏偏又有赖床的坏毛病。于是为了保住自己的工资&#xff0c;小A买了一个十分牛B的空间跑路器&#xff0c;每秒钟可以跑…

python哲学翻译_Python

正在学习Python开发语言的用户&#xff0c;可能会在学习过程中听说过讲师说过Python有一段有关于Python的哲学理念机设计思想&#xff0c;在Python里输入“import this”命令就会出现一段英文格言&#xff0c;这里我们把Python的这段格言的双语版分享出来&#xff0c;帮助正在学…

如何创建线程?

Java并发编程&#xff1a;如何创建线程&#xff1f; 在前面一篇文章中已经讲述了在进程和线程的由来&#xff0c;今天就来讲一下在Java中如何创建线程&#xff0c;让线程去执行一个子任务。下面先讲述一下Java中的应用程序和进程相关的概念知识&#xff0c;然后再阐述如何创建线…

经典MapReduce作业和Yarn上MapReduce作业运行机制

一、经典MapReduce的作业运行机制 如下图是经典MapReduce作业的工作原理&#xff1a; 1.1 经典MapReduce作业的实体 经典MapReduce作业运行过程包含的实体&#xff1a; 客户端&#xff0c;提交MapReduce作业。JobTracker&#xff0c;协调作业的运行。JobTracker是一个Java应用程…

根据Linux2.6.26源码分析进程模型

1.关于进程 1.1进程的概念 进程是正在运行的程序实体&#xff0c;并且包括这个运行的程序中占据的所有系统资源&#xff0c;比如说CPU(寄存器)&#xff0c;IO,内存&#xff0c;网络资源等。很多人在回答进程的概念的时候&#xff0c;往往只会说它是一个运行的实体&#xff0c;而…

socket编程开发

1.socket是什么&#xff1f; Socket是应用层与TCP/IP协议族通信的中间软件抽象层&#xff0c;它是一组接口。在设计模式中&#xff0c;Socket其实就是一个门面模式&#xff0c; 它把复杂的TCP/IP协议族隐藏在Socket接口后面&#xff0c;对用户来说&#xff0c;一组简单的接口就…

一个前端岗位电话面试所带来的问题的思考

这绝对不是一篇技术文&#xff0c;如果你不喜欢&#xff0c;也请不要喷&#xff0c;你可以看看都有哪些问题&#xff0c;当然&#xff0c;在这里你可能得不到问题的答案&#xff0c;不懂的你可能需要自己去百度&#xff0c;也可以在下面留言交流&#xff0c;我已经声明了&#…