Vue项目CI/CD：基于GitHub Actions实现自动打包+测试+部署

核心流程概述

通过GitHub Actions实现Vue项目的自动化流水线：

1. 触发条件：代码推送至特定分支（如main）
2. 执行阶段：
   • 安装依赖
   • 运行单元测试
   • 构建生产包
   • 自动部署至服务器
3. 部署目标：支持云服务器/静态托管（如GitHub Pages）

详细配置步骤

1. 创建GitHub Actions工作流文件

在项目根目录创建路径：.github/workflows/ci-cd.yml

name: Vue CI/CD Pipeline

on:
  push:
    branches: [ "main" ]  # 监听main分支的推送

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest  # 使用最新Ubuntu系统

    steps:
    - name: Checkout code
      uses: actions/checkout@v4  # 拉取代码

    - name: Setup Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '20'  # 指定Node版本

    - name: Install dependencies
      run: npm ci  # 精准安装依赖

    - name: Run tests
      run: npm test  # 执行单元测试

    - name: Build project
      run: npm run build  # 构建生产包

    - name: Deploy to Server
      uses: appleboy/scp-action@v1
      with:
        host: ${{ secrets.SERVER_HOST }}  # 服务器IP
        username: ${{ secrets.SERVER_USER }}
        key: ${{ secrets.SSH_PRIVATE_KEY }}
        source: "dist/*"  # Vue构建产物
        target: "/var/www/vue-app"  # 服务器目标路径

2. 关键配置说明

• 测试要求：需在package.json配置测试脚本

  "scripts": {
    "test": "vue-cli-service test:unit"
  }
  

• 安全认证：在GitHub仓库设置Secrets：
  • SERVER_HOST：服务器IP
  • SERVER_USER：登录用户
  • SSH_PRIVATE_KEY：SSH私钥（需提前配置免密登录）

3. 部署到GitHub Pages（替代方案）

- name: Deploy to GH Pages
  uses: peaceiris/actions-gh-pages@v3
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./dist  # 构建目录

技术要点解析

1. 依赖安装优化：

   • 使用npm ci代替npm install确保依赖版本锁定
   • 比常规安装快$$40%$$且可避免版本漂移

2. 构建缓存机制：

   - name: Cache node_modules
     uses: actions/cache@v3
     with:
       path: node_modules
       key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
   

   通过缓存依赖可缩短流水线执行时间$$30% \sim 60%$$

3. 部署策略选择：

   方案	适用场景	优势
   SCP直接部署	自有服务器	实时性强，可控性高
   GitHub Pages	静态演示站点	零配置，自动HTTPS
   Docker容器化	微服务架构	环境一致性高

典型问题解决方案

场景1：测试失败阻断部署
流水线会在npm test阶段自动终止，避免有缺陷代码进入生产环境。

场景2：回滚机制实现
添加手动审批步骤：

deploy:
  needs: build
  environment: production
  runs-on: ubuntu-latest
  steps:
    - name: Approval
      uses: trstringer/manual-approval@v1  # 人工确认

场景3：多环境部署
通过Git分支管理环境：

on:
  push:
    branches:
      - main   # 触发生产环境部署
      - staging # 触发预发环境部署

注：完整实现需配合环境变量管理（如.env.production）

效能提升建议

1. 并行执行策略：拆分测试与构建任务
2. 镜像优化：使用定制Docker镜像减少依赖安装时间
3. 增量部署：通过rsync仅同步变更文件：

   - name: Incremental Deploy
     run: rsync -avz --delete dist/ user@host:/path