使用jenkins進行前端專案自動部署

小火柴的藍色理想發表於2018-05-28
Jenkins前端

前面的話

　　後端的nodeJS專案可以使用pm2進行自動部署，由於前端專案打包後是靜態資源，不需要程式守護。一般地，前端專案使用jenkins來進行自動部署，包括打包、測試等一系列流程。本文將詳細介紹jenkins的使用

 

安裝

　　Jenkins 是一款業界流行的開源持續整合工具，廣泛用於專案開發，具有自動化構建、測試和部署等功能。由於 jenkins是基於java環境執行的，所以首先需要安裝java環境

　　1、安裝依賴包，使得add-apt-repository命令可以進行

apt-get install software-properties-common

　　2、通過add-apt-repository載入第三方的開源軟體源

sudo add-apt-repository ppa:webupd8team/java

　　3、更新軟體包列表，並安裝jdk

sudo apt-get update
sudo apt-get install oracle-java8-installer

　　安裝器會提示同意 oracle 的服務條款，選擇 ok，然後選擇yes 即可

　　4、通過檢視java版本，來測試java環境是否安裝成功

xiaohuochai@iZbp13p7zpoi6363d01pugZ:~$ java -version
java version "1.8.0_171"
Java(TM) SE Runtime Environment (build 1.8.0_171-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.171-b11, mixed mode)

　　5、接下來，按照官網的操作要求，安裝jenkins

wget -q -O - https://pkg.jenkins.io/debian/jenkins-ci.org.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

　　6、安裝完成後，jenkins的檔案目錄如下所示

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

　　7、接下來，就可以啟動jenkins了

service jenkins start

　　在jenkins啟動過程中，可能會遇到如下問題

Job for jenkins.service failed

　　這是因為java環境，沒有安裝成功，按照上面的步驟重新安裝java即可

　　還可能會出現如下警告

java.net.UnknownHostException: yonghu: yonghu: 未知的名稱或服務

　　直接修改hosts檔案(vi /etc/hosts)，將原127.0.0.1替換成127.0.0.1 localhost centos-a即可

127.0.0.1 localhost yonghu

　　因為jenkins預設使用8080埠，如果使用阿里雲，還需要在安全組中開放8080埠

 

初始化

　　啟動jenkins服務後，可以在8080埠訪問到jenkins

jenkins

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

/var/lib/jenkins/secrets/initialAdminPassword

　　按照預設配置安裝外掛
jenkins

　　等待外掛安裝完成
jenkins

　　建立一個管理員賬戶，完成配置後，就可以登入 Jenkins 了

jenkins

 

安裝外掛

　　下面來安裝nodejs外掛

jenkins

　　可以看到，Jenkins提供了豐富的外掛供開發者使用，找到需要的[NodeJS Plugin]，勾選後點選安裝即可

jenkins

　　3、安裝完畢後，選擇系統管理->全域性工具配置，配置node下載及安裝

jenkins

 

git鉤子

　　為了能夠與 GitHub 配合，需要進入對 GitHub 進行一些設定

　　在github中進入部落格所在的repo，並點選settings。在設定介面單擊左側的Integrations & services，並選擇add service。從下拉選單中，選中Jenkins(Github plugin)

jenkins

 

　　從下拉選單中，選中Jenkins (GitHub plugin)。在新開啟的介面，填寫Jenkins的資訊

jenkins

　　完整的地址為http://xx.xx.xx.xx:8080/GitHub-webhook/。把這裡的xx換成實際的IP地址或者域名即可。需要注意的是，網址末尾的斜槓一定不能省略

　　填寫好資訊以後儲存，GitHub就配置好了

 

配置任務

　　1、安裝好github鉤子以及nodejs外掛後，接下來開始配置任務

　　點選建立一個新任務，填寫任務名稱，構建的專案型別可根據實際情況進行選擇，本次選擇第一種即可

jenkins

　　2、配置基礎資訊

jenkins

　　3、往下拉，看到原始碼管理，點選Git，依然填寫部落格對應的Repo地址

jenkins

　　4、繼續往下拉，在構建觸發器單擊增加構建步驟，在彈出的下拉選單中選擇Execute shell。勾選GitHub hook trigger for GITScm polling。構建環境選擇nodejs

jenkins

 

構建過程

　　一般地，構建過程，輸入如下

npm install &&
npm run build

　　但是，經過實際測試，在伺服器上使用npm install會使伺服器卡死。於是，變通的方法是，在本地直接構建，並將構建後的檔案上傳到github，然後通過jenkins取得。於是，構建過程如下所示

cp -r ./dist /home/xiaohuochai/blog/admin

　　把dist目錄下的內部複製到/home/xiaohuochai/blog/admin下，並且如果檔名相同，就會直接覆蓋

【修改許可權】

　　由於Jenkins在安裝的時候，會自動建立一個名為jenkins的普通賬號，這個賬號沒有管理員許可權。jenkins執行命令的時候，它也會使用這個賬號。但是由於admin這個資料夾是使用者xiaohuochai建立的，所以jenkins賬號預設是沒有許可權讀寫這個資料夾的。現在需要給jenkins賬號授予許可權。使用xiaohuochai這個賬號登入伺服器，使用以下命令給jenkins賦予許可權，讓它可以讀寫admin資料夾：

