web前端jenkins自動部署pipeline用法

前言

在前端開發項目中，咱們可能會遇到不少頻繁重複的工做，尤爲是是測試環境的缺陷修復與發版。手動部署多臺服務器，也是一個體力活。並且不少公司規模並非那麼大，可能沒有專門的團隊來作這件事。這個時候咱們就須要一個自動化的工具，來提升咱們的效率。最典型的工具就是Jenkins。 接下來，咱們講探究一下怎麼使用jenkins部署。本次內容，咱們將學習或者鞏固到以下知識點：

• 如何新增並啓動一個節點服務器
• 運維神器【ansible】命令批量部署多臺服務器
• Linux系統下java環境搭建規範(本文中Linux 是CentOS 的發行版)
• pipeline流水線方式部署的基本語法

〇、必備的環境及條件

• 若干Linux服務器（服務器之間最好能免密訪問）
• 已經搭建好的jenkins平臺
• 已經搭建好的git代碼倉庫
• 勤勞的雙手

1、新建節點

節點，簡單來講就是一個拉取你的最新代碼執行打包構建的服務器。

【Manage Jenkins】--> 【Manage Nodes and Clouds】

節點列表頁面【新建節點】，節點命名 爲 h5-slave，與配置填寫。

，指定工做目錄。（此處指定爲/mnt）

配置填寫完畢，點擊保存，即返回到了節點列表頁面：

咱們能夠發現外面剛纔見 h5-slave節點 有個紅色的叉，表面該節點不可用。服務還沒啓動。此前沒法做爲jenkins構建。

2、啓動節點服務器

從節點列表點擊該節點，進入到節點明細頁面咱們能夠看到以下

在瀏覽器中啓動節點

在命令行中啓動節點

java -jar agent.jar -jnlpUrl http://xxx.xxx.x.x:8080/computer/h5-slave/slave-agent.jnlp -secret 8973d1ffe40afad5d9003cbf5ae3639dc49626e89567845cb5aabb2ac75cedc4 -workDir "/mnt"
Run from agent command line, with the secret stored in a file:

echo 8973d1ffe40afad5d9003cbf5ae3639dc49626e89567845cb5aabb2ac75cedc4 > secret-file
java -jar agent.jar -jnlpUrl http://xxx.xxx.x.x:8080/computer/h5-slave/slave-agent.jnlp -secret @secret-file -workDir "/mnt"

這像是一個操做指引，告訴咱們在節點服務器執行以下命令便可啓動成功。 同時，咱們要想啓動節點服務器，必需要具有以下環境與條件：

• java 環境
• 下載agent.jar包

nodejs環境對於web前端開發來講再熟悉不過了，可是Linux系統下java環境怎麼部署呢？也須要一個規範。這裏能夠給出一個參考給你們：

java環境搭建

• 一、檢查是否已經安裝java環境

java -version
// 或者
yum list installed |grep java

從這個命令能夠看到，咱們確實沒有安裝java環境

• 二、下載依賴包,並解壓

首先，咱們到官網上下載jdk8的穩定版本 Jdk官網，打開這個頁面，咱們能夠看到以下：

這些版本看起來眼花繚亂的，可是咱們注意如下幾點：

• Linux ARM 針對移動端平臺的linux系統
• Linux x86 32位的
• Linux x64 64位的

通常狀況下，選擇Linux x64就好了。

這裏下載也能夠經過兩種方式下載：

• 規規矩矩的下載tar.gz文件到本地，而後經過FTP上傳到Linux服務器。
• 在Linux服務器上直接經過wget命令下載。（前提是開通了網絡權限）。或者有內網的依賴包，類庫管理站，直接內網下載。

注意：這裏官網下載須要你註冊帳號，登陸

咱們將jdkxxx.tar.gz放到/usr/local目錄下，而後解壓

// tar.gz文件解壓：

tar -xzvf jdk.xxx.tar.gz

// zip文件解壓
unzip jdk.xxx.zip 

// 若是沒有zip命令，能夠安裝
yum install unzip -y

