使用jenkins進行前端項目自動部署

時間  2019-11-07
標籤 使用 jenkins 進行 前端 項目 自動 部署 欄目 自動化構建 简体版
原文   原文鏈接

前面的話

　　後端的nodeJS項目可使用pm2進行自動部署，因爲前端項目打包後是靜態資源，不須要進程守護。通常地，前端項目使用jenkins來進行自動部署，包括打包、測試等一系列流程。本文將詳細介紹jenkins的使用前端

 

安裝

　　Jenkins 是一款業界流行的開源持續集成工具，普遍用於項目開發，具備自動化構建、測試和部署等功能。因爲 jenkins是基於java環境運行的，因此首先須要安裝java環境java

　　一、安裝依賴包，使得add-apt-repository命令能夠進行node

apt-get install software-properties-common

　　二、經過add-apt-repository加載第三方的開源軟件源git

sudo add-apt-repository ppa:webupd8team/java

　　三、更新軟件包列表，並安裝jdkgithub

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

　　安裝器會提示贊成 oracle 的服務條款，選擇 ok，而後選擇yes 便可web

　　四、經過查看java版本，來測試java環境是否安裝成功shell

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)

　　五、接下來，按照官網的操做要求，安裝jenkinsnpm

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

　　六、安裝完成後，jenkins的文件目錄以下所示json

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

　　七、接下來，就能夠啓動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

　　三、安裝完畢後，選擇系統管理->全局工具配置，配置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就配置好了

 

配置任務

　　一、安裝好github鉤子以及nodejs插件後，接下來開始配置任務

　　點擊建立一個新任務，填寫任務名稱，構建的項目類型可根據實際狀況進行選擇，本次選擇第一種便可

jenkins

　　二、配置基礎信息

jenkins

　　三、往下拉，看到源碼管理，點選Git，依然填寫博客對應的Repo地址

jenkins

　　四、繼續往下拉，在構建觸發器單擊增長構建步驟，在彈出的下拉菜單中選擇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
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程