使用 Jenkins 部署 React 項目

背景

• 公司的前端項目部署方式比較簡單，整個過程基本上是手動的；

目標

經過工具實現如下幾個任務：

• 編譯、部署自動化；
• 選擇指定版本進行回滾；
• 區分不一樣的分支（環境）；

技術方案

• 選用 jenkins 做爲部署工具；也便於後續 CI 的接入；
• 使用 docker 進行編譯，確保每次編譯的環境的穩定；

步驟

步驟一：搭建 Jenkins

搭建 Jenkins 有不少方案，這裏選擇使用 docker 搭建。

docker-compose.yml 的內容以下：

version: '3'
services:
  fejenkins:
    user: root
    image: jenkinsci/blueocean
    ports:
      - "8080:8080"
      - "50000:50000"
    volumes:
      - /data/jenkins_home:/var/jenkins_home
      - /data/nm_cache:/var/nm_cache
      - /var/run/docker.sock:/var/run/docker.sock

經過 docker-compose up 命令啓動；啓動後經過初始密碼進行第一個用戶的建立和 Jenkins 初始化的一些列操做，初始密碼會打印在 jenkins docker 啓動命令行的輸出中，注意查看。

固然也能夠不使用 docker-compose：

docker run --rm -u root -v /data/jenkins_home:/var/jenkins_home -v /data/nm_cache:/var/nm_cache -v /var/run/docker.sock:/var/run/docker.sock -p 8080:8080 -p 50000:50000 jenkinsci/blueocean

稍作解釋：

• /data/jenkins_home:/var/jenkins_home /var/jenkins_home 是 jenkinsci image 的默認數據存放路徑，這裏將路徑映射到宿主機的指定文件夾；
• /data/nm_cache:/var/nm_cache nm_cache 涵義是 node_modules cache，顧名思義，這裏是想對編譯所需的 node_modules 作緩存，將緩存文件夾也映射到宿主機；
• /var/run/docker.sock:/var/run/docker.sock 這裏是將宿主機運行 docker 後產生的 sock 文件映射到了 jenkins container 中。這樣，jenkins 中使用 docker 進行編譯時，實際上是使用宿主機的 docker 來運行的，而不是在 docker container 中又啓動了 docker。這裏稍微有點繞，如果暫時看不明白，須要找一些深刻介紹 docker 的文章閱讀；

步驟二：配置 Jenkins

添加 Credentials

經過 Jenkins 進行 git 操做須要對應 git repo 的權限，這裏須要用到有 git repo 權限的密鑰文件。一樣，經過 Jenkins 將編譯產物 scp 到服務器上的時候，也須要服務器的密鑰文件。

這兩類密鑰文件須要配置在 Jenkins 中，在：Jenkins > Credentials > System > Global credentials (unrestricted) 裏進行 Add Credentials 的操做。

添加 Jenkins Item

Jenkins > New Item，而後選擇 Pipeline，在下面的 Pipeline 配置區域的 Definition 中選擇 Pipeline script，Script 以下：

pipeline {
    environment {
        SERVER_IP_1 = "11.22.33.44"
        SERVER_CREDENTIALSID = "abcd1234-abcd-abcd-abcd-abcd1234abcd"
        SERVER_DEPLOY_DIR = "/your/www/path/"

        CACHE_DIR = "/var/nm_cache/your_project_name/"

        GIT_URL = "git@github.com:example/example.git"
        GIT_BRANCH = "master"
        GIT_CREDENTIALSID = "abcd1234-abcd-abcd-abcd-abcd1234abcd"
    }
    agent none
    stages {
        stage('Checkout code') {
            agent any
            steps {
                git (
                    branch: "${GIT_BRANCH}",
                    credentialsId: "${GIT_CREDENTIALSID}",
                    url: "${GIT_URL}",
                    changelog: true
                )
                sh '''
                    ls -al
                    cache_dir="${CACHE_DIR}"
                    cache_nm="${CACHE_DIR}node_modules"
                    cache_lock="${CACHE_DIR}yarn.lock"

                    if [ ! -d "$cache_dir" ]; then mkdir ${cache_dir}; fi
                    if [ ! -d "$cache_nm" ]; then mkdir ${cache_nm}; fi
                    if [ -d "$cache_nm" ]; then ln -sf ${cache_nm} ./; fi
                    if [ -f "$cache_lock" ]; then mv -n ${cache_lock} .; fi

                    ls -al
                '''
            }
        }
        stage('Build') {
            agent {
                docker {
                    image 'node:8-alpine'
                    args ''
                }
            }
            steps {
                sh '''
                    npm config set registry https://registry.npm.taobao.org
                    yarn install
                    yarn build
                    tar -cvf build.tar build

                    ls -al
                    mv ./yarn.lock ${CACHE_DIR}
                    rm -rf ./node_modules
                    ls -al
                '''
                archiveArtifacts artifacts: 'build.tar', fingerprint: true
            }
        }
        stage('Deploy') {
            agent any
            steps {
                unarchive mapping: ['build.tar': 'build.tar']
                echo '--- Deploy ---'

                sshagent(["${SERVER_CREDENTIALSID}"]) {
                  sh "scp -o StrictHostKeyChecking=no build.tar root@${SERVER_IP_1}:${SERVER_DEPLOY_DIR}"
                  sh "ssh -o StrictHostKeyChecking=no root@${SERVER_IP_1} \"rm -rf ${SERVER_DEPLOY_DIR}build; tar -xvf ${SERVER_DEPLOY_DIR}build.tar -C ${SERVER_DEPLOY_DIR}\""
                }

            }
        }
    }
}

稍作解釋：

• 這個部署腳本分爲三個步驟：

  • Checkout code（在指定 git 倉庫經過指定證書文件獲取代碼）
  • Build（經過指定命令進行編譯，將編譯後的產物存檔）
  • Deploy（經過指定命令部署）

• 在 Build 階段先後，咱們各作了一些工做，以求每次部署能夠複用 node_modules，由於下載 node_modules 的時間可能很長，而並非每次都會修改 package.json，因此其實 node_modules 大機率能夠複用；

  • 編譯前：

    • 看指定 node_modules 緩存文件夾是否存在，不存在則新建該文件夾；
    • 看緩存文件夾中是否有 node_modules 文件夾，若是沒有則新建該文件夾；而且將該文件夾軟鏈接到當前目錄；
    • 看緩存文件夾中是否有 yarn.lock 文件，若是有則移動到當前文件夾；

  • 編譯後：

    • 移除 node_modules 文件夾的軟鏈接；
    • 將 yarn.lock 文件移動到緩存文件夾中；

  • 這裏使用了 yarn install 的某些特性：

    • 沒有 node_modules 或者 yarn.lock 時會安裝全量依賴；
    • 有 node_modules 和 yarn.lock 可是 yarn.lock 和 package.json 不匹配時，會安裝所需依賴；
    • 有 node_modules 和 yarn.lock，且 yarn.lock 和 packge.json 配置時，跳過安裝依賴；

使用

編譯和部署

編譯和部署直接點擊 Build Now 便可；

回滾

回滾的本質實際上是：從新部署某個歷史版本。在 Build History 找到想要從新部署的版本，點擊 Restart from Stage，在新頁面中選擇 Stage Name 爲 Deploy。

其餘

如果想要進入 docker container 交互，能夠經過如下命令

docker exec -i -t [dockername] /bin/bash