前端 CI/CD 流程

问题

描述前端项目的 CI/CD 流程，以及如何配置自动化构建和部署。

解答

CI/CD 概念

• CI (Continuous Integration)：持续集成，代码提交后自动运行测试、构建
• CD (Continuous Deployment/Delivery)：持续部署/交付，构建通过后自动部署到服务器

典型流程

代码提交 → 代码检查 → 单元测试 → 构建打包 → 部署 → 通知

GitHub Actions 配置示例

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches: [main]  # main 分支推送时触发
  pull_request:
    branches: [main]  # PR 时触发

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
      # 拉取代码
      - name: Checkout
        uses: actions/checkout@v4
      
      # 设置 Node.js 环境
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      # 安装依赖
      - name: Install dependencies
        run: npm ci
      
      # 代码检查
      - name: Lint
        run: npm run lint
      
      # 运行测试
      - name: Test
        run: npm run test
      
      # 构建
      - name: Build
        run: npm run build
      
      # 部署到服务器
      - name: Deploy
        if: github.ref == 'refs/heads/main'
        run: |
          # 使用 rsync 或其他方式部署
          rsync -avz ./dist/ user@server:/var/www/app/

GitLab CI 配置示例

# .gitlab-ci.yml
stages:
  - lint
  - test
  - build
  - deploy

# 缓存 node_modules
cache:
  paths:
    - node_modules/

# 代码检查
lint:
  stage: lint
  script:
    - npm ci
    - npm run lint

# 单元测试
test:
  stage: test
  script:
    - npm ci
    - npm run test
  coverage: '/All files[^|]*\|[^|]*\s+([\d\.]+)/'

# 构建
build:
  stage: build
  script:
    - npm ci
    - npm run build
  artifacts:
    paths:
      - dist/
    expire_in: 1 week

# 部署到测试环境
deploy_staging:
  stage: deploy
  script:
    - echo "Deploying to staging..."
  environment:
    name: staging
  only:
    - develop

# 部署到生产环境
deploy_production:
  stage: deploy
  script:
    - echo "Deploying to production..."
  environment:
    name: production
  only:
    - main
  when: manual  # 手动触发

常用 CI/CD 工具

工具	特点
GitHub Actions	GitHub 原生，配置简单
GitLab CI	GitLab 内置，功能完整
Jenkins	自托管，插件丰富
CircleCI	云服务，速度快
Vercel/Netlify	前端专用，零配置

Vercel 部署（零配置）

// vercel.json
{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Docker 部署

# Dockerfile
# 构建阶段
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

# nginx.conf
server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;
    
    # SPA 路由支持
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

关键点

• CI 阶段：lint → test → build，任一步骤失败则中断
• CD 阶段：区分环境（staging/production），生产环境建议手动确认
• 缓存优化：缓存 node_modules 和构建产物，加速流水线
• 环境变量：敏感信息（密钥、token）存放在 CI/CD 平台的 Secrets 中
• 回滚机制：保留历史构建产物，支持快速回滚