前端 CI/CD 流程是怎样的？如何实现自动化部署？

代码推送 → 触发 CI → 安装依赖 → 代码检查 → 构建 → 测试 → 部署
                                                       ↓
                                              测试环境 / 预发布 / 生产

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

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

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: Install
        run: npm ci
      
      - name: Lint
        run: npm run lint
      
      - name: Test
        run: npm run test:unit
      
      - name: Build
        run: npm run build
        env:
          VITE_API_URL: ${{ secrets.API_URL }}
      
      - name: Upload artifacts
        uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist/
  
  deploy-staging:
    needs: build
    if: github.ref == 'refs/heads/develop'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/download-artifact@v4
        with:
          name: dist
          path: dist
      
      - name: Deploy to Staging
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ secrets.STAGING_HOST }}
          username: ${{ secrets.SSH_USER }}
          key: ${{ secrets.SSH_KEY }}
          source: 'dist/*'
          target: '/var/www/staging'
  
  deploy-production:
    needs: build
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    environment: production  # 需要审批
    steps:
      - uses: actions/download-artifact@v4
        with:
          name: dist
          path: dist
      
      - name: Deploy to CDN
        run: |
          npx aliyun-cdn-cli deploy --path dist/
        env:
          CDN_KEY: ${{ secrets.CDN_KEY }}

main      → 自动部署到生产
develop   → 自动部署到预发布
feature/* → CI 构建+测试，不部署
hotfix/*  → 紧急修复，直接合并 main

# 安装 CLI
npm i -g vercel

# 部署
vercel        # 预览环境
vercel --prod # 生产环境

# Dockerfile
FROM node:20-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

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

# docker-compose.yml
services:
  web:
    build: .
    ports:
      - "80:80"

# .env.development
VITE_API_URL=http://localhost:3000

# .env.staging
VITE_API_URL=https://api.staging.example.com

# .env.production
VITE_API_URL=https://api.example.com