GitLab CI/CD + Vue 前端完整方案

GitLab 用 .gitlab-ci.yml，不需要 Jenkins GitLab 自带 CI/CD，原生支持，零额外安装。

一、整体架构

git push → GitLab 仓库 ↓ 自动触发 GitLab CI/CD ↓ ┌──────────────────────┐ │ stages: │ │ install → build │ │ → test → deploy │ └──────────────────────┘ ↓ 目标服务器 ↓ Nginx 服务

二、前置：安装 GitLab Runner

Runner 是执行 CI 任务的代理，装在你的服务器上。

bash 复制代码

# CentOS 安装
curl -L "https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh" | bash
yum install -y gitlab-runner

# 启动
systemctl enable gitlab-runner
systemctl start gitlab-runner

注册Runner 到 GitLab 项目 gitlab-runner register

bash 复制代码

gitlab-runner register

# 按提示填写：
# GitLab URL：https://gitlab.com（或自建地址）
# Registration Token：仓库 → Settings → CI/CD → Runners → 复制 Token
# Runner 名称：my-vue-runner
# Executor：shell（直接用服务器环境）

宝塔服务器推荐用 shell executor，直接在服务器上跑，最简单。

三、`.gitlab-ci.yml`（放项目根目录）

基础版（推荐先用这个）

bash 复制代码

# .gitlab-ci.yml

# 定义执行阶段（按顺序执行）
stages:
  - install
  - build
  - deploy

# 全局变量
variables:
  DEPLOY_PATH: "/www/wwwroot/my-vue-app"
  NODE_OPTIONS: "--max-old-space-size=4096"

# 缓存 node_modules，加速构建
cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/

# ────────────────────────────
# Stage 1：安装依赖
# ────────────────────────────
install_deps:
  stage: install
  tags:
    - my-vue-runner     # 指定 Runner（与注册时填的名称一致）
  script:
    - node -v
    - npm -v
    - npm install --registry https://registry.npmmirror.com
  only:
    - main
    - develop

# ────────────────────────────
# Stage 2：打包构建
# ────────────────────────────
build_prod:
  stage: build
  tags:
    - my-vue-runner
  script:
    - npm run build
    - echo "构建完成，dist 目录大小：$(du -sh dist)"
  # 构建产物传递给下一阶段
  artifacts:
    paths:
      - dist/
    expire_in: 1 hour
  only:
    - main

