本文首發於公眾號「前端進階之旅」

持續整合

整合工具 jenkins 的基本介紹和自動化部署微前端專案的幾個簡單方案

一、Jenkins 基礎介紹

Jenkins 是國際上流行的免費開源軟體專案,是基於 Java 開發持續整合工具,用於監控持續重複的工作,旨在提供一個開放的易用的軟體平臺,使軟體的持續整合自動化,大大節約人力和時效。

Jenkins 功能包括：

持續的軟體版本釋出/測試專案。
監控外部呼叫執行的工作。

1. 系統管理

安裝好的 jenkins 可以在系統管理進行配置系統資訊等

系統設定
- 執行者數量：系統可同時併發執行任務的數量，系統預設 2 個，原則上不超過伺服器 CPU 核數，否則容易出現 CPU 利用率過載導致服務掛掉。
- Jenkins URL：Jenkins 訪問地址，可以修改地址的埠號，和修改伺服器配置檔案的埠號效果一致
憑據配置
- 憑據可以用來儲存需要密文保護的資料庫密碼、Gitlab 密碼資訊、Docker 私有倉庫密碼等，以便 Jenkins 可以和這些第三方的應用進行互動，需要安裝 Credentials Binding 外掛，使用者才可管理憑據
憑據管理
- 憑據管理包含憑據的管理和憑據所在域的管理，系統預設會建立全域性域，使用者可以在兩個管理表格的儲存下新增域，在使用者選擇的域下新增憑據或者進入域詳情新增憑據。為了最大程度地提高安全性，在 Jenkins 中配置的憑據以加密形式儲存在主 Jenkins 例項上（由 Jenkins 例項 ID 加密），使用者需要使用配置的唯一標識 ID 進行處理。
- 可以新增的憑證有 5 種：
  1. 使用者名稱和密碼
  2. SSH 金鑰（SSH 公私鑰對）
  3. 加密檔案
  4. 令牌（例如 API 令牌、GitHub 個人訪問令牌）
  5. 證照
- 新增憑據：
  1. 種類
  2. 範圍（全域性、系統）
  3. 憑據
  4. ID (此欄位是可選的。如果未指定其值，Jenkins 將為憑證 ID 分配一個全域性唯一 ID（GUID）值。請記住，一旦設定了憑證 ID，就無法再更改它)
  5. 憑證描述。
外掛管理
Jenkins 提供了兩種不同的方法來在主伺服器上安裝外掛：
- 在管理平臺介面中使用外掛管理器
  通過“系統管理” >“外掛管理”檢視，Jenkins 環境的管理員可以使用該檢視。在“ 可選外掛 ”選項卡下，可以搜尋使用者需要的外掛，搜尋到需要的外掛後勾選外掛列表的選中框，之後點選左下角的下載並且重啟後安裝，等待外掛下載完成後服務自動重啟，重新進入系統即安裝成功。
- 使用 Jenkins CLI install-plugin 命令
  管理員還可以使用 Jenkins CLI，它提供了安裝外掛的命令。用於管理 Jenkins 環境的指令碼或配置管理程式碼可能需要安裝外掛，而無需在 Web UI 中直接進行使用者互動。Jenkins CLI 允許命令列使用者或自動化工具下載外掛及其依賴項
管理使用者
Jenkins 預設使用自帶資料庫模式儲存使用者，jenkins 預設建立 admin 賬號，預設密碼位於 /var/lib/jenkins/secrets/initialAdminPassword，登入之後可在管理使用者修改使用者預設密碼

2. 新建檢視

檢視功能主要用於管理不同專案之間的任務，每個專案建立一個檢視並在檢視下管理整個專案的模組。

列表檢視（顯示簡單列表。新建或編輯檢視的時候可以選擇將當前已有的任務新增到該檢視，也可以在該檢視下新建任務）
我的檢視（該檢視自動顯示當前使用者有許可權訪問的任務）

3. 任務

新建任務
- 任務名稱
- 任務模板：jenkins 提供的任務模板，一般新安裝的 jenkins 只會有一個“構建一個自由風格的軟體專案”模板，而如果需要其他的任務模板需要使用者下載對應的外掛，不同的任務模板會有不同的構建流程
- 複製：可選項，使用者可以輸入已有的任務名稱選擇其中之一複製一個新的任務，選擇了複製的任務後就無法自定義任務模板，以複製的專案的任務模板為主
任務詳情
- 狀態
- 修改記錄：每次構建獲取的程式碼變更記錄，即記錄每次構建的 git 倉庫提交記錄
- 工作空間：任務的工作空間的專案檔案目錄
- 立即構建：執行構建部署任務，使用不同的外掛執行構建過程會有差異
- 配置：配置整個任務構建和部署過程的需要幹什麼
- 刪除工程
- 重新命名

