本文首發(fā)于公粽號「前端進階之旅」

持續(xù)集成

集成工具 jenkins 的基本介紹和自動化部署微前端項目的幾個簡單方案

一、Jenkins 基礎介紹

Jenkins 是國際上流行的免費開源軟件項目,是基于 Java 開發(fā)持續(xù)集成工具,用于監(jiān)控持續(xù)重復的工作,旨在提供一個開放的易用的軟件平臺,使軟件的持續(xù)集成自動化,大大節(jié)約人力和時效。

Jenkins 功能包括：

持續(xù)的軟件版本發(fā)布/測試項目。
監(jiān)控外部調(diào)用執(zhí)行的工作。

1. 系統(tǒng)管理

安裝好的 jenkins 可以在系統(tǒng)管理進行配置系統(tǒng)信息等

系統(tǒng)設置
- 執(zhí)行者數(shù)量：系統(tǒng)可同時并發(fā)執(zhí)行任務的數(shù)量，系統(tǒng)默認 2 個，原則上不超過服務器 CPU 核數(shù)，否則容易出現(xiàn) CPU 利用率過載導致服務掛掉。
- Jenkins URL：Jenkins 訪問地址，可以修改地址的端口號，和修改服務器配置文件的端口號效果一致
憑據(jù)配置
- 憑據(jù)可以用來存儲需要密文保護的數(shù)據(jù)庫密碼、Gitlab 密碼信息、Docker 私有倉庫密碼等，以便 Jenkins 可以和這些第三方的應用進行交互，需要安裝 Credentials Binding 插件，用戶才可管理憑據(jù)
憑據(jù)管理
- 憑據(jù)管理包含憑據(jù)的管理和憑據(jù)所在域的管理，系統(tǒng)默認會創(chuàng)建全局域，用戶可以在兩個管理表格的存儲下添加域，在用戶選擇的域下添加憑據(jù)或者進入域詳情添加憑據(jù)。為了最大程度地提高安全性，在 Jenkins 中配置的憑據(jù)以加密形式存儲在主 Jenkins 實例上（由 Jenkins 實例 ID 加密），用戶需要使用配置的唯一標識 ID 進行處理。
- 可以添加的憑證有 5 種：
  1. 用戶名和密碼
  2. SSH 密鑰（SSH 公私鑰對）
  3. 加密文件
  4. 令牌（例如 API 令牌、GitHub 個人訪問令牌）
  5. 證書
- 添加憑據(jù)：
  1. 種類
  2. 范圍（全局、系統(tǒng)）
  3. 憑據(jù)
  4. ID (此字段是可選的。如果未指定其值，Jenkins 將為憑證 ID 分配一個全局唯一 ID（GUID）值。請記住，一旦設置了憑證 ID，就無法再更改它)
  5. 憑證描述。
插件管理

Jenkins 提供了兩種不同的方法來在主服務器上安裝插件：
- 在管理平臺界面中使用插件管理器
  
  通過“系統(tǒng)管理” >“插件管理”視圖，Jenkins 環(huán)境的管理員可以使用該視圖。在“ 可選插件 ”選項卡下，可以搜索用戶需要的插件，搜索到需要的插件后勾選插件列表的選中框，之后點擊左下角的下載并且重啟后安裝，等待插件下載完成后服務自動重啟，重新進入系統(tǒng)即安裝成功。
- 使用 Jenkins CLI install-plugin 命令
  
  管理員還可以使用 Jenkins CLI，它提供了安裝插件的命令。用于管理 Jenkins 環(huán)境的腳本或配置管理代碼可能需要安裝插件，而無需在 Web UI 中直接進行用戶交互。Jenkins CLI 允許命令行用戶或自動化工具下載插件及其依賴項
管理用戶

Jenkins 默認使用自帶數(shù)據(jù)庫模式存儲用戶，jenkins 默認創(chuàng)建 admin 賬號，默認密碼位于 /var/lib/jenkins/secrets/initialAdminPassword，登錄之后可在管理用戶修改用戶默認密碼

