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

如有問題，請隨時聯系我，謝謝。

總結

以上是生活随笔為你收集整理的基于 Docker 打造前端持续集成开发环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。