利用Jenkins + nginx 實現前端項目自動構建與持續集成

本文將以我以前的一篇基於vue-cli3.0構建移動端架子的前端代碼自動化部署到目標服務器爲🌰。

實現目標

本地push代碼到GitHub，Webhook自動觸發jenkins上的構建動做,完成安裝node插件而且打包，而後經過Publish Over SSH插件，將打包出來的文件，部署到目標服務器上。

前期準備

1. github 帳號和項目
2. centos 服務器;
3. 服務器安裝 Java SDK;
4. 服務器安裝 nginx + 啓動；
5. 服務器安裝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版本。

建立任務

1. 點擊建立一個新任務

2. jenkins關聯 GitHub項目地址

3. 選擇構建環境並編寫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自動執行構建。

1. jenkins安裝Generic Webhook Trigger 插件
2. github添加觸發器

配置方法

1.在剛纔的testJenkins工程中點擊構建觸發器中選擇Generic Webhook Trigger，填寫token

2.github配置Webhook 選擇github項目中的Settings->Webhooks>add webhook 配置方式按上圖紅框中的格式，選擇在push代碼時觸發webhook，成功後會在下方出現一個綠色的小勾勾

測試一下，把vue項目首頁的9900去了，而後push代碼去github，發現Jenkins中的構建已經自動執行，

查看頁面也是ok的

一套簡單的前端自動化工做流就搭建完成，是選擇代碼push後在Jenkins中手動構建，仍是push後自動構建，看公司狀況使用。

最後

寫的有點囉嗦，有錯誤的地方但願你們指出，也但願這篇文章對你們有幫助。

沒有服務器學習的童鞋能夠看看騰訊雲的 1核2G，1M帶寬，50GB存儲空間的雲服務器，120一年哦。