利用Jenkins與Nginx實(shí)現(xiàn)前端項(xiàng)目自動(dòng)構(gòu)建與持續(xù)集成
實(shí)現(xiàn)目標(biāo)
本地push代碼到GitHub，Webhook自動(dòng)觸發(fā)Jenkins上的構(gòu)建動(dòng)作，完成安裝Node插件并且打包，然后通過Publish Over SSH插件，將打包出來的文件，部署到目標(biāo)服務(wù)器上。
前期準(zhǔn)備
- GitHub賬號(hào)和項(xiàng)目
- CentOS服務(wù)器
- 服務(wù)器安裝Java SDK
- 服務(wù)器安裝Nginx +啟動(dòng)
- 服務(wù)器安裝Jenkins +啟動(dòng)
Jenkins介紹
Jenkins是開源的，使用Java編寫的持續(xù)集成的工具，在CentOS上可以通過yum命令行直接安裝。Jenkins只是一個(gè)平臺(tái)，真正運(yùn)作的都是插件。這就是Jenkins流行的原因，因?yàn)镴enkins什么插件都有。
首先登錄服務(wù)器更新系統(tǒng)軟件
- $ yum update
安裝Java和Git
- $ yum install java
- $ yum install git
安裝Nginx
- $ yum install nginx //安裝
- $ service nginx start //啟動(dòng)
出現(xiàn)Redirecting to /bin/systemctl start nginx.service。
說明Nginx已經(jīng)啟動(dòng)成功了，訪問http://你的ip/，如果成功安裝會(huì)出來Nginx默認(rèn)的歡迎界面：
安裝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 //啟動(dòng)Jenkins
Jenkins啟動(dòng)成功后默認(rèn)的是8080端口，瀏覽器輸入你的服務(wù)器IP地址加8080端口就可以訪問了。
輸入cat /var/lib/jenkins/secrets/initialAdminPassword查看初始密碼。
這里我們選擇推薦通用插件安裝即可，選擇后等待完成插件安裝以及初始化賬戶。
然后安裝兩個(gè)推薦的插件：Rebuilder、SafeRestart。
在Jenkins中安裝NodeJs插件
因?yàn)槲覀兊捻?xiàng)目是要用到Node打包的，所以先在Jenkins中安裝NodeJs插件，安裝后進(jìn)入全局工具配置，配置一個(gè)我們要用到的Node版本。
創(chuàng)建任務(wù)
點(diǎn)擊創(chuàng)建一個(gè)新任務(wù)。
Jenkins關(guān)聯(lián)GitHub項(xiàng)目地址：
選擇構(gòu)建環(huán)境并編寫shell命令：
配置完成后點(diǎn)擊立即構(gòu)建，等待構(gòu)建完，點(diǎn)擊工作空間，可以發(fā)現(xiàn)已經(jīng)多出一個(gè)打包后的dist目錄。點(diǎn)擊控制臺(tái)輸出可以查看詳細(xì)構(gòu)建log。
到這里已經(jīng)實(shí)現(xiàn)了本地代碼提交到GitHub，然后在Jenkins上點(diǎn)擊構(gòu)建，可以拉取代碼并且打包，下一步實(shí)現(xiàn)打包后的dist目錄放到目標(biāo)服務(wù)器上。
安裝Publish Over SSH插件，我們將通過這個(gè)工具實(shí)現(xiàn)服務(wù)器部署功能
安裝完成后在系統(tǒng)管理-> 系統(tǒng)設(shè)置->Publish over SSH里設(shè)置服務(wù)器信息：
- Passphrase：密碼(key的密碼，沒設(shè)置就是空)
- Path to key：key文件(私鑰)的路徑
- Key：將私鑰復(fù)制到這個(gè)框中(path to key和key寫一個(gè)即可)
SSH Servers的配置：
- SSH Server Name：標(biāo)識(shí)的名字(隨便你取什么)
- Hostname：需要連接SSH的主機(jī)名或IP地址(建議IP)
- Username：用戶名
- Remote Directory：遠(yuǎn)程目錄(上面第二步建的testjenkins文件夾的路徑)
高級(jí)配置：
- Use password authentication, or use a different key：勾選這個(gè)可以使用密碼登錄，不想配SSH的可以用這個(gè)先試試
- Passphrase/Password：密碼登錄模式的密碼
- Port：端口(默認(rèn)22)
- Timeout(ms)：超時(shí)時(shí)間(毫秒)默認(rèn)300000
這里配置的是賬號(hào)密碼登錄，填寫完后點(diǎn)擊test，出現(xiàn)Success說明配置成功。
在剛才的testJenkins工程中配置構(gòu)建后操作，選擇send build artificial over SSH， 參數(shù)說明：
- Name：選擇一個(gè)你配好的SSH服務(wù)器
- Source files：寫你要傳輸?shù)奈募窂?/li>
- Remove prefix：要去掉的前綴，不寫遠(yuǎn)程服務(wù)器的目錄結(jié)構(gòu)將和Source files寫的一致
- Remote directory：寫你要部署在遠(yuǎn)程服務(wù)器的那個(gè)目錄地址下，不寫就是SSH Servers配置里默認(rèn)遠(yuǎn)程目錄
- Exec command：傳輸完了要執(zhí)行的命令，我這里執(zhí)行了進(jìn)入test目錄,解壓縮,解壓縮完成后刪除壓縮包三個(gè)命令
注意在構(gòu)建中添加壓縮dist目錄命令：
填完后執(zhí)行構(gòu)建。成功后登錄我們目標(biāo)服務(wù)器發(fā)現(xiàn)test目錄下有了要運(yùn)行的文件：
訪問域名發(fā)現(xiàn)項(xiàng)目可以訪問了。
接下來實(shí)現(xiàn)開發(fā)本地push代碼到GitHub上后，觸發(fā)Webhook，Jenkins自動(dòng)執(zhí)行構(gòu)建。
- Jenkins安裝Generic Webhook Trigger插件
- GitHub添加觸發(fā)器
配置方法
在剛才的testJenkins工程中點(diǎn)擊構(gòu)建觸發(fā)器中選擇Generic Webhook Trigger，填寫token：
GitHub配置Webhook。
選擇GitHub項(xiàng)目中的Settings->Webhooks>add webhook配置方式按上圖紅框中的格式，選擇在push代碼時(shí)觸發(fā)Webhook，成功后會(huì)在下方出現(xiàn)一個(gè)綠色的小勾勾。
測(cè)試一下，把Vue項(xiàng)目首頁的9900去了，然后push代碼去GitHub，發(fā)現(xiàn)Jenkins中的構(gòu)建已經(jīng)自動(dòng)執(zhí)行。
查看頁面也是ok的。
一套簡(jiǎn)單的前端自動(dòng)化工作流就搭建完成，是選擇代碼push后在Jenkins中手動(dòng)構(gòu)建，還是push后自動(dòng)構(gòu)建，看公司情況使用。
最后
寫的有點(diǎn)啰嗦，有錯(cuò)誤的地方希望大家指出，也希望這篇文章對(duì)大家有幫助。