• 三、配置jdk環境變量

打開配置文件

vi /etc/profile

在最後兩行添加：

export JAVA_HOME=/usr/local/jdk-xxxx
export PATH=$PATH:$JAVA_HOME/bin

隨即，咱們讓配置生效

source /exr/profile

• 四、驗證java環境是否裝成功

利用第一步中的命令：

java -version
// 或者
yum list installed |grep java

下載agent.jar包

• 一、右鍵，複製超連接

• 二、到節點服務器上、任意路徑上，下載

wget [右鍵複製超連接後的url]

• 三、啓動節點服務器

拷貝此前新建節點後頁面提示的一長串命令，而後用nohup方式 啓動便可。

nohup java -jar agent.jar -jnlpUrl http://1xx.xx.1.2:8080/computer/h5-salve/slave-agent.jnlp -secret 
2eb8b373985964a61d4a8fa40cd8b452bd575704254292510a2aeec4da18adfb -workDir "/mnt"&

注意：前面有一個nohup，結尾有一個&，且&前面不要有空格

節點啓動成功後，咱們便可用該節點自動部署了。

4、新建item

• 一、【jenkins】 -->【新建item】-->【流水線】，點擊確認

• 二、在配置中，其餘先無論，只填寫【流水線】

填寫完後，必定要記得點擊【應用】或者【保存】。

咱們來看看流水線的標準語法結構:

pipeline {
    agent {
        label '[節點名]'
    }

   stages {
      stage('process name 1') {
         steps {
            // Get branch lastest code from a GitHub repository
            echo 'pull code start: get latest code'
            git branch: '1.0.0',
                credentialsId: '59d70ec8-6236-4bba-add1-15447d212d62',
                url: 'https://gitlab.xxx.com/hjqh/future-am-admin.git'

         }
      }
      stage('process name2') {
         steps {

         }

      }
      stage('process name3') {
         steps { 
         }
         
      }
   }
}

具體實際的配置，咱們能夠參考以下：

pipeline {
    agent {
        label 'h5-slave'
    }

   stages {
      stage('Pull code') {
         steps {
            // Get branch lastest code from a GitHub repository
            echo 'pull code start: get latest code'
            git branch: '1.0.0',
                credentialsId: '59sssc8-6236-4bba-add1-15447d212d62',
                url: 'https://gitlab.xxxx.com/hjqh/future-am-admin.git'

         }

      }
      stage('Build') {
         steps {
            // Get branch lastest code from a GitHub repository
            echo 'build start......'
            // 安裝依賴
            sh 'npm install --registry=https://registry.npm.taobao.org'
            // 打包構建
            sh 'npm run build'
            // 重命名打包名
            sh 'mv dist ./admin'
            // 壓縮，方便更快傳輸到目標應用服務器
            sh 'tar -czvf admin.tar.gz admin'
            // 控制檯打印
            echo "build success..."

         }

      }
      stage('Deploy') {
         steps {
            echo 'deploy start...'
            // 用ansible命令備份應用服務器上原有的文件
            sh 'ansible admin -i /mnt/hosts -m shell -a "mv /home/apps/admin /home/apps/backup/app-`date +%Y%m%d%H%M%S`"'
            // 用ansible命令將節點服務器部署包上傳至應用服務器
            sh 'ansible admin -i /mnt/hosts -m copy -a "src=/mnt/workspace/xxx/admin.tar.gz  dest=/home/apps"'
            // 用ansible命令操做應用服務器，解壓應用服務器上的部署包（解壓及完成部署）
            sh 'ansible admin -i /mnt/hosts -m shell -a "tar -zxvf /home/apps/admin.tar.gz -C /home/apps/"'
             // 用ansible命令操做應用服務器，刪除節點服務器上的部署包
            sh 'rm -rf /mnt/workspace/xxx/admin.tar.gz /mnt/workspace/xxx/admin /home/apps/admin.tar.gz'
            echo 'deploy success'

         }
         
      }
   }
}

從上述的實際流水線腳本，咱們須要注意以下：

