1. 程式人生 > >Jenkins 實現前端自動打包,自動部署程式碼及郵件提醒功能

Jenkins 實現前端自動打包,自動部署程式碼及郵件提醒功能

在之前的公司,我們前端使用webpack構建專案,專案構建完成後,我們會使用ftp或linux的一些命令工具上傳我們的檔案到伺服器上,這種方式雖然是可以,但是最近面試的時候,人家會問我前端如何部署專案,我就說我們公司目前是這樣操作的,最後人家會感覺很low,最後總之總之沒有面試上。因此今天來給大家介紹下使用Jenkins基於github來實現前端自動化整合打包部署前端資原始檔。

Jenkins基本介紹: Jenkins是一個開源軟體專案,它是基於java開發的一種持續整合工具,它用於監控持續重複的工作。
它最大的優點是:在開發環境或測試環境程式碼部署都不需要運維介入,而是相關的開發人員,測試人員登入jenkins構建需要部署的tag或分支程式碼即可。整個過程不需要運維參與。因此我們現在想使用jenkins的話,我們首先需要安裝java開發環境。

一:安裝java環境

1)安裝預設的JRE/JDK

更新命令: sudo apt-get update
檢查是否安裝了java: java -version

如果java命令沒有找到的話,就說明沒有安裝java,因此我們需要安裝java環境。

需要執行如下命令: sudo apt-get install default-jre

因此會安裝JRE(Java Runtime Environment). 如果我們需要安裝JDK(Java Development Kit)的話,請執行如下命令:

sudo apt-get install default-jdk

然後我們檢視java版本,來測試java環境是否安裝成功了,如下命令:

$ java -version

如下圖所示:

二:安裝jenkins

按照官方文件來(https://jenkins.io/zh/doc/book/installing/)安裝即可:執行如下命令來安裝:

$ wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'

$ sudo apt-get update

$ sudo apt-get install jenkins

如下圖所示:

如上,因為我現在用的是自己的華為膝上型電腦,預設是使用的是linux系統。因此按照官網上的步驟安裝即可。

安裝完成後,jenkins的檔案目錄如下:

安裝目錄:/var/lib/jenkins
日誌目錄: /var/log/jenkins/jenkins.log

2)啟動jenkins

service jenkins start

會報如下錯誤: bash: service: 未找到命令

解決的辦法是:直接使用 su -root 來切換到root使用者,比如如下命令:

$ su - root

然後使用 /sbin/service 來操作,比如如下所示命令:

$ /sbin/service jenkins start

這樣我們就啟動了jenkins了,現在我們就可以在瀏覽器下訪問 http://localhost:8080/ 即可,如下所示:

注意:jenkins是部署在本地的,預設埠為 8080;

瀏覽器進入Jenkins,登入地址為: http://localhost:8080/;

關閉Jenkins的地址為: http://localhost:8080/exit;

重啟Jenkins的地址為: http://localhost:8080/restart;

重新載入配置資訊: http://localhost:8080/reload;

2.2 在伺服器的指定目錄找到密碼登入

/var/lib/jenkins/secrets/initialAdminPassword

因此我們在命令列中執行如下命令即可獲取到密碼了;如下檢視命令:

$ sudo vim /var/lib/jenkins/secrets/initialAdminPassword

然後複製密碼後填寫上去,繼續執行下面的步驟即可。

這個過程可能會載入很慢,我們稍等一下後,我們按照預設配置安裝外掛即可,如下所示:

然後會進入如下頁面進行預設安裝外掛即可,如下所示:

安裝完成後,我們需要 建立第一個管理員使用者。如下所示:

建立完成後,就可以開始使用jenkins,如下圖所示:

接下來我們可以開始使用我們的Jenkins了,如下所示:

三:Jenkins實現自動化部署

實現的目標是:我們的本地專案發起一個git提交後,剩下的單元測試, 打包構建,程式碼部署,郵件提醒等,我們會全部自動化完成部署。

3.1. 準備

首先我們隨便準備一個專案(我這邊是使用webpack搭建的vue專案了),在git倉庫中新建一個專案,然後把該本地專案提交到github上去。

比如我這邊專案如下所示:

3.2. 在jenkins中繫結github

我們現在要實現這麼一個功能,當我們在本地專案往github遠端倉庫push我們的程式碼的時候,jenkins就能知道我們提交了程式碼,要實現這麼一個功能的基本原理是:在遠端倉庫上需要配置一個Jenkins服務的介面地址,當本地向遠端倉庫發起push時候,遠端倉庫會向配置的Jenkins伺服器的介面地址發起一個帶引數的請求,當jenkins收到後開始工作。

配置步驟如下:

Github配置

1) 在Github上獲取訪問token的值,需要一個對專案有寫許可權的賬戶。

如果要實現自動構建的話,Jenkins需要獲得遠端程式碼倉庫Github的讀取權。

點選右上角的 Github --> setting --> Developer settting --> Personal access tokens -> 點選Generate new token 填寫如下所示的內容:

