基於 Docker 打造前端持續集成開發環境

知乎: 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 即可以輕鬆地完成自動部署上線。

若有問題，請隨時聯繫我，謝謝。