二、任務配置

任務配置主要將自動化構建部署從專案的獲取到部署成功的一個過程需要做的工作做分解配置。

1. General

這一步主要是在執行構建前對 jenkins 配置進行了簡單的設定

描述
丟棄舊的構建
- 策略：預設 Log Rotation
  - 保持構建的天數：將儲存此天數的構建記錄，為空儲存所有
  - 保持構建的最大個數：儲存最近該個數的構建，為空儲存所有
引數化構建過程
Extended Choice Parameter 外掛，該外掛可以使用多選框，利用該外掛可以指定需要打包的應用，而不需要打包所有專案，減少打包時間
- Name：構建過程使用的引數名
- Description：引數描述
- Basic Parameter Types
  - Parameter Type：Check Boxes （值使用的型別）
  - Number of Visible Items：8 checkbox 引數值個數（專案子包和主包個數）
  - Delimiter：, 各個值的分割符號
  - Choose Source for Value：main,subs/appletuser,subs/college,subs/follow,subs/project,subs/questions,subs/statistics,subs/system 引數值（主包和子包相對專案路徑
  - Choose Source for Default Value：main,subs/appletuser,subs/college,subs/follow,subs/project,subs/questions,subs/statistics,subs/system 引數預設選中的值（主包和子包相對專案路徑
布林值引數，true/false 值的引數，當前應用於構建過程中判斷是否需要構建 npm install
- 名稱：構建過程使用的引數名
- 預設值：預設是否勾選
- 描述：引數描述

2. 原始碼管理

Git plugin
GIT 倉庫管理外掛，用於同步 git 庫，通過該外掛 jenkins 任務可以在構建過程中獲取配置好的 git 遠端倉庫程式碼，任務執行時程式碼會被拉取到/var/lib/jenkins/workspace/{任務名稱}目錄下
- Repository URL 程式碼倉庫地址
- Credentials 伺服器連線程式碼倉庫的憑據，可在系統管理新增後選擇，也可以在右邊的新增按鈕新增憑據，新增方式和系統管理的憑據新增一樣
- Branches to build 指定任務需要拉取的分支，允許配置多個分支
- 原始碼庫瀏覽器指定 git 倉庫型別，預設自動

3. 構建

執行 shell

開始執行構建任務之前原始碼管理外掛已經將程式碼從遠端庫中獲取，執行 shell 任務主要通過獲取引數化構建時設定的引數去對整個專案中的各個應用進行打包並將打包完成的部署檔案統一放在根目錄的釋出資料夾publish，執行詳細程式碼如下：

#!/bin/bash
# 專案根目錄地址（相對於工作空間）
project_path=""
# 將使用者選擇需要打包的應用拆分成陣列
OLD_IFS="$IFS"
IFS=","
arr=($mutiParams)
IFS="$OLD_IFS"
# 清空上次打包的部署檔案
rm -rf $WORKSPACE$project_path/publish


