知乎: 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 便可以輕鬆地完成自動部署上線。
如有問題，請隨時聯絡我，謝謝。