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

转载：http://www.javashuo.com/article/p-szkpjudb-dw.html

本文将以一个标准的 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 即可以轻松地完成自动部署上线。

固然，这只是很是简单的一个部署在单节点的裸应用，它没有涉及到 nginx 配置，负载均衡，后端服务，日志收集，数据存储，灰度发布，集群管理等生产环境的所须要求，若是有兴趣，请持续关注个人 Docker 系列文章，以上这些都会在我接下来的文章中一一解答。

做者：三环没有少 连接：https://juejin.im/post/5a142d7b6fb9a0451170c2c7 来源：掘金 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。