CI/CD集成规范

CI/CD是现代前端工程中不可或缺的一环，通过自动化流程提升代码质量和交付效率。工程化规范能够确保团队协作的一致性，减少人为错误，而集成规范则定义了从代码提交到部署的完整路径。

CI/CD的核心概念

持续集成（CI）强调频繁地将代码变更合并到主干，并通过自动化测试验证。持续交付（CD）则确保代码随时可部署到生产环境。前端项目中常见的CI/CD工具包括GitHub Actions、GitLab CI和Jenkins。

一个典型的CI流程包含以下步骤：

1. 代码提交触发构建
2. 运行静态代码检查（如ESLint）
3. 执行单元测试
4. 生成构建产物
5. 部署到测试环境

// .github/workflows/ci.yml 示例
name: Frontend CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '16.x'
    - run: npm ci
    - run: npm run lint
    - run: npm test
    - run: npm run build

工程化规范要点

分支管理策略

采用Git Flow或Trunk Based Development策略。功能分支命名遵循feature/xxx格式，修复分支使用fix/xxx。主干分支（main/master）应设置保护规则，禁止直接推送。

# 创建功能分支示例
git checkout -b feature/user-authentication

提交信息规范

使用Conventional Commits格式，类型包括feat、fix、docs、style等。提交信息应清晰描述变更内容：

feat(auth): add Google OAuth integration
fix(button): correct hover state styling

代码质量门禁

在CI流程中设置质量检查关卡：

1. ESLint检查必须通过
2. 单元测试覆盖率不低于80%
3. 构建产物大小限制（如不超过2MB）

// jest.config.js 配置示例
module.exports = {
  collectCoverage: true,
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80
    }
  }
}

前端CI/CD特殊考量

环境变量管理

区分开发、测试和生产环境变量。使用.env文件配合dotenv加载，但在CI中通过Secret注入敏感信息。

// webpack.config.js 环境变量处理
const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = () => {
  const env = dotenv.config().parsed;
  return {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': JSON.stringify(env)
      })
    ]
  }
}

构建产物优化

CI流程中应包含构建优化步骤：

• 代码分割（Code Splitting）
• Tree Shaking
• 图片压缩
• 生成sourcemap（仅测试环境）

// vite.config.js 优化配置示例
export default defineConfig({
  build: {
    minify: 'terser',
    sourcemap: process.env.NODE_ENV !== 'production',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom']
        }
      }
    }
  }
})

缓存策略

利用CI系统的缓存机制加速构建：

• 缓存node_modules
• 缓存构建工具（如Vite、Webpack）的中间产物
• 缓存测试结果

# GitHub Actions 缓存示例
- name: Cache node modules
  uses: actions/cache@v2
  with:
    path: '**/node_modules'
    key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}

部署规范

渐进式发布

采用蓝绿部署或金丝雀发布策略降低风险。通过负载均衡控制流量切换，确保零停机部署。

# 使用kubectl进行金丝雀发布示例
kubectl set image deployment/frontend frontend=image:v2
kubectl scale deployment frontend --replicas=3

回滚机制

每次部署应生成唯一版本号，保留历史版本构建产物。回滚时快速切换至前一稳定版本。

// 版本号生成策略示例
const version = `${process.env.GIT_SHA}-${new Date().toISOString()}`
console.log(`App Version: ${version}`)

健康检查

部署后自动运行冒烟测试，验证核心功能可用性。设置健康检查端点供监控系统使用。

// healthcheck.js 示例
const express = require('express')
const app = express()

app.get('/health', (req, res) => {
  res.status(200).json({
    status: 'UP',
    version: process.env.APP_VERSION
  })
})

app.listen(3000)

监控与反馈

构建监控

收集CI/CD流水线指标：

• 构建成功率
• 构建时长
• 测试通过率
• 部署频率

错误跟踪

集成Sentry等错误监控工具，捕获运行时错误并关联到具体部署版本。

// Sentry初始化示例
import * as Sentry from '@sentry/react'
import { BrowserTracing } from '@sentry/tracing'

Sentry.init({
  dsn: 'YOUR_DSN',
  release: process.env.RELEASE,
  integrations: [new BrowserTracing()],
  tracesSampleRate: 0.2
})

通知机制

关键事件触发通知：

• 构建失败
• 部署成功
• 健康检查异常 通知渠道包括Slack、邮件或企业微信。

# 构建失败通知示例
- name: Notify Slack
  if: failure()
  uses: rtCamp/action-slack-notify@v2
  env:
    SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
    SLACK_MESSAGE: "构建失败: ${{ github.workflow }} #${{ github.run_number }}"

多环境管理

环境配置

为不同环境创建独立配置：

• 开发环境：启用热更新、详细日志
• 测试环境：Mock API、完整测试
• 生产环境：最小化代码、性能优化

// 环境判断逻辑
const getApiBaseUrl = () => {
  switch(process.env.NODE_ENV) {
    case 'development':
      return 'http://localhost:3000/api'
    case 'production':
      return 'https://api.example.com'
    default:
      return 'https://staging-api.example.com'
  }
}

数据库迁移

前端如有本地存储方案（如IndexedDB），需考虑数据迁移策略。版本化数据结构，提供迁移脚本。

// IndexedDB 版本迁移示例
const request = indexedDB.open('myDB', 3)
request.onupgradeneeded = (event) => {
  const db = event.target.result
  if (event.oldVersion < 1) {
    db.createObjectStore('users', { keyPath: 'id' })
  }
  if (event.oldVersion < 2) {
    const store = event.target.transaction.objectStore('users')
    store.createIndex('email', 'email', { unique: true })
  }
}

安全实践

依赖安全扫描

在CI中集成npm audit或Snyk检查依赖漏洞，阻断高风险漏洞的部署。

# npm audit 集成示例
- name: Audit dependencies
  run: |
    npm audit --audit-level=high
    if [ $? -ne 0 ]; then
      echo "Dependency vulnerabilities found"
      exit 1
    fi

敏感信息防护

禁止在代码仓库中存储API密钥等敏感信息。使用CI系统的Secret管理功能，运行时注入环境变量。

// 安全地访问敏感配置
const apiKey = process.env.PAYMENT_API_KEY || ''

内容安全策略

构建时生成CSP头，限制资源加载来源。开发环境适当放宽策略，生产环境严格限制。

// CSP 中间件示例
const csp = require('helmet-csp')
app.use(csp({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "'unsafe-inline'"],
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:"]
  }
}))

性能基准

构建性能监控

跟踪关键指标：

• 冷构建时间
• 增量构建时间
• 产物大小趋势 设置阈值触发告警。

# 构建时间监控示例
- name: Record build time
  uses: actions/github-script@v5
  with:
    script: |
      const time = Date.now() - new Date('${{ job.started_at }}').getTime()
      core.setOutput('duration', time)

运行时性能

集成Lighthouse CI，确保关键性能指标达标：

• 首次内容绘制（FCP）
• 最大内容绘制（LCP）
• 交互准备时间（TTI）

// lighthouse-ci 配置示例
module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000'],
      numberOfRuns: 3
    },
    assert: {
      assertions: {
        'categories:performance': ['error', {minScore: 0.9}],
        'categories:accessibility': ['error', {minScore: 0.95}]
      }
    }
  }
}