CI/CD 流程：GitHub Actions 实践

持续集成与持续部署（CI/CD）是现代软件开发的关键实践，能够自动化测试、构建和部署流程，提升 Vue 3 项目的交付效率和质量。GitHub Actions 是 GitHub 提供的 CI/CD 工具，集成性强且易于配置。本节将介绍 CI/CD 的基本概念、GitHub Actions 的工作原理，并通过实践示例展示如何为 Vue 3 项目设置自动化流程，帮助你实现高效的开发与部署。

什么是 CI/CD？

  • 持续集成（CI）：频繁将代码集成到主分支，通过自动化测试验证代码质量。
  • 持续部署（CD）：自动将通过测试的代码部署到生产环境。
  • 目标：减少手动操作，快速反馈问题，确保应用稳定性。

GitHub Actions 简介

  • 定义：GitHub 的工作流自动化工具，通过 YAML 文件定义任务。
  • 核心概念：
    • Workflow：一组自动化流程。
    • Job：工作流中的任务单元。
    • Step：任务中的具体步骤。
    • Action：可复用的步骤模块。
  • 触发方式：推送代码、拉取请求等事件。

配置 GitHub Actions

项目准备

假设有一个 Vue 3 项目，使用 Vite 构建，包含单元测试（Vitest）和 E2E 测试（Cypress），目标是部署到 Vercel。

项目结构

my-vue-app/
├── src/
│   ├── main.ts
│   ├── App.vue
│   └── components/
│       └── Counter.vue
├── tests/
│   └── Counter.test.ts
├── cypress/
│   ├── e2e/
│   │   └── counter.cy.js
│   └── cypress.config.js
├── vite.config.ts
└── package.json

创建 Workflow

文件位置

在项目根目录下创建 .github/workflows/ci-cd.yml。

基本配置

# .github/workflows/ci-cd.yml
name: CI/CD Pipeline

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install Dependencies
        run: npm ci
      - name: Run Unit Tests
        run: npm run test
      - name: Run E2E Tests
        run: |
          npm run build
          npx start-server-and-test 'vite preview --port 4173' http://localhost:4173 'cypress run'

  deploy:
    needs: test # 依赖测试任务
    runs-on: ubuntu-latest
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install Dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Deploy to Vercel
        run: npx vercel --prod
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}

配置说明

  • 触发事件：
    • push 和 pull_request 到 main 分支。
  • 任务：
    • test：运行单元和 E2E 测试。
    • deploy：构建并部署，依赖 test 成功。
  • 环境变量：
    • VERCEL_TOKEN：Vercel 的访问令牌，需在 GitHub Secrets 配置。

添加 Secrets

  1. 在 GitHub 仓库页面，进入 Settings > Secrets and variables > Actions。
  2. 点击 New repository secret。
  3. 添加 VERCEL_TOKEN，值从 Vercel 仪表盘获取。

实践：CI/CD 流程

示例项目

Counter.vue

<template>
  <div data-testid="counter">
    <p data-testid="count">计数: {{ count }}</p>
    <button data-testid="increment" @click="increment">增加</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
});
</script>

测试文件

  • 单元测试：

    // tests/Counter.test.ts
import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import Counter from '../components/Counter.vue';

describe('Counter', () => {
  it('renders initial count', () => {
    const wrapper = mount(Counter);
    expect(wrapper.text()).toContain('计数: 0');
  });

  it('increments count', async () => {
    const wrapper = mount(Counter);
    await wrapper.find('[data-testid="increment"]').trigger('click');
    expect(wrapper.text()).toContain('计数: 1');
  });
});

  • E2E 测试：

    // cypress/e2e/counter.cy.js
describe('Counter', () => {
  it('increments count', () => {
    cy.visit('/');
    cy.get('[data-testid="count"]').should('have.text', '计数: 0');
    cy.get('[data-testid="increment"]').click();
    cy.get('[data-testid="count"]').should('have.text', '计数: 1');
  });
});

运行流程

  1. 提交代码：
    git add .
git commit -m "Add CI/CD workflow"
git push origin main
  2. 检查 GitHub Actions：
    • 进入仓库的 Actions 标签，查看 CI/CD Pipeline 执行情况。
    • 测试任务运行 Vitest 和 Cypress。
    • 部署任务将 dist/ 推送到 Vercel。

输出结果

  • 测试成功：显示绿色勾号。
  • 部署完成：Vercel 返回生产 URL（如 https://my-vue-app.vercel.app）。

高级配置

1. 缓存依赖

- name: Cache Node Modules
  uses: actions/cache@v3
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: ${{ runner.os }}-node-

2. 并行任务

jobs:
  unit-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with: { node-version: 18 }
      - run: npm ci
      - run: npm run test

  e2e-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with: { node-version: 18 }
      - run: npm ci
      - run: npm run build
      - run: npx start-server-and-test 'vite preview --port 4173' http://localhost:4173 'cypress run'

  deploy:
    needs: [unit-tests, e2e-tests]
    # ...
  • 效果：单元测试和 E2E 测试并行，提升效率。

3. 环境变量

env:
  VITE_API_URL: ${{ secrets.PROD_API_URL }}

注意事项

  1. 测试覆盖：
    • 确保关键功能有测试用例。
  2. 密钥安全：
    • 敏感信息（如 VERCEL_TOKEN）存储在 Secrets 中。
  3. 构建失败：
    • 检查日志，常见问题包括依赖缺失或端口占用。

优化建议

  • 失败通知：集成 Slack 或 Email：
    - name: Notify on Failure
  if: failure()
  uses: slackapi/slack-github-action@v1.23.0
  with:
    slack-bot-token: ${{ secrets.SLACK_BOT_TOKEN }}
    channel-id: 'deploy-notifications'
    text: 'Deploy failed!'
  • 增量构建：仅构建变更部分（需复杂配置）。

总结

通过 GitHub Actions，你为 Vue 3 项目实现了完整的 CI/CD 流程，包括测试和部署。本节展示了从配置到实践的步骤，结合 Vercel 完成了自动化上线。掌握这些技能后，你的开发流程将更加高效和可靠。本章结束，下一章将进入实战项目，带你整合所学知识！

Last Updated::