sudo chown -R jenkins:jenkins /home/xiaohuochai/blog/admin

　　執行完成這一行命令以後，jenkins才可以把其他地方的檔案複製到這個資料夾裡面

【將靜態資源上傳到七牛雲上】

　　在dist目錄下存在著HTML檔案和其他靜態資源。除了HTML檔案外，其他的靜態資源一般都存放在CDN上，以上傳到七牛云為例

　　在admin目錄下，新建一個upload.js指令碼，注意一定要在本地安裝qiniu外掛

var fs = require(`fs`);
var qiniu = require(`qiniu`);
var accessKey = `xxx`;
var secretKey = `xxx`;

var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
var staticPath = `xxx`;
var prefix = `client/static`;
var bucket = `static`;

var config = new qiniu.conf.Config();
config.zone = qiniu.zone.Zone_z1;
var formUploader = new qiniu.form_up.FormUploader(config);
var putExtra = new qiniu.form_up.PutExtra();
putExtra = null; // 一定要將putExtra設定為null，否則會出現所有檔案類別都被識別為第一個檔案的型別的情況
// 檔案上傳方法
function uploadFile (localFile) {
  // 配置上傳到七牛雲的完整路徑
  const key = localFile.replace(staticPath, prefix)
  const options = {
     scope: bucket + ":" + key,
 }
  const putPolicy = new qiniu.rs.PutPolicy(options)
  // 生成上傳憑證
  const uploadToken = putPolicy.uploadToken(mac)
  // 上傳檔案
  formUploader.putFile(uploadToken, key, localFile, putExtra, function(respErr, respBody, respInfo) {
    if (respErr) throw respErr
  if (respInfo.statusCode == 200) {
    console.log(respBody);
  } else {
    console.log(respInfo.statusCode);
    console.log(respBody);
  }  
})
}
// 目錄上傳方法
function uploadDirectory (dirPath) {
  fs.readdir(dirPath, function (err, files) {
    if (err) throw err
    // 遍歷目錄下的內容
    files.forEach(item => {
      let path = `${dirPath}/${item}`
      console.log(dirPath, item, path)
      fs.stat(path, function (err, stats) {
        if (err) throw err
        // 是目錄就接著遍歷 否則上傳
         if (stats.isDirectory())  uploadDirectory(path)
         else  uploadFile(path, item)
      })
    })
  })
}

fs.exists(staticPath, function (exists) {
  if (!exists) {
    console.log(`目錄不存在！`)
  }
  else {
    console.log(`開始上傳...`)
    uploadDirectory(staticPath)
  }
})

　　然後，在jenkins構建過程中配置如下程式碼即可

cp -r ./dist /home/xiaohuochai/blog/admin
node /home/xiaohuochai/blog/admin/upload.js

 

郵件提醒

　　在系統設定中找到Jenkins Locaction項填入Jenkins URL和系統管理員郵件地址，系統管理員郵件地址一定要配置，否則發不了郵件通知。因為郵件通知都是由系統管理員的郵箱發出來的

jenkins

　　找到郵件通知項，填入SMTP伺服器資訊及使用者名稱、密碼等認證資訊

jenkins

　　找到Extended E-mail Notification項，填入類似資訊

jenkins

　　進行新建的pull-blog專案中，在構建後操作新增Editable Email Notification

jenkins

　　在advances setting中選擇always，意思是無論什麼情況任務執行完就發郵件

jenkins

 

測試

　　按照上面步驟部署完成後，點選立即構建

jenkins

　　點選35號任務的小三角，選擇控制檯輸出

jenkins

　　輸出如下記錄

Started by user xiaohuochai
Building in workspace /var/lib/jenkins/workspace/pull_blog
 > git rev-parse --is-inside-work-tree # timeout=10
Fetching changes from the remote Git repository
 > git config remote.origin.url https://github.com/littlematch0123/blog-admin.git # timeout=10
Fetching upstream changes from https://github.com/littlematch0123/blog-admin.git
 > git --version # timeout=10
 > git fetch --tags --progress https://github.com/littlematch0123/blog-admin.git +refs/heads/*:refs/remotes/origin/*
 > git rev-parse refs/remotes/origin/master^{commit} # timeout=10
 > git rev-parse refs/remotes/origin/origin/master^{commit} # timeout=10
Checking out Revision 21ff1aa59ffb4ffad648f9f80193f300947a98fb (refs/remotes/origin/master)
 > git config core.sparsecheckout # timeout=10
 > git checkout -f 21ff1aa59ffb4ffad648f9f80193f300947a98fb
Commit message: "本地構建"
 > git rev-list --no-walk 21ff1aa59ffb4ffad648f9f80193f300947a98fb # timeout=10
No emails were triggered.
[pull_blog] $ /bin/sh -xe /tmp/jenkins4130757344876690584.sh
+ cp -r ./build ./config-overrides.js ./LICENSE ./package.json ./public ./README.md ./src /home/xiaohuochai/www/blog/admin/source
Email was triggered for: Always
Sending email for trigger: Always
Sending email to: 121631835@qq.com
Finished: SUCCESS

　　與此同時，郵箱也收到了通知

jenkins

 

相關文章