建立成功後,會生成一個token的值如下:

先儲存好這個token,後面會使用到。

2) 用Ngrok實現內網穿透

Ngrok的用途是:將內網的IP對映成對外可訪問的域名。

國內Ngrok官網可以瞭解下:https://www.ngrok.cc/

我們需要註冊一個賬號,註冊完成後,我們可以直接新增隧道。如何開通隧道,可以看這篇文章(https://www.sunnyos.com/article-show-67.html)

開通完成後,我們變成如下這個樣子了,如下圖所示:

現在我們需要點選上圖的客戶端下載,下載自己系統對應的客戶端。然後壓縮後,資料夾內會有一個 叫 sunny 這個bat檔案,我們進入下載目錄的資料夾下,使用linux移動命令把該批處理檔案移動到 /usr/local/bin 目錄下即可;命令如下所示:

$ sudo mv sunny /usr/local/bin 

然後我們進入 /usr/local/bin 目錄下,執行命令: ./sunny clientid 隧道id; 即可,隧道id就是我們剛剛生成的。比如如下所示:

執行該命令後,我們回車可以看到如下資訊了,如下圖所示:

因此我們現在訪問:http://kongzhi.free.idcfengye.com 就可以訪問對應的本地服務 http://127.0.0.1:8080/ 服務了。如下所示:

3)Github webhooks設定

進入Github上指定的專案 --> setting -> WebHooks --> add webhook, 如下圖所示:

完成後,點選下面 add webhooks 按鈕,即可建立完成,如下圖所示:

Jenkins的github配置

4)安裝Github Plugin

點選 Manage Jenkins -> Manage Plugins -> 可選外掛, 如下圖所示:

點選下面的 "直接安裝" 按鈕, Jenkins會自動幫我們解決外掛的依賴。如下圖所示:

5)配置Github Plugin

Manage Jenkins -> Configure System -> Github -> 點選新增Github伺服器, 如下圖所示:

API URL 預設為:https://api.github.com,我們不動它,然後憑據點選 Add新增,如下圖所示:

如上,我們之前已經生成了token之後。在如上配置中,我們頁面中的型別選擇 Secret text,在Secret中黏貼Github生成的Token,id和描述可以隨便寫,或不填。

最後點選新增按鈕後,會回到主頁面,在憑據中選擇我們剛才建立的憑據,然後我們點選 "連結測試"。如果沒有成功的話,則需要返回重新操作以上步驟,如下所示,我們只要點選儲存完成配置即可,如下圖所示:

到這裡,基礎配置已經完成了。

3.3. Jenkins中建立任務

1) 點選建立一個新任務,如下圖所示:

輸入一個任務名稱,比如叫 testJekins, 然後選擇第一項即可。如下圖所示:

因此準備工作已經完成了,我們輸入任務名稱後,選擇第一項後,點選底部的確定按鈕,就可以進入下一步的頁面了,如下圖所示:

如上選擇Github,填寫專案的URL,該地址是我們Github上的主頁地址,不是github資源地址。

2). 原始碼管理配置

開啟剛剛我們建立的任務,切換到 "原始碼管理" tab項,然後在左側選擇 Git,然後我們把我們的github專案中的倉庫地址,新增配置登入名和密碼(點選新增會彈出一個框,我們預設操作就行),及分支。如下圖所示:

3). 構建觸發器

4). 構建環境

其他暫時不用配置。配置完成後,我們再回到列表頁面,看到基本的效果如下圖所示,現在我們在本地專案程式碼再push一下,看是否發生了變化。

如上我們可以看到,我們每次程式碼push的時候,Jenkins會自動幫我們構建一次,但是它有幾秒鐘的延遲,如果我們立即push完成後,重新整理頁面後,並沒有立即看到構建完成,而要過幾秒鐘再看下就可以了。

我們也可以看看控制檯輸出的資訊也可以看得到如下資訊,代表構建成功了。如下:

我們也可以看得到,我們的testJenkins專案中也有我們github上的專案中的所有檔案,如下所示:

如上只是簡單使用我們的github中的push命令後,在Jenkins中構建一下我們的程式碼,但是我們都明白我們希望的是,我們的push命令後,在Jenkins上會幫我們自動打包,比如像webpack中一樣,呼叫npm run build 這樣的命令後,打包到dist資料夾內,然後把dist資料夾內的所有程式碼放到ftp伺服器下,因此我們想使用jenkins是否也能實現這樣的呢?

5). 實現自動化構建

如上git push 觸發鉤子後,jenkins就可以開始工作了,我們之前使用webpack打包的,我們現在放到Jenkins來做這件事。

在我們的package.json 檔案中有如下二個命令:

"scripts": {
  "dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "webpack --progress --colors --devtool cheap-module-source-map"
},

為了能在Jenkins能自動打包構建,首先我們需要安裝依賴包,使用命令:npm install,最後使用npm run build 構建檔案。因此會使用到如下兩個命令:

npm install 
npm run build

