近幾年，伴隨着前端技術日新月異的發展，前端開發中前后端分離，工程化，自動化等現代化的開發模式越來普及，前端項目也引入了編譯，構建，單元測試等現代軟件工程化的標准環節。這樣大大提高了前端的開發效率和業務交付能力。但是，在代碼集成，項目部署階段，我們還需要引入 CI / CD 等現代化的軟件開發實踐，來減少風險和重復過程，節省我們的時間。
一、CI/CD流程簡介
CI(Continuous integration，中文意思是持續集成)是一種軟件開發實踐。持續集成強調開發人員提交了新代碼之后，立刻進行構建、（單元）測試。根據測試結果，我們可以確定新代碼和原有代碼能否正確地集成在一起。
1、如果沒有 CI/CD， 我們的前端從開發到提測工作流程可能如下：
- 本地機器上寫代碼
- 在命令行輸入 npm run unit，查看單元測試結果
- 提交代碼，push 到 git 遠程倉庫
- 登錄測試服務器，拉取代碼，執行 npm run build，構建項目
- 如果測試服務器是基於 pm2 的 proxy server，還需要重啟 server
這個流程中，每一個步驟都要重復人工操作，很大增加了時間成本，不能保證操作的准確性。對於 unit 或者 build 的結果，沒有一個自動的反饋機制，需要人工 check 運行結果，最后部署也是人工登錄服務器執行腳本，非常繁瑣。
2、引入 CI/CD 以后，整個流程變成：
- 本地機器上寫代碼
- 提交代碼，push 到 git 遠程倉庫
- git hook 觸發 jenkins 的構建 job （自動）
- jenkins job 中拉取項目代碼，運行 npm run unit 和 npm run build，如果失敗，發送郵件通知相關人。（自動）
- jenkins job 中執行測試服務器的部署腳本 （自動）
在 CI/CD 流程中，只有步驟1和步驟2需要人工操作，其他步驟都是自動運行，是一個非常標准化的流程，減少了人工操作的風險，省去了重復性工作，增強了項目的可見性。接下來我們將通過配置 jenkins 和 gitlab webhook 來實現這個流程。
二、jenkins是什么
Jenkins是一個開源的、提供友好操作界面的持續集成(CI)工具，起源於Hudson（Hudson是商用的），主要用於持續、自動的構建/測試軟件項目、監控外部任務的運行（這個比較抽象，暫且寫上，不做解釋）。Jenkins用Java語言編寫，可在Tomcat等流行的servlet容器中運行，也可獨立運行。通常與版本管理工具(SCM)、構建工具結合使用。常用的版本控制工具有SVN、GIT，構建工具有Maven、Ant、Gradle。
Jenkins是開源的，使用Java編寫的持續集成的工具，在Centos上可以通過yum命令行直接安裝。Jenkins只是一個平台，真正運作的都是插件。這就是jenkins流行的原因，因為jenkins什么插件都有。
學習jenkins的實現目標：本地push代碼到GitHub，Webhook自動觸發jenkins上的構建動作,完成安裝node插件並且打包，然后通過Publish Over SSH插件，將打包出來的文件，部署到目標服務器上。
1、前期准備
- github 賬號和項目
- centos 服務器;
- 服務器安裝 Java SDK;
- 服務器安裝 nginx + 啟動；
- 服務器安裝jenkins + 啟動；
2、軟件安裝
// 首先登錄服務器更新系統軟件
yum update // 安裝Java和git
yum install java yum install git // 安裝nginx
yum install nginx //安裝
service nginx start //啟動
出現Redirecting to /bin/systemctl start nginx.service，說明nginx已經啟動成功了，訪問http://你的ip/，如果成功安裝會出來nginx默認的歡迎界面
// 安裝 Jenkins
$ wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
$ yum install jenkins //完成之后直接使用 yum 命令安裝 Jenkins
$ service jenkins restart //啟動 jenkins
jenkins啟動成功后默認的是8080端口，瀏覽器輸入你的服務器 ip 地址加8080 端口就可以訪問了
輸入 cat /var/lib/jenkins/secrets/initialAdminPassword 查看初始密碼
這里我們選擇推薦通用插件安裝即可，選擇后等待完成插件安裝以及初始化賬戶
然后安裝兩個推薦的插件 Rebuilder、SafeRestart
3、在jenkins中安裝nodeJs插件
因為我們的項目是要用到node打包的，所以需要先安裝nodeJS插件。
進入全局工具配置，配置一個我們要用到的node版本
上面填寫 名稱，安裝目錄，這個安裝目錄是會安裝到服務器上去的，手動安裝的話就是服務器上nodejs的安裝路徑。下面可以選擇 自動安裝，也可以不選，不選自動安裝的話就需要在服務器上 mkdir -p 上面填寫的路徑，然后在這個路徑下安裝 nodejs 才可以。
三、使用Jenkins進行代碼打包部署
Jenkins是一個強大的CI工具，雖然本身使用Java開發，但也能用來做其他語言開發的項目CI。下面講解如何使用Jenkins創建一個構建任務。
登錄Jenkins， 點擊左側的新建，創建新的構建任務。
跳轉到如下界面。任務名稱可以自行設定，但需要全局唯一。輸入名稱后選擇構建一個自由風格的軟件項目(其他選項不作介紹)。並點擊下方的確定按鈕即創建了一個構建任務。之后會自動跳轉到該job的配置頁面。
下圖是構建任務設置界面，可以看到上方的幾個選項"General"、"源碼管理"， "構建觸發器"，"構建環境"， "構建"， "構建后操作"。下面逐一介紹如何在Jenkins里進行配置
首先，在 jenkins 中需要安裝 Gitlab Hook Plugin 這個插件，以支持 gitlab 的 webhook 功能。
1、在 jenkins 左邊欄點擊 “新建”， 輸入 job 名稱，選擇 “構建一個自由風格的軟件項目” 一項。點擊 “OK”
2、進入 job 配置頁面，點擊 “General” 選項，配置名稱和描述
3、點擊 “源碼管理” 選項，配置項目的 git 倉庫地址的需要構建的分支信息、登錄憑證等
4、點擊 “構建觸發器” 選項，配置 job 構建時機，勾選如下圖，即可通過 gitlab webhook 來觸發 job 構建
5、點擊“構建環境”選項，選擇 node npm 環境
這里選擇 nodeJS 版本，以及緩存的目錄，就是這些工具會緩存到這個個目錄下，workspace是jenkins默認生成的目錄，如果npm安裝的依賴版本不對，需要清除 node_module 的時候，就進入服務器這個目錄去清除
6、點擊 “構建” 選項，再點擊 “增加構建步驟”， 選擇 “Execute shell”，配置構建命令。如下圖
7、點擊 “構建后操作” 選項，添加兩個構建后操作步驟：（可建可不建）
“E-mail Notification”，配置構建失敗的郵件通知人；
“Send build artifacts over ssh”, 執行預先寫好的遠程服務器的部署腳本
8、點擊最下方的 “保存”，job 創建完畢。
9、配置 Gitlab webhooks
前提條件：jenkins安裝Generic Webhook Trigger 插件、github添加觸發器。
在gitlab的project頁面 打開settings，再打開 web hooks 。點擊"ADD WEB HOOK" 添加webhook。把之前jenkins配置中的那個url 添加到這里，添加完成后，點擊"TEST HOOK"進行測試，如果顯示SUCCESS 則表示添加成功。
這樣，當有代碼 push 到 git 倉庫時，gitlab 會向 jenkins 服務器發送 post 請求，觸發之前創建好的 jenkins job 運行, 代碼從開發到部署測試，是一個持續的過程，同時對整個過程錯誤提供了反饋機制。
此外推薦這篇博客里的步驟和配圖寫的很詳細，可以參考：Jenkins詳細教程：https://www.jianshu.com/p/5f671aca2b5a
配置完成后點擊立即構建，等待構建完，點擊工作空間，可以發現已經多出一個打包后的dist目錄。點擊控制台輸出可以查看詳細構建log。
到這里已經實現了本地代碼提交到github，然后在jenkins上點擊構建，可以拉取代碼並且打包，下一步實現打包后的dist目錄放到目標服務器上。
9、安裝Publish Over SSH 插件，我們將通過這個工具實現服務器部署功能。
安裝完成后在系統管理-> 系統設置->Publish over SSH 里設置服務器信息
Passphrase：密碼（key的密碼，沒設置就是空） Path to key：key文件（私鑰）的路徑 Key：將私鑰復制到這個框中(path to key和key寫一個即可) SSH Servers的配置： SSH Server Name：標識的名字（隨便你取什么） Hostname：需要連接ssh的主機名或ip地址（建議ip） Username：用戶名 Remote Directory：遠程目錄（上面第二步建的testjenkins文件夾的路徑） 高級配置： Use password authentication, or use a different key：勾選這個可以使用密碼登錄，不想配ssh的可以用這個先試試 Passphrase / Password：密碼登錄模式的密碼 Port：端口（默認22） Timeout (ms)：超時時間（毫秒）默認300000
這里配置的是賬號密碼登錄，填寫完后點擊test，出現Success說明配置成功
在剛才的工程中配置構建后操作，選擇send build artificial over SSH， 參數說明：
Name:選擇一個你配好的ssh服務器
Source files ：寫你要傳輸的文件路徑
Remove prefix ：要去掉的前綴，不寫遠程服務器的目錄結構將和Source files寫的一致
Remote directory ：寫你要部署在遠程服務器的那個目錄地址下，不寫就是SSH Servers配置里默認遠程目錄
Exec command ：傳輸完了要執行的命令，我這里執行了進入test目錄,解壓縮,解壓縮完成后刪除壓縮包三個命令
注意在構建中添加壓縮dist目錄命令
填完后執行構建。成功后登錄我們目標服務器發現test目錄下有了要運行的文件。
訪問域名發現項目可以訪問了。