• 一、整個流水線語法的空格、縮進、換行，須要嚴格注意
• 二、一個stages裏面包含多個stage，能夠理解爲多個步驟
• 三、第一個步驟，通常都得指定git地址和分支、以及jenkins全局配置的credentialsId 這樣才能拉取到制定分支的最新的代碼。
• 四、執行shell命令 以sh 開頭，中間有空格，一行命令寫完後，注意換行。
• 用到了神奇的ansible命令工具。

理解ansible

首次看到ansible，是不是一頭霧水？先來看概念

ansible是新出現的自動化運維工具，基於Python開發，集合了衆多運維工具（puppet、cfengine、chef、func、fabric）的優勢，實現了批量系統配置、批量程序部署、批量運行命令等功能。

從上述概念上，咱們能夠知道，ansible就是一個實現批量部署的工具。 假如你又10臺服務器須要部署，部署的包、命令如出一轍，操做10次就太費勁了。引入ansible，就可提高效率。

一、下載安裝

yum install ansible -y

安裝後驗證一下：

ansible --version

二、新建一個ansible配置文件

咱們在節點服務器的/mnt目錄下,新建一個hosts文件：

// 新建或者編輯hosts文件
vi hosts
// 輸入以下配置，並保存
[admin]
admin-01 ansible_connection=local
admin-02 ansible_connection=1xx.1xx.1xx.1
admin-03 ansible_connection=1xx.1xx.1xx.2

[h5]
h5-01 ansible_connection=local
h5-02 ansible_connection=1xx.1xx.1xx.1
h5-03 ansible_connection=1xx.1xx.1xx.2

從上述命令，咱們能夠推斷出這麼一個場景：

• 一、須要部署的應用系統有2個組，一個是admin，一個是h5，且每一個組下面有三臺應用服務器
• 二、ansible_connection=local 表示該jenkins節點，本身也同時做爲一臺應用服務器。

最終，咱們的ansible配置以下：

三、ansile命令

由第二步，咱們能夠知道，ansible配置路徑爲 /mnt/hosts，以此前咱們用到的ansible命令爲例

sh 'ansible admin -i /mnt/hosts -m copy -a "src=/mnt/workspace/xxx/admin.tar.gz  dest=/home/apps"'

上述命令表示，將節點服務器的mnt/workspace/xxx/admin.tar.gz （src=xxx）文件拷貝，批量上傳到admin這個組裏面的全部服務器的home/apps路徑下（ dest=xxx）上去。admin這個組下面有哪些服務器？經過 -i /mnt/hosts 指定配置文件來讀取。

sh 'ansible admin -i /mnt/hosts -m shell -a "tar -zxvf /home/apps/admin.tar.gz -C /home/apps/"'

上述命令，- m shell "[你的shell命令]",其實也很好理解。注意shell命令要有雙引號。

想了解更多的ansible相關的信息，可點擊Ansible中文權威指南。

5、jenkins構建

點擊構建以前必定要確保節點服務器 跟應用部署服務器之間是免密訪問的（找運維人員處理便可）。 否者你的ansible命令就得從新寫，帶帶上登陸用戶信息才行。

再者，咱們一直沒有強調節點服務器搭建nodejs環境，這個也是必備的。 至於何如安裝nodejs環境，請參考Linux下nodejs環境搭建

咱們打開新建的item頁面，點擊【build Now】

而後在構建任務列表，點擊當前正在構建的任務

進入當前構建的詳情頁，--》【打開 Blue Ocean】

咱們能夠看到上面的幾個步驟，就是咱們流水線代碼裏面的幾個stage，一一對應，模塊井井有條。查看構建日誌也方便，比傳統的Publish over SSH遠程部署方式要好不少。

結語

做爲一個前端開發，咱們應該學會用工具，來提高提高平常開發的效率。本篇以最繁瑣最笨的方式，來解決小公司小團隊的自動化部署問題。掌握了這種基本的技能，朝着devOps又更進一步了。固然，技術無所謂優劣，能解決你的實際問題的，就是好的技術。