上一节，我们知道了 GitLab Runner CI/CD的使用方法，并且配置了一个Demo； 本小结开始实战，使用CI/CD 配置一个前端项目；这里简化为两步，第一步先编译，第二步将编译好的文件推到nginx代理的文件夹中，这样每当有小伙伴提交代码就会自动发布。
1. Linux 环境准备
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
# 验证环境中是否存在正确的 Node.js 版本
node -v # 应该打印 `v20.18.0`
# 验证环境中是否存在正确的 npm 版本
npm -v # 应该打印 `10.8.2`
1.3 配置前端编译环境
# 设置npm镜像，防止在国内无法访问国外镜像
npm config set registry https://registry.npmmirror.com
npm i nrm -g
npm i pnpm -g
-
nrm可以动态切换各个厂商的镜像 -
pnpm测试项目使用了 pnpm 来管理项目
3. 编译阶段处理
3.1 参考上一小节新建一个 runner
- Enter an executor, 选择
shell - 标签填
build
3.2 修改前端 .gitlab-ci.yml 文件
build-job:
stage: build
tags:
- build
script:
- pnpm install
- npm run build
- 使用标签为
build的runner执行pnpm install和npm run build命令
提交代码
企业微信截图_17291536469234.png
企业微信截图_1729153729487.png
- 在gitlab上可以看到任务执行完成
- 在服务器中可以看到编译到的dist目录
4. 部署阶段处理
4.1 生成 SSH 密钥对（如果没有现成的密钥）
ssh-keygen -t rsa -b 4096 -C "gitlab-runner"
- 生成的文件在
/root/.ssh/id_rsa.pub
4.2 将公钥复制到目标服务器
ssh-copy-id user@target-server
- 完成后使用
ssh user@target-server按照提示连接到服务器，会让你输入密码。然后exit退出 - 可以使用
scp -r ./dist user@target-server:/usr/share/nginx/test测试是否可以服务当前目录到服务器中
4.3 参考上一小节新建一个 runner
- Enter an executor, 选择
shell - 标签填
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 将打包好的目录复制到指定的服务器目录
- scp -r ./dist $TEST_USERNAME@$TEST_HOST:/usr/share/nginx/test
-
cache缓存node_modules -
artifacts指定文件留到下一个阶段 -
deploy-job新增部署阶段；scp会登录ssh, 并且复制文件夹到指定服务器目录 -
$TEST_USERNAME和$TEST_HOST是配置在gitlab中的变量，防止放在客户端泄密
4.5 新增 $TEST_USERNAME和$TEST_HOST变量
企业微信截图_17291602021102.png
5. 提交前端代码
企业微信截图_17291603327381.png
image.png
- 完美收官
