如何配置.gitlab-ci.yml实现Vue.js应用与Node API的GitLab CI/CD流水线

以下配置默认适配前后端同仓、前端代码存放在frontend目录、后端代码存放在backend目录的项目结构，分仓项目可单独拆出对应部分的配置即可，要求GitLab Runner已配置Docker运行环境。

完整.gitlab-ci.yml示例 #

# 定义流水线阶段，按顺序执行
stages:
  - lint
  - test
  - build
  - deploy

# 全局缓存node_modules，避免每次重复安装依赖
cache:
  paths:
    - frontend/node_modules/
    - backend/node_modules/

# -------------------------- 1. 代码校验阶段 --------------------------
lint-frontend:
  stage: lint
  image: node:18-alpine # 和本地/生产环境的Node版本保持一致即可
  before_script:
    - cd frontend
  script:
    - npm install
    - npm run lint
  only:
    - merge_requests
    - main
    - dev

lint-backend:
  stage: lint
  image: node:18-alpine
  before_script:
    - cd backend
  script:
    - npm install
    - npm run lint
  only:
    - merge_requests
    - main
    - dev

# -------------------------- 2. 自动化测试阶段 --------------------------
test-frontend:
  stage: test
  image: node:18-alpine
  before_script:
    - cd frontend
  script:
    - npm install
    - npm run test:unit # 对应package.json中配置的前端单测命令
  only:
    - merge_requests
    - main
    - dev

test-backend:
  stage: test
  image: node:18-alpine
  services:
    - mongo:latest # 后端依赖的中间件服务，不需要可删除
  variables:
    MONGO_URI: "mongodb://mongo:27017/test" # 测试环境变量，按需调整
  before_script:
    - cd backend
  script:
    - npm install
    - npm run test # 对应package.json中配置的后端测试命令
  only:
    - merge_requests
    - main
    - dev

# -------------------------- 3. 构建阶段 --------------------------
build-frontend:
  stage: build
  image: node:18-alpine
  before_script:
    - cd frontend
  script:
    - npm install
    - npm run build # 打包Vue项目生成dist目录
  artifacts:
    paths:
      - frontend/dist/ # 把打包产物存为流水线制品供部署阶段使用
    expire_in: 1 day # 制品保留时长可自定义
  only:
    - main
    - dev

build-backend:
  stage: build
  image: node:18-alpine
  before_script:
    - cd backend
  script:
    - npm install
    - npm run build # TS后端的编译命令，纯JS后端可删除该job
  artifacts:
    paths:
      - backend/dist/
    expire_in: 1 day
  only:
    - main
    - dev

# -------------------------- 4. 部署阶段 --------------------------
deploy-frontend:
  stage: deploy
  image: alpine:latest
  dependencies:
    - build-frontend # 引入前端构建制品
  before_script:
    - apk add --no-cache openssh rsync
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa # SSH私钥需提前存在GitLab项目CI/CD变量中
    - chmod 600 ~/.ssh/id_rsa
    - ssh-keyscan 你的服务器IP >> ~/.ssh/known_hosts
  script:
    # 把dist目录同步到服务器Nginx静态资源目录
    - rsync -av --delete frontend/dist/ root@你的服务器IP:/usr/share/nginx/html/
  only:
    - main # 仅main分支触发生产部署，dev分支可额外新增测试环境部署job

deploy-backend:
  stage: deploy
  image: alpine:latest
  dependencies:
    - build-backend # 引入后端构建制品
  before_script:
    - apk add --no-cache openssh rsync
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
    - chmod 600 ~/.ssh/id_rsa
    - ssh-keyscan 你的服务器IP >> ~/.ssh/known_hosts
  script:
    # 同步后端代码到服务器
    - rsync -av backend/dist/ root@你的服务器IP:/opt/api/
    - rsync -av backend/package.json root@你的服务器IP:/opt/api/
    # 远程执行命令安装生产依赖、重启Node服务（示例使用pm2管理进程）
    - ssh root@你的服务器IP "cd /opt/api && npm install --production && pm2 restart api"
  only:
    - main

注意事项 #

• 所有敏感信息（SSH密钥、数据库密码、第三方服务密钥、前端打包用的环境变量）一律存放在GitLab项目「设置」-「CI/CD」-「变量」中，禁止硬编码到配置文件
• Node镜像版本必须和本地开发、生产环境的版本保持一致，避免依赖安装或运行异常
• 如果需要用Docker镜像部署，可在构建阶段后新增镜像构建、推送镜像仓库的步骤，部署阶段直接拉取镜像启动即可
• 流水线触发规则可自行调整，比如把only替换为rules实现更灵活的触发条件

内容的提问来源于stack exchange，提问作者Jean-eudes Gamedjo