DevOps
提到Jenkins，想到的第一個(gè)概念就是 CI/CD 在這之前應(yīng)該再了解一個(gè)概念。
DevOps Development 和 Operations 的組合，是一種方法論，并不特指某種技術(shù)或者工具。DevOps 是一種重視 Dev 開發(fā)人員和 Ops 運(yùn)維人員之間溝通、協(xié)作的流程。通過自動(dòng)化的軟件交付，使軟件的構(gòu)建，測(cè)試，發(fā)布更加的快捷、穩(wěn)定、可靠。
CI
CI 的英文名稱是Continuous Integration，中文翻譯為：持續(xù)集成。
試想軟件在開發(fā)過程中，需要不斷的提交，合并進(jìn)行單元測(cè)試和發(fā)布測(cè)試版本等等，這一過程是痛苦的。持續(xù)集成CI是在源代碼變更后自動(dòng)檢測(cè)、拉取、構(gòu)建的過程。
CD
CD 對(duì)應(yīng)兩個(gè)概念 持續(xù)交付Continuous Delivery 持續(xù)部署Continuous Deployment
持續(xù)交付
提交交付顧名思義是要拿出點(diǎn)東西的。在 CI 的自動(dòng)化流程階段后，運(yùn)維團(tuán)隊(duì)可以快速、輕松地將應(yīng)用部署到生產(chǎn)環(huán)境中或發(fā)布給最終使用的用戶。
可以理解為是將代碼集成到共有倉(cāng)庫(kù)（如Git）中，并自動(dòng)進(jìn)行構(gòu)建、測(cè)試和驗(yàn)證，以確保團(tuán)隊(duì)成員的代碼都能夠統(tǒng)一的集成在一起，同時(shí)減少?zèng)_突和問題。
從前端的角度考慮，在某些情況下肯定是不能直接通過自動(dòng)化的方式將最終的 build 結(jié)果直接扔到生產(chǎn)機(jī)的。持續(xù)交互就是可持續(xù)性交付供生產(chǎn)使用的的最終 build。最后通過運(yùn)維或者后端小伙伴進(jìn)行部署。
持續(xù)部署
作為持續(xù)交付的延伸，持續(xù)部署可以自動(dòng)將應(yīng)用發(fā)布到生產(chǎn)環(huán)境。
是在持續(xù)集成的基礎(chǔ)上，對(duì)代碼進(jìn)行自動(dòng)化構(gòu)建、測(cè)試和發(fā)布，并可以進(jìn)行快速、可靠地部署。持續(xù)部署是進(jìn)一步自動(dòng)化持續(xù)交付的過程，通過自動(dòng)化流水線將程序代碼的更改自動(dòng)部署到生產(chǎn)環(huán)境中。
CI/CD 工具選擇
- Jenkins：一個(gè)開源的、可擴(kuò)展的CI/CD工具，支持多種編程語(yǔ)言和版本控制系統(tǒng),具有豐富的插件生態(tài)系統(tǒng)和廣泛的應(yīng)用支持。
- GitHub Actions：GitHub 是一個(gè)基于 Git 的代碼托管平臺(tái)，也提供了 CI/CD 的功能，可以通過 GitHub Actions 實(shí)現(xiàn)自動(dòng)化構(gòu)建、測(cè)試和部署。
- GitLab CI/CD： GitLab是基于Git的代碼托管平臺(tái)，版本控制平臺(tái)內(nèi)置的CI/CD工具，與GitLab緊密集成，提供一體化的代碼管理和持續(xù)交付功能。
- CircleCI：CircleCI 是一個(gè)云端的 CI/CD 工具，支持多種編程語(yǔ)言和版本控制系統(tǒng)，使用簡(jiǎn)單，適合小型團(tuán)隊(duì)。
- Travis CI：Travis CI 是一個(gè)云端的 CI/CD 工具，支持多種編程語(yǔ)言和版本控制系統(tǒng)，使用簡(jiǎn)單，適合小型團(tuán)隊(duì)。
Jenkins 安裝
示例服務(wù)器為 阿里云 CentOS 服務(wù)器。安全組中增加 8080 端口 Jenkins 默認(rèn)占用
Jenkins 安裝大體分兩種方式，一種使用 Docker 另一種則是直接安裝，示例選擇后者。不管使用哪種方式安裝，最終使用層面都是一樣的。
# 下載 Jenkins 資源
sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.repo
# 獲取并導(dǎo)入信任 的包制作者的秘鑰
sudo rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key
# 升級(jí) yum 源中的所有包
sudo yum upgrade
# Jenkins 依賴于 java 所以需要安裝 JDK
sudo yum install java-11-openjdk
# 安裝 Jenkins
sudo yum install jenkins
如果最終 Jenkins 沒有找到包而導(dǎo)致沒有安裝成功，檢查第一步和第二部執(zhí)行結(jié)果并重新執(zhí)行。
可以使用systemctl命令管理 Jenkins 服務(wù) systemctl
# 啟動(dòng) Jenkins 服務(wù)
systemctl start jenkins
# 重啟 Jenkins 服務(wù)
systemctl restart jenkins
# 停止 Jenkins 服務(wù)
systemctl stop jenkins
# 查看 Jenkins 服務(wù)狀態(tài)
systemctl status jenkins
啟動(dòng)服務(wù)后訪問服務(wù)器地址 + 8080 端口，Jenkins 默認(rèn)為 8080 端口。
Jenkins 使用及 Freestyle 任務(wù)構(gòu)建
首次進(jìn)入使用 cat /var/lib/jenkins/secrets/initialAdminPassword 查看密碼。
隨后進(jìn)入插件安裝頁(yè)面，暫時(shí)安裝系統(tǒng)推薦插件即可。
然后創(chuàng)建用戶
構(gòu)建目標(biāo)：拉取 github 代碼
點(diǎn)擊 新建 Item 創(chuàng)建一個(gè) Freestyle Project
在 源碼管理 處選擇 git ，輸入倉(cāng)庫(kù)地址，點(diǎn)擊添加。
輸入 github 賬號(hào)和密碼，這里的密碼有時(shí)候可能會(huì)出現(xiàn)問題，可以使用 token github 如何生成 token ？
配置只是一方面，同時(shí)服務(wù)器也要具備 git 環(huán)境。 yum install git
構(gòu)建目標(biāo)：部署到本機(jī)
部署前端項(xiàng)目肯定是離不開 nginx 的。 yum install nginx。
安裝完成后同樣可以使用 systemctl 命令管理 nginx 服務(wù)。
nginx 具體配置這里就不說(shuō)了。本示例項(xiàng)目中，靜態(tài)文件托管目錄為 /usr/share/nginx/html/dist。
接著來(lái)到 Jenkins 這里。想要部署前端項(xiàng)目還需要依賴一個(gè) Node 環(huán)境，需要在 Manage Jenkins -> Manage Plugins 在可選插件中搜索 nodejs 選擇對(duì)應(yīng)插件進(jìn)行安裝，安裝完成后需要重啟才會(huì)生效。
然后到 系統(tǒng)管理 -> 全局工具配置 中配置 Node (吐槽：沒有安裝任何插件時(shí)系統(tǒng)管理以及其子頁(yè)面全是英文，安裝完插件后又變成了中文。這國(guó)際化不知道是系統(tǒng)原因還是它的原因)
隨后去修改剛才創(chuàng)建的任務(wù)。在 構(gòu)建環(huán)境 中會(huì)多出一個(gè)選項(xiàng) Provide Node & npm bin/ folder to PATH 勾選即可。然后在 構(gòu)建 中選擇 增加構(gòu)建步驟 -> 執(zhí)行 shell 輸入打包發(fā)布相關(guān)的命令。Jenkins 會(huì)逐行執(zhí)行。
npm install yarn -gyarn installyarn build
# 打包 build 后的文件
tar -zcvf dist.tar.gz dist/
# 刪除 build 后的文件
rm -rf dist/
# 移動(dòng) build 后的壓縮包到 nginx 托管目錄下
sudo mv dist.tar.gz /usr/share/nginx/html
# 進(jìn)入托管目錄下
cd /usr/share/nginx/html
# 解壓
sudo tar -zxcf dist.tar.gz
# 刪除壓縮包
sudo rm -rf dist.tar.gz
由于項(xiàng)目構(gòu)建時(shí)是在 Jenkins 的工作目錄下執(zhí)行腳本，會(huì)出現(xiàn)權(quán)限問題。導(dǎo)致即使使用了 sudo 還會(huì)出現(xiàn)類似以下錯(cuò)誤。
We trust you have received the usual lecture from the local SystemAdministrator. It usually boils down to these three things: #1) Respect the privacy of others. #2) Think before you type. #3) With great power comes great responsibility
解決方案：在 /etc/sudoers 文件中增加 jenkins ALL=(ALL) NOPASSWD:ALL 表示在執(zhí)行 sudo 時(shí)不需要輸入密碼。
如果不使用 sudo 則會(huì)出現(xiàn)以下錯(cuò)誤。
xxxxxxx: Permission denied
解決方案：修改 /lib/systemed/system/jenkins.service 文件。將 User=jenkins 修改為 User=root，表示給 Jenkins 賦權(quán)限。修改配置文件后記得重啟服務(wù)。
構(gòu)建的過程中還可能出現(xiàn)以下錯(cuò)誤
ERROR: Error fetching remote repo 'origin'
解決方案：由于需要構(gòu)建的代碼在 github 上面，這種錯(cuò)誤表示拉取代碼失敗了，重試幾次就可以了。
工作目錄
上面提到一個(gè)很重要的概念就是 工作目錄 在上面的 shell 默認(rèn)就是在這里執(zhí)行的。工作目錄是由兩部分組成。
-
/var/lib/jenkins/workspace/類似于前綴吧。 -
web-deploy這個(gè)其實(shí)是上面構(gòu)建任務(wù)的名字。
總結(jié)：Jenkins 的執(zhí)行目錄是 /var/lib/jenkins/workspace/web-deploy。也就是說(shuō)輸入的每一條命令都是在這里面執(zhí)行的。（搞清楚定位能避免好多問題，特別是前端的部署，就是打包，移動(dòng)，解壓很容易搞錯(cuò)路徑。）
構(gòu)建目標(biāo)：偵聽 git 提交到指定分支進(jìn)行構(gòu)建
-
來(lái)到 Jenkins 中選擇 系統(tǒng)管理 -> 系統(tǒng)配置 找到 Jenkins URL 將其復(fù)制。
-
隨后在尾部添加
github-webhook/尾部斜杠一定不要丟。整體結(jié)構(gòu)大致為http://192.168.0.1:8080/github-webhook/ -
登錄 github 需要集成的項(xiàng)目中添加 webhook。在 Payload URL 中將上述內(nèi)容填入。
- 然后修改 Jenkins 任務(wù)配置 構(gòu)建觸發(fā)器中選擇
GitHub hook trigger for GITScm polling
由于在上面的源碼管理中已經(jīng)指定了main分支，此時(shí)如果這個(gè)分支的代碼有改動(dòng)就會(huì)觸發(fā)自動(dòng)構(gòu)建。
構(gòu)建目標(biāo)：部署到目標(biāo)主機(jī)
在真實(shí)的開發(fā)場(chǎng)景中，Jenkins 幾乎不會(huì)和前端資源放到一個(gè)服務(wù)器。大多數(shù)情況下 Jenkins 所處的服務(wù)器環(huán)境就是一個(gè)工具用的服務(wù)器，放置了一些公司中常用的工具。因此構(gòu)建到指定的服務(wù)器也至關(guān)重要。
-
系統(tǒng)管理 -> 插件管理 搜索 Publish Over SSH 進(jìn)行安裝。
-
然后在系統(tǒng)管理 -> 系統(tǒng)配置中找到
Publish over SSH點(diǎn)擊新增，再點(diǎn)擊高級(jí)，然后選中Use password authentication, or use a different key
完成后可點(diǎn)擊右下角Test Confirguration進(jìn)行測(cè)試。 -
繼續(xù)修改構(gòu)建任務(wù)。先修改原有的構(gòu)建腳本。因?yàn)橐l(fā)布到遠(yuǎn)程，所以原有的發(fā)布命令要進(jìn)行去除。
npm install yarn -gyarn installyarn build
# 只打包，然后刪除文件夾
tar -zcvf dist.tar.gz dist/rm -rf dist/
- 選擇構(gòu)建后操作 -> Send build artifacts over SSH
-
Rransfer Set Source files：要上傳到目標(biāo)服務(wù)器的文件。它是一個(gè)相對(duì)路徑，相對(duì)于 Jenkins 的工作目錄 由于上面的 shell 執(zhí)行之后在工作目錄中只有一個(gè)壓縮包，so 直接寫一個(gè)文件名即可。 -
Remove prefix：去前綴。假設(shè)此時(shí)打包文件在/var/lib/jenkins/workspace/web-deploy/assets/dist.tar.gz，那么Rransfer Set Source files則應(yīng)該為assets/dist.tar.gz，此時(shí)Remove prefix配置為assets/則可以去除這個(gè)前綴，否則會(huì)在目標(biāo)服務(wù)中創(chuàng)建 assets 。 -
Remote directory：遠(yuǎn)程的靜態(tài)資源托管目錄。由于配置服務(wù)器默認(rèn)為 /，所以usr/share/nginx/html/不用以 / 開頭。 -
Exec command：遠(yuǎn)程機(jī)執(zhí)行 shell，由于配置服務(wù)器默認(rèn)為 /， 所以 工作目錄也是以 / 開始。
執(zhí)行成功后查看執(zhí)行日志會(huì)有類似以下結(jié)果：
SSH: Connecting from host [iZuf6dwyzch3wm3imzxgqfZ]SSH: Connecting with configuration [aliyun-dev] ...SSH: EXEC: completed after 202 msSSH: Disconnecting configuration [aliyun-dev] ...
# 如果 Transferred 0 file 則需要查看配置的路徑是否正確。表示文件并沒有被移動(dòng)到遠(yuǎn)程主機(jī)中。
SSH: Transferred 1 file(s)Finished: SUCCESS
構(gòu)建目標(biāo)：釘釘機(jī)器人通知
-
系統(tǒng)管理 -> 插件管理 搜索 DingTalk 進(jìn)行安裝。文檔
-
釘釘群創(chuàng)建機(jī)器人。釘釘群 -> 只能群助手 -> 添加機(jī)器人 -> 自定義
- 定義機(jī)器人名字和關(guān)鍵字，創(chuàng)建完成后先將 webhook 中的內(nèi)容復(fù)制。
- Jenkins 中 系統(tǒng)管理 -> 系統(tǒng)配置 -> 釘釘 -> 新增 配置完成后可點(diǎn)擊右下角進(jìn)行測(cè)試。
- 修改構(gòu)建任務(wù)配置。
- 通知人：
atAll勾選后 @ 不到準(zhǔn)確的人。??。輸入框內(nèi)可填寫需要被 @ 人的手機(jī)號(hào)，多個(gè)換行。 - 自定義內(nèi)容：支持 markdown 寫法，可以使用一些環(huán)境變量。
192.168.0.1:8080/env-vars.html/ - 實(shí)現(xiàn)默認(rèn)
@執(zhí)行人
- 構(gòu)建成功
Pipline 構(gòu)建
上一章節(jié)中著重介紹了如何構(gòu)建 freestyle 的任務(wù)，但是 Jenkins 遠(yuǎn)不止于此。在本章開始之前強(qiáng)烈建議閱讀文檔[7]，重點(diǎn)關(guān)注流水線相關(guān)內(nèi)容。
新建任務(wù) -> 選擇流水線 其他內(nèi)容可以都不用管，只關(guān)注流水線 有兩種選擇，演示就選擇第一種。
直接在 Jenkins 中書寫配置。
在項(xiàng)目的 Jenkinsfile 配置文件中寫配置。
在正式開始之前應(yīng)該了解 Jenkins Pipline 的基礎(chǔ)概念。
pipeline {
agent any // 在任何可用的代理上，執(zhí)行流水線或它的任何階段。
stages {
stage('Build') {
// 定義 "Build" 階段。
steps {
// 執(zhí)行與 "Build" 階段相關(guān)的步驟。
}
}
stage('Deploy') {
// 定義 "Deploy" 階段。
steps {
// 執(zhí)行與 "Deploy" 階段相關(guān)的步驟。
}
}
}
}
- pipline：定義流水線整個(gè)結(jié)構(gòu)，可以看做是根節(jié)點(diǎn)
- agent：指示 Jenkins 為整個(gè)流水線分配一個(gè)執(zhí)行器，比如可以配置 Docker
- stages：對(duì)整個(gè) CI 流的包裹，個(gè)人認(rèn)為沒多大用，還必須得有。
- stage：可以理解為是對(duì)某一個(gè)環(huán)節(jié)的描述。注意：參數(shù)就是描述內(nèi)容，可以是任何內(nèi)容。不要想歪了只能傳遞 Build Deploy 這些。
- steps：描述了 stage 中的步驟，可以存在多個(gè)。
了解到這里還是不夠的。流水線入門[8] 流水線語(yǔ)法參考[9]
Pipline 復(fù)刻 Freestyle
這里先直接把配置貼出來(lái)。后續(xù)結(jié)合內(nèi)容在進(jìn)行分析。
// 自定義 釘釘插件 的 錯(cuò)誤信息和成功信息
def successText = [
""
" ### 新的構(gòu)建信息，請(qǐng)注意查收"
"",
""
" ${env.JOB_BASE_NAME}任務(wù)構(gòu)建<font color=green>成功</font> ，點(diǎn)擊查看[構(gòu)建任務(wù) #${env.BUILD_NUMBER}](http://106.14.185.47:8080/job/${env.JOB_BASE_NAME}/${env.BUILD_NUMBER}/)
""
"
]
def failureText = [
""
" ### 新的構(gòu)建信息，請(qǐng)注意查收"
"",
""
" ${env.JOB_BASE_NAME}任務(wù)構(gòu)建<font color=red>失敗</font> ，點(diǎn)擊查看[構(gòu)建任務(wù) #${env.BUILD_NUMBER}](http://106.14.185.47:8080/job/${env.JOB_BASE_NAME}/${env.BUILD_NUMBER}/)"
""
]
// 1，偵聽 github push 事件
properties([pipelineTriggers([githubPush()])])
pipeline
{
agent any // 環(huán)境變量定義。
environment
{
GIT_REPO = 'http://github.com/vue-ts-vite-temp.git'
}
stages
{
// 2，拉取 github 代碼，通過 GitSCM 偵聽 push 事件。
stage('Pull code')
{
steps
{
checkout(
[
$class: 'GitSCM',
branches: [
[name: '*/main']
],
extensions: [],
userRemoteConfigs: [
[
credentialsId:
'381325e4-0f9c-41ea-b5f6-02f8ea2a475a',
url: env.GIT_REPO
]
],
changelog: true,
poll: true,
]
)
}
}
stage('Install and build')
{
steps
{
// 3，前面安裝過的 nodejs 插件使用
nodejs('v14.19.0')
{
sh 'npm install yarn -g'
sh 'yarn install'
sh 'yarn build'
}
}
}
stage('Pack')
{
steps
{
sh 'tar -zcvf dist.tar.gz dist/'
sh 'rm -rf dist/'
}
}
stage('Deploy')
{
steps
{
// 4，前面下載的 Publish Over SSH 插件的使用
sshPublisher(
publishers: [
sshPublisherDesc(
configName: 'aliyun-dev',
transfers: [
sshTransfer(
cleanRemote: false,
excludes: '',
execCommand: ''
'
cd / usr / share / nginx /
html /
tar - zxvf dist.tar.gz rm -
rf dist.tar.gz ''
',
execTimeout: 120000,
flatten: false,
makeEmptyDirs: false,
noDefaultExcludes: false,
patternSeparator: '[, ]+',
remoteDirectory:
'/usr/share/nginx/html/',
remoteDirectorySDF: false,
removePrefix: '',
sourceFiles:
'dist.tar.gz'
)
],
usePromotionTimestamp: false,
useWorkspaceInPromotion: false,
verbose: false
)
]
)
}
}
}
post
{
success
{
// 5，DingTalk 插件的使用。
dingtalk(
robot: '1314',
type: 'ACTION_CARD',
title: 'Jenkins構(gòu)建提醒',
text: successText,
btns: [
[
title: '控制臺(tái)',
actionUrl: 'http://106.14.185.11:8080/'
],
[
title: '項(xiàng)目預(yù)覽',
actionUrl: 'http://github.com/'
],
],
at: []
)
}
failure
{
dingtalk(
robot: '1314',
type: 'ACTION_CARD',
title: 'Jenkins構(gòu)建提醒',
text: failureText,
btns: [
[
title: '控制臺(tái)',
actionUrl: 'http://106.14.185.11:8080/'
],
[
title: '項(xiàng)目預(yù)覽',
actionUrl: 'http://github.com/'
],
],
at: [] // 這里是手機(jī)號(hào)多個(gè)之間,隔開
)
}
}
}
這么多內(nèi)容手寫無(wú)疑是很難受的，好在 Jenkins 提供了一些幫助工具。訪問地址為：Jenkins地址 + /job + 當(dāng)前任務(wù) + /pipeline-syntax/，例如：http://localhost:8080/job/dev-deploy/pipeline-syntax/，或者進(jìn)入任務(wù)構(gòu)建頁(yè)面，點(diǎn)擊流水線語(yǔ)法進(jìn)入
進(jìn)入該頁(yè)面后請(qǐng)熟讀并背誦以下三項(xiàng)。重點(diǎn)放到第一項(xiàng)。
回頭看上面的腳本注釋都帶有序號(hào)。根據(jù)注釋序號(hào)開始解釋。
- 在片段生成器中選擇
properties: Set job properties生成代碼片段。由于只是使用了git hook trigger所以要對(duì)生成的片段稍作修改。
- 如果不是為了偵聽
github push 選擇 git: Git即可，但現(xiàn)在應(yīng)該選擇checkout: Check out from version control，隨后填寫信息生成代碼即可。
3. 選擇 nodejs: Provide Node & npm bin/folder to Path
4. 選擇 sshPublisher: Send build artifacts over SSH，像上面流水線一樣配置之后直接生成代碼即可。
5. DingTalk 文檔文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-687087.html
總結(jié)： 通過插件生成的代碼，稍作組合就成為了完整的配置。但整體難度還是要略高于 Freestyle 任務(wù)。畢竟生成的代碼有部分也不是拿來(lái)即用的，并且 Pipline 基本語(yǔ)法一定要有所掌握。不然生成的代碼都不曉得放到哪里合適。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-687087.html
到了這里，關(guān)于【前端自動(dòng)化部署】，Devops，CI/CD的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
