前端 CI/CD 实战

自动化部署让每次提交都能自动测试、构建、上线，是团队效率的倍增器。

GitHub Actions 示例

name: Deploy
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - run: pnpm lint
      - run: pnpm test
      - run: pnpm build
      - name: Deploy
        run: |
          rsync -avz dist/ user@server:/var/www/app/

关键实践

• 缓存依赖：cache: pnpm 让安装从 60s 降到 5s
• --frozen-lockfile：CI 中锁定依赖版本，避免意外
• 分支策略：main 自动部署生产，PR 部署预览环境
• 失败快速反馈：lint/test 放在 build 前面，早失败早发现

自动化部署一次配置，长期受益。