用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/](https://jenkins.io/zh/doc/book/installing/))安裝即可：執行如下命令來安裝: [](javascript:void(0); "復制代碼") ~~~ $ 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 ~~~ [](javascript:void(0); "復制代碼") 如下圖所示:  如上，因為我現在用的是自己的華為筆記本電腦，默認是使用的是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.ngrok.cc/) 我們需要注冊一個賬號，注冊完成后，我們可以直接添加隧道。如何開通隧道，可以看這篇文章([https://www.sunnyos.com/article-show-67.html](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 phantomjs-prebuilt@2.1.16 --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 實現郵件提醒**