2. 新建視圖

視圖功能主要用于管理不同項目之間的任務，每個項目創(chuàng)建一個視圖并在視圖下管理整個項目的模塊。

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

3. 任務

新建任務
- 任務名稱
- 任務模板：jenkins 提供的任務模板，一般新安裝的 jenkins 只會有一個“構建一個自由風格的軟件項目”模板，而如果需要其他的任務模板需要用戶下載對應的插件，不同的任務模板會有不同的構建流程
- 復制：可選項，用戶可以輸入已有的任務名稱選擇其中之一復制一個新的任務，選擇了復制的任務后就無法自定義任務模板，以復制的項目的任務模板為主
任務詳情
- 狀態(tài)
- 修改記錄：每次構建獲取的代碼變更記錄，即記錄每次構建的 git 倉庫提交記錄
- 工作空間：任務的工作空間的項目文件目錄
- 立即構建：執(zhí)行構建部署任務，使用不同的插件執(zhí)行構建過程會有差異
- 配置：配置整個任務構建和部署過程的需要干什么
- 刪除工程
- 重命名

二、任務配置

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

1. General

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

描述
丟棄舊的構建
- 策略：默認 Log Rotation
  - 保持構建的天數(shù)：將保存此天數(shù)的構建記錄，為空保存所有
  - 保持構建的最大個數(shù)：保存最近該個數(shù)的構建，為空保存所有
參數(shù)化構建過程

Extended Choice Parameter 插件，該插件可以使用多選框，利用該插件可以指定需要打包的應用，而不需要打包所有項目，減少打包時間
- Name：構建過程使用的參數(shù)名
- Description：參數(shù)描述
- Basic Parameter Types
  - Parameter Type：Check Boxes （值使用的類型）
  - Number of Visible Items：8 checkbox 參數(shù)值個數(shù)（項目子包和主包個數(shù)）
  - Delimiter：, 各個值的分割符號
  - Choose Source for Value：main,subs/appletuser,subs/college,subs/follow,subs/project,subs/questions,subs/statistics,subs/system 參數(shù)值（主包和子包相對項目路徑
  - Choose Source for Default Value：main,subs/appletuser,subs/college,subs/follow,subs/project,subs/questions,subs/statistics,subs/system 參數(shù)默認選中的值（主包和子包相對項目路徑
布爾值參數(shù)，true/false 值的參數(shù)，當前應用于構建過程中判斷是否需要構建 npm install
- 名稱：構建過程使用的參數(shù)名
- 默認值：默認是否勾選
- 描述：參數(shù)描述

2. 源碼管理

Git plugin

GIT 倉庫管理插件，用于同步 git 庫，通過該插件 jenkins 任務可以在構建過程中獲取配置好的 git 遠程倉庫代碼，任務執(zhí)行時代碼會被拉取到/var/lib/jenkins/workspace/{任務名稱}目錄下
- Repository URL 代碼倉庫地址
- Credentials 服務器連接代碼倉庫的憑據(jù)，可在系統(tǒng)管理添加后選擇，也可以在右邊的添加按鈕新增憑據(jù)，新增方式和系統(tǒng)管理的憑據(jù)新增一樣
- Branches to build 指定任務需要拉取的分支，允許配置多個分支
- 源碼庫瀏覽器指定 git 倉庫類型，默認自動

3. 構建

執(zhí)行 shell

開始執(zhí)行構建任務之前源碼管理插件已經(jīng)將代碼從遠程庫中獲取，執(zhí)行 shell 任務主要通過獲取參數(shù)化構建時設置的參數(shù)去對整個項目中的各個應用進行打包并將打包完成的部署文件統(tǒng)一放在根目錄的發(fā)布文件夾publish，執(zhí)行詳細代碼如下：

#!/bin/bash
# 項目根目錄地址（相對于工作空間）
project_path=""
# 將用戶選擇需要打包的應用拆分成數(shù)組
OLD_IFS="$IFS"
IFS=","
arr=($mutiParams)
IFS="$OLD_IFS"
# 清空上次打包的部署文件
rm -rf $WORKSPACE$project_path/publish


