前言
繼上一篇文章， 實現一個cli專案腳手架， 完成專案初始化。
這篇文章主要講講，開發完成後的持續整合CI/CD。
主要實現功能： 當向github倉庫push程式碼後， 實現自動打包， 並部署到對應伺服器上。
其實使用jenkins就可以實現了。
為什麼加一個docker？ 為了裝X。
哈哈， 開玩笑啦，jenkins官網也推薦我們這麼做。 主要目的是提高自動化任務的速度和一致性。
docker安裝
我使用的是阿里雲centos。
安裝 Docker Engine-Community之前先要配置一下相關依賴：
# 相關依賴
$ sudo yum install -y yum-utils \
device-mapper-persistent-data \
lvm2
# 設定穩定倉庫
$ sudo yum-config-manager \
--add-repo \
https://download.docker.com/linux/centos/docker-ce.repo
# 安裝docker
sudo yum install docker-ce docker-ce-cli containerd.io
複製程式碼正常情況下， 上面幾行命令就可以將docker裝上了， 此時可以通過：
docker --version
複製程式碼檢驗一下docker是否安裝成功。
不同作業系統安裝docker，可以參考菜鳥教程。
在往下之前簡單講下docker的基本知識：
docker是做什麼的
docker可以看做是輕量級的虛擬機器。
docker容器不是模擬一個完整的作業系統， 而是對程式進行隔離。 或者說， 在正常程式外面套一個保護層。對於容器裡面的程式來說， 它接觸到的各種資源都是虛擬的， 從而實現與底層系統的隔離。
相對虛擬機器的優勢：
- 啟動快
- 資源佔用少
- 體積小
docker組成
一個完整的Docker組成部分：
1. DockerClient客戶端
2. Docker Daemon守護程式
3. Docker Image映象
4. DockerContainer容器
複製程式碼DockerClient客戶端
docker採用c/s架構（客戶端-伺服器）。使用遠端API來管理和建立Docker容器， 而我們使用的命令列其實就是docker的客戶端。我們通過shell來通知服務端操作docker容器。
Docker Daemon守護程式
Docker daemon作為服務端接受來自客戶的請求，並處理這些請求（建立， 執行， 分發容器）。
image映象檔案
Docker把應用程式及其依賴， 打包在image檔案裡面。 只有通過這個檔案， 才能生成Docker容器。image檔案可以看作是容器的模板。 Docker根據image檔案生成容器的例項。 同一個image檔案， 可以生成多個同時執行的容器例項。
DockerContainer容器
容器就是根據image檔案生成對應的環境。 用以：
- 執行服務
- 測試軟體
- 持續整合
- ......
jenkins安裝
在上面我們知道， docker容器的建立依賴image映象檔案。 從jenkins官網，我們可以瞭解到， 它推薦我們使用人家定製好的jenkinsci/blueocean來做我們的映象檔案。
具體操作：
docker run \
--rm \
-u root \
-p 8080:8080 \
-v jenkins-data:/var/jenkins_home \
-v /var/run/docker.sock:/var/run/docker.sock \
-v "$HOME":/home \
jenkinsci/blueocean
複製程式碼解析下上面的命令：
- --rm： 當容器結束執行後銷燬容器
- -u root： 許可權等級為root
- -p 8080:8080: 將docker80埠對映到本地的80埠， 用以訪問
- -v jenkins-data:/var/jenkins_home： 將容器中的 /var/jenkins_home 目錄對映到 Docker volume ，並將其命名為 jenkins-data。如果該卷不存在, 那麼 docker run 命令會自動為你建立卷。
- jenkinsci/blueocean： 以該檔案作為容器的映象檔案， 如果沒有， docker會自行下載。
不出意外，此時你訪問你本地的80埠（不建議使用80埠， 很可能被佔用， 建議改成不常用的埠）， 可以看到下面的頁面：
上面的密碼就在你之前命令列的log中， 在兩行*號之前的那段符號複製過來即可。
進入可以按推薦直接安裝外掛，至此jenkins安裝結束。
配置前端專案打包部署環境
安裝外掛：
-
publish over ssh用於連線遠端伺服器
-
Deploy to container外掛用於把打包的應用釋出到遠端伺服器
-
NodeJS plugin不解釋
Manage Jenkins -> Configure System
配置遠端伺服器的SSH：
-
Passphrase 伺服器的密碼
-
Path to key 連線遠端伺服器金鑰檔案的路徑
-
Key 金鑰檔案的內容
-
Name 自定義伺服器名
-
HostName 伺服器IP外網地址
-
UserName 伺服器使用者名稱
-
Remote Directory 傳輸檔案的目錄
Manage Jenkins -> Global tool configuration
配置node環境：
新建專案
完成上述系統配置後， 就可以開始我們的專案配置了。
新建item
->
自由風格
->
原始碼管理選擇git
->
構建觸發器（定時構建， 輪詢SCM： 設定時間， 輪詢github倉庫程式碼變化即執行構建部署）
上面的日程表就是配置輪詢時間的間隔， 每5分鐘去檢視下github倉庫中的程式碼是否有變更， 如果有變更就執行下面的shell命令， 完成打包， 部署。
->
構建環境（Node）
->
構建執行shell
cd /var/jenkins_home/workspace/mason-test #進入Jenkins工作空間下專案目錄
node -v #檢測node版本（此條命令非必要）
npm -v #檢測npm版本（此條命令非必要）
cnpm install #安裝專案中的依賴
npm run build #打包
tar -zcvf build.tar.gz build/ #壓縮，方便傳輸，我這裡打包的檔名是build
複製程式碼->
構建後操作：
Remove prefix 去字首
Remote directoty 釋出的目錄
Exec command 釋出完執行的命令:
cd /root/dreamONE
tar -zxvf build.tar.gz
rm -rf build.tar.gz
複製程式碼至此， 一個基本的自動化打包， 部署的架子就搭起來了， 接下來就是完成細化專案，日誌追蹤等細節任務了。
後話
有了專案腳手架： masoneast-cli，
有了docker + jenkins完成持續整合CI/CD。
接下來就是新增前端效能監控平臺， 通過檢測：
- 首屏渲染
- 頁面穩定性
- API呼叫情況
等完成效能基本監控， 從而制定優化策略。