使用 Jenkins 部署微前端方案實踐總結(jié)
一、Jenkins 基礎(chǔ)介紹
Jenkins 是國際上流行的免費開源軟件項目,是基于 Java 開發(fā)持續(xù)集成工具,用于監(jiān)控持續(xù)重復(fù)的工作,旨在提供一個開放的易用的軟件平臺,使軟件的持續(xù)集成自動化,大大節(jié)約人力和時效。
Jenkins 功能包括：
- 持續(xù)的軟件版本發(fā)布/測試項目。
- 監(jiān)控外部調(diào)用執(zhí)行的工作。
1. 系統(tǒng)管理
安裝好的 jenkins 可以在系統(tǒng)管理進行配置系統(tǒng)信息等
系統(tǒng)設(shè)置
- 執(zhí)行者數(shù)量：系統(tǒng)可同時并發(fā)執(zhí)行任務(wù)的數(shù)量，系統(tǒng)默認 2 個，原則上不超過服務(wù)器 CPU 核數(shù)，否則容易出現(xiàn) CPU 利用率過載導(dǎo)致服務(wù)掛掉。
- Jenkins URL：Jenkins 訪問地址，可以修改地址的端口號，和修改服務(wù)器配置文件的端口號效果一致
憑據(jù)配置
- 憑據(jù)可以用來存儲需要密文保護的數(shù)據(jù)庫密碼、Gitlab 密碼信息、Docker 私有倉庫密碼等，以便 Jenkins 可以和這些第三方的應(yīng)用進行交互，需要安裝 Credentials Binding 插件，用戶才可管理憑據(jù)
憑據(jù)管理
- 憑據(jù)管理包含憑據(jù)的管理和憑據(jù)所在域的管理，系統(tǒng)默認會創(chuàng)建全局域，用戶可以在兩個管理表格的存儲下添加域，在用戶選擇的域下添加憑據(jù)或者進入域詳情添加憑據(jù)。為了最大程度地提高安全性，在 Jenkins 中配置的憑據(jù)以加密形式存儲在主 Jenkins 實例上（由 Jenkins 實例 ID 加密），用戶需要使用配置的唯一標識 ID 進行處理。
- 可以添加的憑證有 5 種：
- 添加憑據(jù)：
- 種類
- 范圍 （全局、系統(tǒng)）
- 憑據(jù)
- ID (此字段是可選的。如果未指定其值，Jenkins 將為憑證 ID 分配一個全局唯一 ID（GUID）值。請記住，一旦設(shè)置了憑證 ID，就無法再更改它)
- 憑證描述。
- 用戶名和密碼
- SSH 密鑰（SSH 公私鑰對）
- 加密文件
- 令牌（例如 API 令牌、GitHub 個人訪問令牌）
- 證書
插件管理
Jenkins 提供了兩種不同的方法來在主服務(wù)器上安裝插件：
在管理平臺界面中使用插件管理器
通過“系統(tǒng)管理” >“插件管理”視圖，Jenkins 環(huán)境的管理員可以使用該視圖。在“ 可選插件 ”選項卡下，可以搜索用戶需要的插件，搜索到需要的插件后勾選插件列表的選中框，之后點擊左下角的下載并且重啟后安裝，等待插件下載完成后服務(wù)自動重啟，重新進入系統(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. 新建視圖
視圖功能主要用于管理不同項目之間的任務(wù)，每個項目創(chuàng)建一個視圖并在視圖下管理整個項目的模塊。
- 列表視圖（顯示簡單列表。新建或編輯視圖的時候可以選擇將當前已有的任務(wù)添加到該視圖，也可以在該視圖下新建任務(wù)）
- 我的視圖（該視圖自動顯示當前用戶有權(quán)限訪問的任務(wù)）
3. 任務(wù)
- 新建任務(wù)
- 任務(wù)名稱
- 任務(wù)模板：jenkins 提供的任務(wù)模板，一般新安裝的 jenkins 只會有一個“構(gòu)建一個自由風格的軟件項目”模板，而如果需要其他的任務(wù)模板需要用戶下載對應(yīng)的插件，不同的任務(wù)模板會有不同的構(gòu)建流程
- 復(fù)制：可選項，用戶可以輸入已有的任務(wù)名稱選擇其中之一復(fù)制一個新的任務(wù)，選擇了復(fù)制的任務(wù)后就無法自定義任務(wù)模板，以復(fù)制的項目的任務(wù)模板為主
- 任務(wù)詳情
- 狀態(tài)
- 修改記錄：每次構(gòu)建獲取的代碼變更記錄，即記錄每次構(gòu)建的 git 倉庫提交記錄
- 工作空間：任務(wù)的工作空間的項目文件目錄
- 立即構(gòu)建：執(zhí)行構(gòu)建部署任務(wù)，使用不同的插件執(zhí)行構(gòu)建過程會有差異
- 配置：配置整個任務(wù)構(gòu)建和部署過程的需要干什么
- 刪除工程
- 重命名
二、任務(wù)配置
任務(wù)配置主要將自動化構(gòu)建部署從項目的獲取到部署成功的一個過程需要做的工作做分解配置。
1. General
這一步主要是在執(zhí)行構(gòu)建前對 jenkins 配置進行了簡單的設(shè)置
描述
丟棄舊的構(gòu)建
- 保持構(gòu)建的天數(shù)：將保存此天數(shù)的構(gòu)建記錄，為空保存所有
- 保持構(gòu)建的最大個數(shù)：保存最近該個數(shù)的構(gòu)建，為空保存所有
- 策略：默認 Log Rotation
參數(shù)化構(gòu)建過程
Extended Choice Parameter 插件，該插件可以使用多選框，利用該插件可以指定需要打包的應(yīng)用，而不需要打包所有項目，減少打包時間
布爾值參數(shù)，true/false 值的參數(shù)，當前應(yīng)用于構(gòu)建過程中判斷是否需要構(gòu)建 npm install
- 名稱：構(gòu)建過程使用的參數(shù)名
- 默認值：默認是否勾選
- 描述：參數(shù)描述
- 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ù)默認選中的值（主包和子包相對項目路徑 - Name：構(gòu)建過程使用的參數(shù)名
- Description：參數(shù)描述
- Basic Parameter Types
2. 源碼管理
Git plugin
GIT 倉庫管理插件，用于同步 git 庫，通過該插件 jenkins 任務(wù)可以在構(gòu)建過程中獲取配置好的 git 遠程倉庫代碼，任務(wù)執(zhí)行時代碼會被拉取到
/var/lib/jenkins/workspace/{任務(wù)名稱}目錄下- Repository URL 代碼倉庫地址
- Credentials 服務(wù)器連接代碼倉庫的憑據(jù)，可在系統(tǒng)管理添加后選擇，也可以在右邊的添加按鈕新增憑據(jù)，新增方式和系統(tǒng)管理的憑據(jù)新增一樣
- Branches to build 指定任務(wù)需要拉取的分支，允許配置多個分支
- 源碼庫瀏覽器 指定 git 倉庫類型，默認自動
3. 構(gòu)建
執(zhí)行 shell
開始執(zhí)行構(gòu)建任務(wù)之前源碼管理插件已經(jīng)將代碼從遠程庫中獲取，執(zhí)行 shell 任務(wù)主要通過獲取參數(shù)化構(gòu)建時設(shè)置的參數(shù)去對整個項目中的各個應(yīng)用進行打包并將打包完成的部署文件統(tǒng)一放在根目錄的發(fā)布文件夾
publish，執(zhí)行詳細代碼如下：#!/bin/bash
#?項目根目錄地址（相對于工作空間）
project_path=""
#?將用戶選擇需要打包的應(yīng)用拆分成數(shù)組
OLD_IFS="$IFS"
IFS=","
arr=($mutiParams)
IFS="$OLD_IFS"
#?清空上次打包的部署文件
rm?-rf?$WORKSPACE$project_path/publish
for?i?in?${arr[@]}
do
????#?進入對應(yīng)的應(yīng)用中執(zhí)行打包過程，$WORKSPACE為系統(tǒng)環(huán)境變量，值為工作空間地址
????cd?$WORKSPACE$project_path/$i
????rm?-rf?dist
????#?判斷是否需要執(zhí)行環(huán)境安裝，當前設(shè)置為全局設(shè)置，所有需要打包的應(yīng)用會執(zhí)行相同的判斷
????if?[[?$isRunInstall?==?"true"?]]
????then
??????npm?install
????fi
????npm?run?build
????#?將子應(yīng)用和主應(yīng)用放在同一級，便于后續(xù)部署，因為很多微前端項目子應(yīng)用都會放置在同一個文件夾下
????[[?$i?==?"main"?]]?&&?subdir=$i?||?subdir=${i##*/}
????mkdir?-p?$WORKSPACE$project_path/publish/$subdir
????mv?dist/*?$WORKSPACE$project_path/publish/$subdir
done
4. 構(gòu)建后操作
Send build artifacts over SSH，使用該插件需要在
系統(tǒng)管理->插件管理中安裝，該插件主要功能為將構(gòu)建好的部署包按照一定規(guī)則發(fā)送到部署服務(wù)器，并且在這之后可在部署服務(wù)器執(zhí)行一定的 shell 操作。安裝插件后還需要在系統(tǒng)管理->系統(tǒng)配置->Publish over SSH添加 SSH Services。- Source files：構(gòu)建服務(wù)器中部署文件的相對地址
publish/** - Remove prefix：文件發(fā)送后在部署服務(wù)器的路徑和 Source files 一致，可以根據(jù)需求刪除該地址前面某一段，當前為空
- Remote directory：部署服務(wù)器的部署目錄
/home/jenkinsC - Exec command：文件發(fā)送完成之后在這里可以對部署服務(wù)器進行操作，這里的 shell 操作作用于部署服務(wù)器，由于微前端的部署特殊性，所以這里需要對發(fā)送過來的文件進行轉(zhuǎn)移操作，具體如下：
Name：選擇部署服務(wù)器，所選服務(wù)器就是系統(tǒng)配置中所添加，構(gòu)建時就會連接該服務(wù)器
Transfers
#!/bin/bash
#?此處的packages后面多了個publish是打包之后的部署文件名，為了防止在部署主應(yīng)用的時候被刪掉
packages="main,subs/appletuser,subs/college,subs/follow,subs/project,subs/questions,subs/statistics,subs/system,publish"
#?部署目錄
PUBLISH_PATH=/home/jenkinsC
#?依次循環(huán)部署構(gòu)建好的應(yīng)用
for?package?in?`ls?$PUBLISH_PATH/publish`
do
????#?判斷當前是否為主應(yīng)用，因為主包需要把主應(yīng)用的所有文件直接部署在部署目錄下，所以需要在過濾掉子應(yīng)用和publish文件夾的情況下刪除所有舊的主應(yīng)用文件再進行部署
????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
????????#?子應(yīng)用部署方式直接先刪除原有文件后部署
????????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
- Source files：構(gòu)建服務(wù)器中部署文件的相對地址
三、構(gòu)建
按照上一步的配置規(guī)則執(zhí)行自動化構(gòu)建和部署
1. 構(gòu)建前
路徑：工程->Build With Parameters->開始構(gòu)建
點擊開始構(gòu)建前需要配置構(gòu)建所需的參數(shù)，構(gòu)建過程中在左下角的構(gòu)建歷史可以查看構(gòu)建進度條。
- mutiParams：選中對應(yīng)的應(yīng)用，構(gòu)建過程中就會只構(gòu)建有勾選的應(yīng)用
- isRunInstall：應(yīng)用是否需要執(zhí)行 npm install，當前構(gòu)建被選中的應(yīng)用都會按照這個規(guī)則執(zhí)行，為了減少構(gòu)建過程所消耗的時間
2. 構(gòu)建后
在左側(cè)的構(gòu)建歷史可以查看構(gòu)建記錄的狀態(tài)，并且每個構(gòu)建記錄還能通過構(gòu)建編號左側(cè)的小球顏色判斷狀態(tài)，一般有三個狀態(tài)分別分為 SUCCESS（藍色）、UNSTABLE（黃色）、FAILURE（紅色），點擊對應(yīng)構(gòu)建記錄可查看詳細信息
狀態(tài)描述：
- SUCCESS：構(gòu)建部署成功
- UNSTABLE：構(gòu)建成功，但是部署過程出錯
- FAILURE：構(gòu)建過程就已經(jīng)出錯
構(gòu)建記錄：
- 狀態(tài)集：執(zhí)行構(gòu)建用戶、當前構(gòu)建記錄的 git 分支以及提交記錄
- 變更記錄：當前構(gòu)建記錄 git 提交記錄詳細信息
- 控制臺輸出：構(gòu)建部署執(zhí)行過程命令執(zhí)行的記錄（可以在這里查看構(gòu)建失敗原因以及調(diào)試構(gòu)建過程的問題）
- 編輯編譯信息：設(shè)置當前構(gòu)建記錄的名稱和備注
- 刪除構(gòu)建
- 參數(shù)：顯示構(gòu)建部署過程中自定義參數(shù)
四、 Jenkins部署微前端多個包完整配置
需要安裝的插件
Extended Choice Parameter?插件，該插件可以使用多選框
Git plugin
- GIT 倉庫管理插件，用于同步 git 庫，通過該插件 jenkins 任務(wù)可以在構(gòu)建過程中獲取配置好的 git 遠程倉庫代碼，任務(wù)執(zhí)行時代碼會被拉取到
/var/lib/jenkins/workspace/{任務(wù)名稱}目錄下
- GIT 倉庫管理插件，用于同步 git 庫，通過該插件 jenkins 任務(wù)可以在構(gòu)建過程中獲取配置好的 git 遠程倉庫代碼，任務(wù)執(zhí)行時代碼會被拉取到
Send build artifacts over SSH，使用該插件需要在
系統(tǒng)管理->插件管理中安裝，該插件主要功能為將構(gòu)建好的部署包按照一定規(guī)則發(fā)送到部署服務(wù)器，并且在這之后可在部署服務(wù)器執(zhí)行一定的 shell 操作。安裝插件后還需要在系統(tǒng)管理->系統(tǒng)配置->Publish over SSH添加 SSH Services。
在
系統(tǒng)管理->系統(tǒng)配置->Publish over SSH添加
Jenkins完整配置搭建
效果演示
配置流程
構(gòu)建的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
構(gòu)建后操作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 服務(wù)
https://oss.console.aliyun.com/
2. 創(chuàng)建 Bucket 存儲桶
- Bucket 名稱：xxx
- 地域：華南 1（深圳）
- 版本控制：不開通
- 讀寫權(quán)限：公共讀
- 其他保持默認
二、添加 CDN 域名
1. 進入 CDN 服務(wù)
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 服務(wù)
https://dns.console.aliyun.com/
2. 添加 CNAME 記錄
路徑：云解析 DNS > 域名解析 > 找到域名
路徑：云解析 DNS > 域名解析 > 解析設(shè)置 > 添加記錄
- 記錄類型：CNAME
- 主機記錄：xxx.test.com
- 記錄值：xxx.test.com.w.kunlunpi.com
- 其他保持默認
四、設(shè)置存儲桶
1. 緩存設(shè)置
路徑：對象存儲 > Bucket 列表 > 找到存儲桶
路徑：對象存儲 > 存儲桶名稱 > 文件管理 > 找到 index.html 文件 > 更多 > 設(shè)置 HTTP 頭
- Cache-Control：no-cache（Object 允許被緩存在客戶端或代理服務(wù)器的瀏覽器中，但每次訪問時需要向 OSS 驗證緩存是否可用。緩存可用時直接訪問緩存，緩存不可用時重新向 OSS 請求。）
- Cache-Control：no-store（不允許緩存 Object）
- Expires：-1
- 其他保持默認
2. 設(shè)置靜態(tài)頁面
路徑：對象存儲 > 基礎(chǔ)設(shè)置 > 靜態(tài)頁面
- 默認首頁：index.html
- 子目錄首頁：未開通
- 默認 404 頁：index.html
3. 域名管理
路徑：對象存儲 > 傳輸管理 > 域名管理 > 綁定域名
- 域名：xxx.test.com
- 其他保持默認
五、上傳代碼至存儲桶
1. 下載 oss browser 工具
https://help.aliyun.com/document_detail/209974.html
配置完后上傳到oss即可訪問
- EOF -
推薦閱讀??點擊標題可跳轉(zhuǎn)3、學(xué)會使用 Jenkins 自動部署你的項目(實戰(zhàn))
覺得本文對你有幫助？請分享給更多人
推薦關(guān)注「前端大全」，提升前端技能
點贊和在看就是最大的支持??