for i in ${arr[@]}
do
    # 進入對應的應用中執(zhí)行打包過程，$WORKSPACE為系統(tǒng)環(huán)境變量，值為工作空間地址
    cd $WORKSPACE$project_path/$i
    rm -rf dist
    # 判斷是否需要執(zhí)行環(huán)境安裝，當前設置為全局設置，所有需要打包的應用會執(zhí)行相同的判斷
    if [[ $isRunInstall == "true" ]]
    then
      npm install
    fi
    npm run build
    # 將子應用和主應用放在同一級，便于后續(xù)部署，因為很多微前端項目子應用都會放置在同一個文件夾下
    [[ $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，使用該插件需要在系統(tǒng)管理->插件管理中安裝，該插件主要功能為將構建好的部署包按照一定規(guī)則發(fā)送到部署服務器，并且在這之后可在部署服務器執(zhí)行一定的 shell 操作。安裝插件后還需要在系統(tǒng)管理->系統(tǒng)配置->Publish over SSH添加 SSH Services。

Name：選擇部署服務器，所選服務器就是系統(tǒng)配置中所添加，構建時就會連接該服務器

Transfers

Source files：構建服務器中部署文件的相對地址publish/**
Remove prefix：文件發(fā)送后在部署服務器的路徑和 Source files 一致，可以根據(jù)需求刪除該地址前面某一段，當前為空
Remote directory：部署服務器的部署目錄/home/jenkinsC
Exec command：文件發(fā)送完成之后在這里可以對部署服務器進行操作，這里的 shell 操作作用于部署服務器，由于微前端的部署特殊性，所以這里需要對發(fā)送過來的文件進行轉(zhuǎn)移操作，具體如下：

#!/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


# 依次循環(huán)部署構建好的應用
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

三、構建

按照上一步的配置規(guī)則執(zhí)行自動化構建和部署

1. 構建前

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

點擊開始構建前需要配置構建所需的參數(shù)，構建過程中在左下角的構建歷史可以查看構建進度條。

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

2. 構建后

在左側(cè)的構建歷史可以查看構建記錄的狀態(tài)，并且每個構建記錄還能通過構建編號左側(cè)的小球顏色判斷狀態(tài)，一般有三個狀態(tài)分別分為 SUCCESS（藍色）、UNSTABLE（黃色）、FAILURE（紅色），點擊對應構建記錄可查看詳細信息

狀態(tài)描述：

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

構建記錄：

狀態(tài)集：執(zhí)行構建用戶、當前構建記錄的 git 分支以及提交記錄
變更記錄：當前構建記錄 git 提交記錄詳細信息
控制臺輸出：構建部署執(zhí)行過程命令執(zhí)行的記錄（可以在這里查看構建失敗原因以及調(diào)試構建過程的問題）
編輯編譯信息：設置當前構建記錄的名稱和備注
刪除構建
參數(shù)：顯示構建部署過程中自定義參數(shù)

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

需要安裝的插件

Extended Choice Parameter 插件，該插件可以使用多選框
Git plugin
- GIT 倉庫管理插件，用于同步 git 庫，通過該插件 jenkins 任務可以在構建過程中獲取配置好的 git 遠程倉庫代碼，任務執(zhí)行時代碼會被拉取到/var/lib/jenkins/workspace/{任務名稱}目錄下
Send build artifacts over SSH，使用該插件需要在系統(tǒng)管理->插件管理中安裝，該插件主要功能為將構建好的部署包按照一定規(guī)則發(fā)送到部署服務器，并且在這之后可在部署服務器執(zhí)行一定的 shell 操作。安裝插件后還需要在系統(tǒng)管理->系統(tǒng)配置->Publish over SSH添加 SSH Services。

在系統(tǒng)管理->系統(tǒng)配置->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部署微前端項目

介紹阿里云對象存儲部署步驟。

一、創(chuàng)建 Bucket 存儲桶

1. 進入對象存儲 OSS 服務

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

2. 創(chuàng)建 Bucket 存儲桶

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

二、添加 CDN 域名

1. 進入 CDN 服務

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

2. 添加 CDN 域名

路徑：CDN > 域名管理 > 添加域名

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

3. HTTPS 配置

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

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

HTTPS 安全加速：開啟
證書來源：云盾（SSL）證書中心
證書名稱：test.com
其他保持默認

4. 得到 CNAME 域名

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

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

三、添加 CNAME 記錄

1. 進入云解析 DNS 服務

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

2. 添加 CNAME 記錄

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

路徑：云解析 DNS > 域名解析 > 解析設置 > 添加記錄

記錄類型：CNAME
主機記錄：xxx.test.com
記錄值：xxx.test.com.w.kunlunpi.com
其他保持默認

四、設置存儲桶

1. 緩存設置

路徑：對象存儲 > Bucket 列表 > 找到存儲桶

路徑：對象存儲 > 存儲桶名稱 > 文件管理 > 找到 index.html 文件 > 更多 > 設置 HTTP 頭

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

2. 設置靜態(tài)頁面

路徑：對象存儲 > 基礎設置 > 靜態(tài)頁面

默認首頁：index.html
子目錄首頁：未開通
默認 404 頁：index.html

1. 域名管理

路徑：對象存儲 > 傳輸管理 > 域名管理 > 綁定域名

域名：xxx.test.com
其他保持默認

五、上傳代碼至存儲桶

1. 下載 oss browser 工具

https://help.aliyun.com/document_detail/209974.html

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

使用jenkins自動化部署微前端項目的方案實踐

使用jenkins自動化部署微前端項目的方案實踐

持續(xù)集成

一、Jenkins 基礎介紹

1. 系統(tǒng)管理

2. 新建視圖

3. 任務

二、任務配置

1. General

2. 源碼管理

3. 構建

4. 構建后操作

三、構建

1. 構建前

2. 構建后

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

需要安裝的插件

Jenkins完整配置搭建

五、使用阿里云OSS部署微前端項目

一、創(chuàng)建 Bucket 存儲桶

1. 進入對象存儲 OSS 服務

2. 創(chuàng)建 Bucket 存儲桶

二、添加 CDN 域名

1. 進入 CDN 服務

2. 添加 CDN 域名

3. HTTPS 配置

4. 得到 CNAME 域名

三、添加 CNAME 記錄

1. 進入云解析 DNS 服務

2. 添加 CNAME 記錄

四、設置存儲桶

1. 緩存設置

2. 設置靜態(tài)頁面

1. 域名管理

五、上傳代碼至存儲桶

1. 下載 oss browser 工具

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

使用jenkins自動化部署微前端項目的方案實踐

持續(xù)集成

一、Jenkins 基礎介紹

1. 系統(tǒng)管理

2. 新建視圖

3. 任務

二、任務配置

1. General

2. 源碼管理

3. 構建

4. 構建后操作

三、構建

1. 構建前

2. 構建后

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

需要安裝的插件

Jenkins完整配置搭建

五、使用阿里云OSS部署微前端項目

一、創(chuàng)建 Bucket 存儲桶

1. 進入對象存儲 OSS 服務

2. 創(chuàng)建 Bucket 存儲桶

二、添加 CDN 域名

1. 進入 CDN 服務

2. 添加 CDN 域名

3. HTTPS 配置

4. 得到 CNAME 域名

三、添加 CNAME 記錄

1. 進入云解析 DNS 服務

2. 添加 CNAME 記錄

四、設置存儲桶

1. 緩存設置

2. 設置靜態(tài)頁面

1. 域名管理

五、上傳代碼至存儲桶

1. 下載 oss browser 工具

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、Jenkins 基礎介紹

二、任務配置

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

五、使用阿里云OSS部署微前端項目

一、創(chuàng)建 Bucket 存儲桶

三、添加 CNAME 記錄

四、設置存儲桶

五、上傳代碼至存儲桶