上一節(jié)脚猾，我們知道了 GitLab Runner CI/CD的使用方法，并且配置了一個(gè)Demo抡草； 本小結(jié)開始實(shí)戰(zhàn)饰及，使用CI/CD 配置一個(gè)前端項(xiàng)目；這里簡(jiǎn)化為兩步康震，第一步先編譯燎含，第二步將編譯好的文件推到nginx代理的文件夾中，這樣每當(dāng)有小伙伴提交代碼就會(huì)自動(dòng)發(fā)布腿短。
1. Linux 環(huán)境準(zhǔn)備
1.1 安裝最新 Runner
curl -L "https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.deb.sh" | sudo bash
sudo apt-get install gitlab-runner
1.2 安裝node
# 安裝 fnm (快速 Node 管理器)
curl -fsSL https://fnm.vercel.app/install | bash
# 激活 fnm
source ~/.bashrc
# 下載并安裝 Node.js
fnm use --install-if-missing 20
# 驗(yàn)證環(huán)境中是否存在正確的 Node.js 版本
node -v # 應(yīng)該打印 `v20.18.0`
# 驗(yàn)證環(huán)境中是否存在正確的 npm 版本
npm -v # 應(yīng)該打印 `10.8.2`
1.3 配置前端編譯環(huán)境
# 設(shè)置npm鏡像屏箍，防止在國(guó)內(nèi)無(wú)法訪問國(guó)外鏡像
npm config set registry https://registry.npmmirror.com
npm i nrm -g
npm i pnpm -g
-
nrm可以動(dòng)態(tài)切換各個(gè)廠商的鏡像 -
pnpm測(cè)試項(xiàng)目使用了 pnpm 來(lái)管理項(xiàng)目
3. 編譯階段處理
3.1 參考上一小節(jié)新建一個(gè) runner
- Enter an executor, 選擇
shell - 標(biāo)簽填
build
3.2 修改前端 .gitlab-ci.yml 文件
build-job:
stage: build
tags:
- build
script:
- pnpm install
- npm run build
- 使用標(biāo)簽為
build的runner執(zhí)行pnpm install和npm run build命令
提交代碼
企業(yè)微信截圖_17291536469234.png
企業(yè)微信截圖_1729153729487.png
- 在gitlab上可以看到任務(wù)執(zhí)行完成
- 在服務(wù)器中可以看到編譯到的dist目錄
4. 部署階段處理
4.1 生成 SSH 密鑰對(duì)（如果沒有現(xiàn)成的密鑰）
ssh-keygen -t rsa -b 4096 -C "gitlab-runner"
- 生成的文件在
/root/.ssh/id_rsa.pub
4.2 將公鑰復(fù)制到目標(biāo)服務(wù)器
ssh-copy-id user@target-server
- 完成后使用
ssh user@target-server按照提示連接到服務(wù)器，會(huì)讓你輸入密碼橘忱。然后exit退出 - 可以使用
scp -r ./dist user@target-server:/usr/share/nginx/test測(cè)試是否可以服務(wù)當(dāng)前目錄到服務(wù)器中
4.3 參考上一小節(jié)新建一個(gè) runner
- Enter an executor, 選擇
shell - 標(biāo)簽填
deploy
4.4 修改 .gitlab-ci.yml
build-job:
stage: build
tags:
- build
script:
- pnpm install
- npm run build
cache:
paths:
- node_modules/
artifacts:
paths:
- dist/
deploy-job:
stage: deploy
tags:
- deploy
script:
- ssh $TEST_USERNAME@$TEST_HOST "rm -rf /usr/share/nginx/test"
# 使用 SSH 將打包好的目錄復(fù)制到指定的服務(wù)器目錄
- scp -r ./dist $TEST_USERNAME@$TEST_HOST:/usr/share/nginx/test
-
cache緩存node_modules -
artifacts指定文件留到下一個(gè)階段 -
deploy-job新增部署階段赴魁；scp會(huì)登錄ssh, 并且復(fù)制文件夾到指定服務(wù)器目錄 -
$TEST_USERNAME和$TEST_HOST是配置在gitlab中的變量，防止放在客戶端泄密
4.5 新增 $TEST_USERNAME和$TEST_HOST變量
企業(yè)微信截圖_17291602021102.png
5. 提交前端代碼
企業(yè)微信截圖_17291603327381.png
image.png
- 完美收官
