Jenkins 實作前端自動打包,自動部署代碼及郵件提醒功能
2019-11-28 14:01
龍恩0707
閱讀(6811)
評論(0)
編輯
收藏
舉報
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 實作郵件提醒
待續更新中...... (目前還有其他重要的事情要處理)
- 分類 前端工作流規範
-
标簽 Jenkins 實作前端自動打包
, 自動部署代碼及郵件提醒功能