# ────────────────────────────
# Stage 3：部署到服务器
# ────────────────────────────
deploy_prod:
  stage: deploy
  tags:
    - my-vue-runner
  script:
    # 备份旧版本（可回滚）
    - |
      if [ -d "$DEPLOY_PATH" ]; then
        cp -r $DEPLOY_PATH ${DEPLOY_PATH}_backup_$(date +%Y%m%d%H%M%S)
        echo "✅ 旧版本已备份"
      fi
    # 部署新版本
    - rm -rf $DEPLOY_PATH/*
    - cp -r dist/* $DEPLOY_PATH/
    - echo "🚀 部署完成：$(date)"
    - echo "📂 当前文件：$(ls $DEPLOY_PATH | head -5)"
  only:
    - main
  environment:
    name: production
    url: https://你的域名.com

完整进阶版（多环境 + 通知 + 回滚）

yml 复制代码

# .gitlab-ci.yml

stages:
  - install
  - lint
  - build
  - deploy

variables:
  PROD_PATH: "/www/wwwroot/my-vue-app"
  TEST_PATH: "/www/wwwroot/my-vue-app-test"

cache:
  key: "$CI_COMMIT_REF_NAME-node"
  paths:
    - node_modules/
  policy: pull-push

# ── 安装依赖 ──────────────────────────────
install:
  stage: install
  tags: [my-vue-runner]
  script:
    - npm ci --registry https://registry.npmmirror.com
  only:
    - main
    - develop
    - merge_requests

# ── 代码检查 ──────────────────────────────
lint:
  stage: lint
  tags: [my-vue-runner]
  script:
    - npm run lint
  allow_failure: false    # lint 失败就停止
  only:
    - main
    - develop
    - merge_requests

# ── 构建测试环境 ──────────────────────────
build:test:
  stage: build
  tags: [my-vue-runner]
  script:
    - npm run build:test     # 对应 package.json 中的 build:test 命令
  artifacts:
    paths: [dist/]
    expire_in: 30 mins
  only:
    - develop

# ── 构建生产环境 ──────────────────────────
build:prod:
  stage: build
  tags: [my-vue-runner]
  script:
    - npm run build          # 生产构建
  artifacts:
    paths: [dist/]
    expire_in: 1 hour
  only:
    - main

# ── 部署测试环境（develop 分支自动触发）──
deploy:test:
  stage: deploy
  tags: [my-vue-runner]
  needs: [build:test]
  script:
    - rm -rf $TEST_PATH/*
    - cp -r dist/* $TEST_PATH/
    - echo "✅ 测试环境部署完成"
  environment:
    name: testing
    url: http://test.你的域名.com
  only:
    - develop

# ── 部署生产环境（main 分支，手动确认）──
deploy:prod:
  stage: deploy
  tags: [my-vue-runner]
  needs: [build:prod]
  script:
    # 带版本号备份
    - BACKUP_DIR="${PROD_PATH}_v${CI_PIPELINE_ID}"
    - cp -r $PROD_PATH $BACKUP_DIR && echo "📦 备份至 $BACKUP_DIR"
    # 清空并部署
    - rm -rf $PROD_PATH/*
    - cp -r dist/* $PROD_PATH/
    # 写入版本信息
    - echo "{\"version\":\"${CI_COMMIT_SHORT_SHA}\",\"time\":\"$(date)\"}" > $PROD_PATH/version.json
    - echo "🚀 生产环境部署完成：${CI_COMMIT_SHORT_SHA}"
  environment:
    name: production
    url: https://你的域名.com
  when: manual          # ⚠️ 生产环境需要手动点击确认部署
  only:
    - main

四、package.json 配置多环境

json 复制代码

{
  "scripts": {
    "dev": "vite",
    "build": "vite build --mode production",
    "build:test": "vite build --mode test",
    "lint": "eslint src --ext .vue,.js,.ts"
  }
}

对应 .env 文件：

bash 复制代码

# .env.production
VITE_API_URL=https://api.你的域名.com
VITE_ENV=production

# .env.test
VITE_API_URL=https://test-api.你的域名.com
VITE_ENV=test

五、GitLab CI/CD 变量管理（重要）

敏感信息不写在文件里，存到 GitLab：

仓库 → Settings → CI/CD → Variables → 添加： Key Value Protected Masked DEPLOY_SERVER_IP 192.168.1.100 ✅ ✅ DEPLOY_SERVER_PASS your_password ✅ ✅ DINGTALK_TOKEN xxx ✅ ✅

在 .gitlab-ci.yml 中使用： script:

echo "部署到 $DEPLOY_SERVER_IP"
sshpass -p " $D E P L O Y S E R V E R P A S S " s s h r o o t @ DEPLOY_SERVER_PASS" ssh root@$ DEPLOYSERVERPASS"sshroot@DEPLOY_SERVER_IP "..."

六、远程服务器部署（Runner 不在目标服务器上时）

如果 Runner 和 Web 服务器是不同机器，用 SSH 部署：

yml 复制代码

deploy:prod:
  stage: deploy
  tags: [my-runner]
  script:
    # 打包压缩
    - tar -czf dist.tar.gz dist/
    # 上传到服务器
    - sshpass -p "$SERVER_PASS" scp dist.tar.gz root@$SERVER_IP:/tmp/
    # 远程执行部署
    - |
      sshpass -p "$SERVER_PASS" ssh root@$SERVER_IP << 'EOF'
        cd /tmp
        tar -xzf dist.tar.gz
        rm -rf /www/wwwroot/my-vue-app/*
        cp -r dist/* /www/wwwroot/my-vue-app/
        rm -rf dist dist.tar.gz
        echo "部署完成：$(date)"
      EOF
  only:
    - main

七、钉钉通知（构建结果推送）

yml 复制代码

# 在 post 阶段加通知
notify:success:
  stage: .post
  tags: [my-vue-runner]
  script:
    - |
      curl -s -X POST "$DINGTALK_WEBHOOK" \
        -H "Content-Type: application/json" \
        -d '{
          "msgtype": "markdown",
          "markdown": {
            "title": "✅ 部署成功",
            "text": "### ✅ 部署成功\n- **项目**：my-vue-app\n- **分支**：'$CI_COMMIT_REF_NAME'\n- **提交**：'$CI_COMMIT_SHORT_SHA'\n- **时间**：'$(date)'"
          }
        }'
  when: on_success
  only:
    - main

notify:failure:
  stage: .post
  tags: [my-vue-runner]
  script:
    - |
      curl -s -X POST "$DINGTALK_WEBHOOK" \
        -H "Content-Type: application/json" \
        -d '{"msgtype":"text","text":{"content":"💥 my-vue-app 构建失败！请速查 GitLab CI！"}}'
  when: on_failure
  only:
    - main

快速上手步骤

bash 复制代码

# 1. 服务器安装并注册 Runner
yum install -y gitlab-runner
gitlab-runner register

# 2. 项目根目录创建配置文件
touch .gitlab-ci.yml
# 粘贴上面「基础版」配置，修改 DEPLOY_PATH 和 tags

# 3. 推送代码
git add .gitlab-ci.yml
git commit -m "feat: add CI/CD"
git push origin main

# 4. 查看执行结果
# 仓库 → CI/CD → Pipelines → 实时查看日志

GitLab CI/CD + Vue 前端 完整方案

一、整体架构

二、前置：安装 GitLab Runner

三、.gitlab-ci.yml（放项目根目录）

基础版（推荐先用这个）

完整进阶版（多环境 + 通知 + 回滚）

四、package.json 配置多环境

五、GitLab CI/CD 变量管理（重要）

六、远程服务器部署（Runner 不在目标服务器上时）

七、钉钉通知（构建结果推送）

快速上手步骤

GitLab CI/CD + Vue 前端完整方案

三、`.gitlab-ci.yml`（放项目根目录）