上一节，我们知道了 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

• 完美收官