for i in ${arr[@]}
do
    # 進入對應的應用中執行打包過程，$WORKSPACE為系統環境變數，值為工作空間地址
    cd $WORKSPACE$project_path/$i
    rm -rf dist
    # 判斷是否需要執行環境安裝，當前設定為全域性設定，所有需要打包的應用會執行相同的判斷
    if [[ $isRunInstall == "true" ]]
    then
      npm install
    fi
    npm run build
    # 將子應用和主應用放在同一級，便於後續部署，因為很多微前端專案子應用都會放置在同一個資料夾下
    [[ $i == "main" ]] && subdir=$i || subdir=${i##*/}


    mkdir -p $WORKSPACE$project_path/publish/$subdir
    mv dist/* $WORKSPACE$project_path/publish/$subdir
done

4. 構建後操作

Send build artifacts over SSH，使用該外掛需要在系統管理->外掛管理中安裝，該外掛主要功能為將構建好的部署包按照一定規則傳送到部署伺服器，並且在這之後可在部署伺服器執行一定的 shell 操作。安裝外掛後還需要在系統管理->系統配置->Publish over SSH新增 SSH Services。
- Name：選擇部署伺服器，所選伺服器就是系統配置中所新增，構建時就會連線該伺服器
- Transfers
  - Source files：構建伺服器中部署檔案的相對地址publish/**
  - Remove prefix：檔案傳送後在部署伺服器的路徑和 Source files 一致，可以根據需求刪除該地址前面某一段，當前為空
  - Remote directory：部署伺服器的部署目錄/home/jenkinsC
  - Exec command：檔案傳送完成之後在這裡可以對部署伺服器進行操作，這裡的 shell 操作作用於部署伺服器，由於微前端的部署特殊性，所以這裡需要對傳送過來的檔案進行轉移操作，具體如下：

#!/bin/bash


# 此處的packages後面多了個publish是打包之後的部署檔名，為了防止在部署主應用的時候被刪掉
packages="main,subs/appletuser,subs/college,subs/follow,subs/project,subs/questions,subs/statistics,subs/system,publish"
# 部署目錄
PUBLISH_PATH=/home/jenkinsC


# 依次迴圈部署構建好的應用
for package in `ls $PUBLISH_PATH/publish`
do
    # 判斷當前是否為主應用，因為主包需要把主應用的所有檔案直接部署在部署目錄下，所以需要在過濾掉子應用和publish資料夾的情況下刪除所有舊的主應用檔案再進行部署
    if [[ $package == "main" ]]
    then
        for element in `ls $PUBLISH_PATH`
        do
          [[ $packages =~ $element ]] || rm -rf $PUBLISH_PATH/$element
        done
        mv $PUBLISH_PATH/publish/$package/* $PUBLISH_PATH
    else
        # 子應用部署方式直接先刪除原有檔案後部署
        rm -rf $PUBLISH_PATH/$package
        mkdir -p $PUBLISH_PATH/$package
        mv $PUBLISH_PATH/publish/$package/* $PUBLISH_PATH/$package
    fi
done
# 部署完成後需要刪除部署檔案，否則下次部署如果沒有刪掉會再次部署舊的檔案
rm -rf $PUBLISH_PATH/publish

三、構建

按照上一步的配置規則執行自動化構建和部署

1. 構建前

路徑：工程->Build With Parameters->開始構建

點選開始構建前需要配置構建所需的引數，構建過程中在左下角的構建歷史可以檢視構建進度條。

mutiParams：選中對應的應用，構建過程中就會只構建有勾選的應用
isRunInstall：應用是否需要執行 npm install，當前構建被選中的應用都會按照這個規則執行，為了減少構建過程所消耗的時間

2. 構建後

在左側的構建歷史可以檢視構建記錄的狀態，並且每個構建記錄還能通過構建編號左側的小球顏色判斷狀態，一般有三個狀態分別分為 SUCCESS（藍色）、UNSTABLE（黃色）、FAILURE（紅色），點選對應構建記錄可檢視詳細資訊

狀態描述：

SUCCESS：構建部署成功
UNSTABLE：構建成功，但是部署過程出錯
FAILURE：構建過程就已經出錯

構建記錄：

狀態集：執行構建使用者、當前構建記錄的 git 分支以及提交記錄
變更記錄：當前構建記錄 git 提交記錄詳細資訊
控制檯輸出：構建部署執行過程命令執行的記錄（可以在這裡檢視構建失敗原因以及除錯構建過程的問題）
編輯編譯資訊：設定當前構建記錄的名稱和備註
刪除構建
引數：顯示構建部署過程中自定義引數

四、 Jenkins部署微前端多個包完整配置

需要安裝的外掛

Extended Choice Parameter 外掛，該外掛可以使用多選框
Git plugin
- GIT 倉庫管理外掛，用於同步 git 庫，通過該外掛 jenkins 任務可以在構建過程中獲取配置好的 git 遠端倉庫程式碼，任務執行時程式碼會被拉取到/var/lib/jenkins/workspace/{任務名稱}目錄下
Send build artifacts over SSH，使用該外掛需要在系統管理->外掛管理中安裝，該外掛主要功能為將構建好的部署包按照一定規則傳送到部署伺服器，並且在這之後可在部署伺服器執行一定的 shell 操作。安裝外掛後還需要在系統管理->系統配置->Publish over SSH新增 SSH Services。

在系統管理->系統配置->Publish over SSH新增

### Jenkins完整配置搭建

效果演示

配置流程

構建的shell程式碼

#!/bin/bash -ilex

echo $PATH

packages="main,subs/system,subs/teaLifeManage,subs/wechatManage"
project_path=""

OLD_IFS="$IFS"
IFS=","
arr=($mutiParams)
IFS="$OLD_IFS"

rm -rf $WORKSPACE$project_path/publish

for i in ${arr[@]}
do
    echo '列印i：' + $i 
    cd $WORKSPACE$project_path/$i
    rm -rf dist
    if [[ $isRunInstall == "true" ]]
    then
       npm install
    fi
    
    if [[ $i == "main" ]]
    then
      if [[ $nodeDev == "development" ]]
      theninsta
          npm run test
      else
          npm run build $nodeDev
      fi
    else
      npm run build $nodeDev
    fi
    
    if [[ $i == "main" ]]
    then
        newsubdir=$i
    else
        subdir=${i%Manage*}
        newsubdir=${subdir##*/}
    fi
    
    
    mkdir -p $WORKSPACE$project_path/publish/${newsubdir,,}
    mv dist/* $WORKSPACE$project_path/publish/${newsubdir,,}
    
    echo '列印WORKSPACE：' + $WORKSPACE
    echo '列印newsubdir：' + $newsubdir
done

構建後操作shell程式碼

#!/bin/bash -ilex
packages="main,subs/system,subs/teaLifeManage,subs/wechatManage,publish"
PUBLISH_PATH=/home/docker/nginx/html/web-test

for package in `ls $PUBLISH_PATH/publish`
do
    if [[ $package == "main" ]]
    then
        for element in `ls $PUBLISH_PATH`
        do
            [[ ${packages,,} =~ $element ]] || rm -rf $PUBLISH_PATH/$element
        done
        mv $PUBLISH_PATH/publish/$package/* $PUBLISH_PATH
    else
        rm -rf $PUBLISH_PATH/$package
        mkdir -p $PUBLISH_PATH/$package
        mv $PUBLISH_PATH/publish/$package/* $PUBLISH_PATH/$package
    fi
done
rm -rf $PUBLISH_PATH/publish

最後配置一下Nginx指向/home/docker/nginx/html/web-test部署目錄即可訪問

五、使用阿里雲OSS部署微前端專案

介紹阿里雲物件儲存部署步驟。

一、建立 Bucket 儲存桶

進入物件儲存 OSS 服務

https://oss.console.aliyun.com/

建立 Bucket 儲存桶

Bucket 名稱：xxx
地域：華南 1（深圳）
版本控制：不開通
讀寫許可權：公共讀
其他保持預設

二、新增 CDN 域名

進入 CDN 服務

https://cdn.console.aliyun.com/

新增 CDN 域名

路徑：CDN > 域名管理 > 新增域名

加速域名：xxx.test.com
資源分組：會員商城
新增源站資訊
源站資訊：OSS 域名
域名：xxx.oss-cn-shenzhen.aliyuncs.com
其他保持預設
其他保持預設

HTTPS 配置

路徑：CDN > 域名管理 > 找到域名

路徑：CDN > 域名管理 > 域名名稱 > HTTPS 配置 > HTTPS 證照 > 修改配置

HTTPS 安全加速：開啟
證照來源：雲盾（SSL）證照中心
證照名稱：test.com
其他保持預設

得到 CNAME 域名

路徑：CDN > 域名管理 > 找到域名

CNAME：xxx.test.com.w.kunlunpi.com

三、新增 CNAME 記錄

進入雲解析 DNS 服務

https://dns.console.aliyun.com/

新增 CNAME 記錄

路徑：雲解析 DNS > 域名解析 > 找到域名

路徑：雲解析 DNS > 域名解析 > 解析設定 > 新增記錄

記錄型別：CNAME
主機記錄：xxx.test.com
記錄值：xxx.test.com.w.kunlunpi.com
其他保持預設

四、設定儲存桶

快取設定

路徑：物件儲存 > Bucket 列表 > 找到儲存桶

路徑：物件儲存 > 儲存桶名稱 > 檔案管理 > 找到 index.html 檔案 > 更多 > 設定 HTTP 頭

Cache-Control：no-cache（Object 允許被快取在客戶端或代理伺服器的瀏覽器中，但每次訪問時需要向 OSS 驗證快取是否可用。快取可用時直接訪問快取，快取不可用時重新向 OSS 請求。）
Cache-Control：no-store（不允許快取 Object）
Expires：-1
其他保持預設

設定靜態頁面
路徑：物件儲存 > 基礎設定 > 靜態頁面
- 預設首頁：index.html
- 子目錄首頁：未開通
- 預設 404 頁：index.html

域名管理

路徑：物件儲存 > 傳輸管理 > 域名管理 > 繫結域名

域名：xxx.test.com
其他保持預設

五、上傳程式碼至儲存桶

下載 oss browser 工具

https://help.aliyun.com/docum...

使用Jenkins部署微前端方案實踐總結