讓 Jenkins 自動佈署你的 Vue 項目

實現目標

本地 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 什麼插件都有。

首先登錄服務器更新系統軟件

1$ yum update
2
3

安裝 Java 和 git

1$ yum install java
2$ yum install git
3
4

安裝 nginx

1$ yum install nginx //安裝
2$ service nginx start //啓動
3
4

出現 Redirecting to /bin/systemctl start nginx.service

說明 nginx 已經啓動成功了，訪問 http:// 你的 ip/，如果成功安裝會出來 nginx 默認的歡迎界面

安裝 Jenkins

1$ wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
2rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key 
3
4$ yum install jenkins //完成之後直接使用 yum 命令安裝 Jenkins
5
6$ service jenkins restart  //啓動 jenkins
7
8

jenkins 啓動成功後默認的是 8080 端口，瀏覽器輸入你的服務器 ip 地址加 8080 端口就可以訪問了。

輸入 cat /var/lib/jenkins/secrets/initialAdminPassword 查看初始密碼

這裏我們選擇推薦通用插件安裝即可，選擇後等待完成插件安裝以及初始化賬戶

然後安裝兩個推薦的插件 Rebuilder
SafeRestart

在 jenkins 中安裝 nodeJs 插件

因爲我們的項目是要用到 node 打包的，所以先在 jenkins 中安裝 nodeJs 插件，安裝後進入全局工具配置，配置一個我們要用到的 node 版本。

創建任務

  1. 點擊創建一個新任務

  1. jenkins 關聯 GitHub 項目地址

  1. 選擇構建環境並編寫 shell 命令

配置完成後點擊立即構建，等待構建完，點擊工作空間，可以發現已經多出一個打包後的 dist 目錄。點擊控制檯輸出可以查看詳細構建 log



到這裏已經實現了本地代碼提交到 github，然後在 jenkins 上點擊構建，可以拉取代碼並且打包，下一步實現打包後的 dist 目錄放到目標服務器上。

安裝 Publish Over SSH 插件，我們將通過這個工具實現服務器部署功能。

安裝完成後在系統管理 -> 系統設置 ->Publish over SSH
裏設置服務器信息

 1Passphrase：密碼（key的密碼，沒設置就是空）
 2Path to key：key文件（私鑰）的路徑
 3Key：將私鑰複製到這個框中(path to key和key寫一個即可)
 4
 5SSH Servers的配置：
 6SSH Server Name：標識的名字（隨便你取什麼）
 7Hostname：需要連接ssh的主機名或ip地址（建議ip）
 8Username：用戶名
 9Remote Directory：遠程目錄（上面第二步建的testjenkins文件夾的路徑）
10
11高級配置：
12Use password authentication, or use a different key：勾選這個可以使用密碼登錄，不想配ssh的可以用這個先試試
13Passphrase / Password：密碼登錄模式的密碼
14Port：端口（默認22）
15Timeout (ms)：超時時間（毫秒）默認300000
16
17

這裏配置的是賬號密碼登錄，填寫完後點擊 test，出現 Success 說明配置成功

在剛纔的 testJenkins 工程中配置構建後操作，選擇 send build artificial over SSH， 參數說明：

1Name:選擇一個你配好的ssh服務器
2Source files ：寫你要傳輸的文件路徑
3Remove prefix ：要去掉的前綴，不寫遠程服務器的目錄結構將和Source files寫的一致
4Remote directory ：寫你要部署在遠程服務器的那個目錄地址下，不寫就是SSH Servers配置裏默認遠程目錄
5Exec command ：傳輸完了要執行的命令，我這裏執行了進入test目錄,解壓縮,解壓縮完成後刪除壓縮包三個命令
6
7

注意在構建中添加壓縮 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 後自動構建，看公司情況使用。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/JhwNlj2JhWQx1u_YnrWwgQ

猜你喜歡