利用Jenkins與Nginx實現前端項目自動構建與持續集成
實現目標
本地push代碼到GitHub，Webhook自動觸發Jenkins上的構建動作，完成安裝Node插件并且打包，然后通過Publish Over SSH插件，將打包出來的文件，部署到目標服務器上。
前期準備
- GitHub賬號和項目
- CentOS服務器
- 服務器安裝Java SDK
- 服務器安裝Nginx +啟動
- 服務器安裝Jenkins +啟動
Jenkins介紹
Jenkins是開源的，使用Java編寫的持續集成的工具，在CentOS上可以通過yum命令行直接安裝。Jenkins只是一個平臺，真正運作的都是插件。這就是Jenkins流行的原因，因為Jenkins什么插件都有。
首先登錄服務器更新系統軟件
- $ 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。
在Jenkins中安裝NodeJs插件
因為我們的項目是要用到Node打包的，所以先在Jenkins中安裝NodeJs插件，安裝后進入全局工具配置，配置一個我們要用到的Node版本。
創建任務
點擊創建一個新任務。
Jenkins關聯GitHub項目地址：
選擇構建環境并編寫shell命令：
配置完成后點擊立即構建，等待構建完，點擊工作空間，可以發現已經多出一個打包后的dist目錄。點擊控制臺輸出可以查看詳細構建log。
到這里已經實現了本地代碼提交到GitHub，然后在Jenkins上點擊構建，可以拉取代碼并且打包，下一步實現打包后的dist目錄放到目標服務器上。
安裝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說明配置成功。
在剛才的testJenkins工程中配置構建后操作，選擇send build artificial over SSH， 參數說明：
- Name：選擇一個你配好的SSH服務器
- Source files：寫你要傳輸的文件路徑
- Remove prefix：要去掉的前綴，不寫遠程服務器的目錄結構將和Source files寫的一致
- Remote directory：寫你要部署在遠程服務器的那個目錄地址下，不寫就是SSH Servers配置里默認遠程目錄
- Exec command：傳輸完了要執行的命令，我這里執行了進入test目錄,解壓縮,解壓縮完成后刪除壓縮包三個命令
注意在構建中添加壓縮dist目錄命令：
填完后執行構建。成功后登錄我們目標服務器發現test目錄下有了要運行的文件：
訪問域名發現項目可以訪問了。
接下來實現開發本地push代碼到GitHub上后，觸發Webhook，Jenkins自動執行構建。
- Jenkins安裝Generic Webhook Trigger插件
- GitHub添加觸發器
配置方法
在剛才的testJenkins工程中點擊構建觸發器中選擇Generic Webhook Trigger，填寫token：
GitHub配置Webhook。
選擇GitHub項目中的Settings->Webhooks>add webhook配置方式按上圖紅框中的格式，選擇在push代碼時觸發Webhook，成功后會在下方出現一個綠色的小勾勾。
測試一下，把Vue項目首頁的9900去了，然后push代碼去GitHub，發現Jenkins中的構建已經自動執行。
查看頁面也是ok的。
一套簡單的前端自動化工作流就搭建完成，是選擇代碼push后在Jenkins中手動構建，還是push后自動構建，看公司情況使用。
最后
寫的有點啰嗦，有錯誤的地方希望大家指出，也希望這篇文章對大家有幫助。