我們想要在jenkins裡面執行npm命令的話,首先我們需要在jenkins裡面配置node環境,我們可以通過配置環境變數的方式引入node,也可以通過安裝外掛的方式來引入的,我們這邊使用外掛的方式吧,安裝一下 nvm wrapper 這個外掛。

1) 安裝NodeJS Plugin

在外掛管理介面搜尋NodeJS,找到後,安裝,重啟,如下所示:

2) 安裝NodeJS

Manage Jenkins -> Global Tool Configuration -> NodeJs(點選新增NodeJS按鈕) 如下圖所示:

點選儲存按鈕即可。

3) 在構建環境配置下安裝nodejs

構建環境勾選 Provide Node & npm bin/folder to PATH,如下圖所示:

每次build,都會首先執行環境構建,如果環境沒有錯誤後,才會開始真正的實現構建過程。

4) 構建

我們現在可以把我們的打包命令放到構建中了,在構建過程中會執行該命令進行打包。如下命令:

npm config set registry http://registry.npm.taobao.org/ && npm install && rm -rf dist && npm run build

如下所示:

然後我們就可以點選儲存按鈕了。

此時我在本地專案中改下程式碼,然後使用git push程式碼上去的時候,就可以測試下,在push的過程中,再看看Jenkins中如下所示:

然後點選下面正在的的構建,控制檯輸出選項,如下圖所示:

選擇檢視控制檯就可以看到構建輸出的資訊了,如下圖所示:

等構建完成後,命令列最後一行是Finished的狀態如果是SUCCESS,則證明執行的任務順利完成了。如果是FAILURE則證明中間有重大錯誤導致任務失敗。UNSTABLE代表有些小問題,但是不阻礙任務執行。

程式碼在構建的過程中,會報如下的錯誤:

解決的辦法在命令列中執行命令: sudo npm -g install [email protected] --ignore-script

稍等一會兒,我們可以看到構建成功資訊了,如下圖所示:

然後我們點選專案的工作空間,將會發現多了dist和node_modules兩個檔案夾了。如下圖所示:

如上我們的程式碼已經自動構建完成了,但是我們目前還沒有部署到某個伺服器上去,因此我們現在要實現這麼一個功能。

6). 實現自動化部署

自動化部署功能是需要的,因為如果公司只有一臺伺服器,我們可以使用人工部署的方式,但是如果公司有10臺伺服器甚至更多的話,如果使用人工方式,就很吃力了,並且一旦線上出問題了,回滾操作也比較麻煩。所以我們需要實現一個自動化部署的功能。

先在Jenkins上安裝一個 Public Over SSH 外掛,我們將會通過這個工具來實現伺服器部署的功能。

1) 安裝外掛

點選 Manage Jenkins -> Manage Plugins -> 可選外掛中,搜 Public Over SSH 外掛,點選安裝,安裝完成後,重啟Jenkins

如下圖所示:

2)配置

點選 Manage Jenkins -> Configure System -> 拉倒最下面就有該視窗了,如下所示:

配置項的含義如下

Passphrase: 密碼(key的密碼,如果沒有的話就不填寫)
Path to key: key檔案(私鑰)的路徑
SSH Server Name: 標示的名稱(隨便寫)
Hostname: 需要連結ssh的主機名或ip地址,建議寫伺服器ip
Username: 使用者名稱
Remote Directory: 遠端目錄(伺服器檔案目錄: 比如 /usr/local/nginx/pcweb/)

如上填寫完成後,點選儲存按鈕即可,我本地電腦沒有對應的伺服器,因此暫時不測試了。

配置完成後,我們需要到我們建立的任務,點選構建項tab,增加2行程式碼,如下:

cd dist && tar -zcvf dist.tar.gz *

含義是:進入dist資料夾內,把所有的檔案打包成一個檔案。如下所示:

點選構建後操作,增加構建後操作步驟,選擇send build artificial over SSH,然後會彈出一個框,如下圖所示:

引數說明:

Name: 選擇一個我們配好的SSH伺服器
Source files: 我們要傳輸的檔案路徑
Remove prefix: 要去掉字首,不寫遠端伺服器的目錄結構,和Source files 寫的一致。
Remote directory: 要寫部署在遠端伺服器的那個目錄地址下,如果我們不寫的話,就是SSH Servers配置裡面的預設遠端目錄。
Exec command: 傳輸完了要執行的命令,我們可以執行解壓縮和解壓縮完成後刪除壓縮包的2個命令。

因此

Source files 可以填寫:dist/dist.tar.gz; 這樣的。
Remove prefix 可以寫成: dist/
Exec command可以寫成如下命令:

cd testJenkins
tar -zxvf dist.tar.gz
rm -rf dist.tar.gz

最後我們點選儲存按鈕即可,現在我們在我們的本地修改完程式碼後,直接git push,在jenkins會自動構建打包,且會自動部署到我們服務
器程式碼上了。

3.3 實現郵件提醒

待續更新中...... (目前還有其他重要的事情要處