前端工程化 词条目录
前端Wiki/前端工程化/实战/部署与 CI/CD

CI/CD 流水线

CI/CD(持续集成/持续部署)把“构建-测试-发布”串成自动流水线:推代码到仓库 → 机器自动跑 Lint、测试、构建 → 全绿则自动部署到测试/生产环境。从此发布不再是“深夜加班手动传包”,而是几分钟的流水线任务。

GitHub Actions / GitLab CI 用一份 YAML 描述流水线:触发条件(push/PR/定时)、运行环境(ubuntu 镜像)、执行步骤(install → test → build → deploy)。前端部署的终点通常是 CDN/Nginx 静态服务器。

  • CI 阶段跑测试与构建:任何一步失败就拦住合并,缺陷不上主干
  • CD 阶段自动发布:构建产物 rsync/同步到 CDN,或在容器里跑 nginx
  • 发布前留一道人工审批(production 环境点一下再发),事故都在这一步被拦下
CI/CD
// .github/workflows/deploy.yml —— 推到 main 自动部署
name: deploy
on:
  push:
    branches: [main]          # 只有 main 触发部署

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'npm' }
      - run: npm ci                      // 锁版本安装
      - run: npm run lint                // 第 1 关:规范
      - run: npm test                    // 第 2 关:测试
      - run: npm run build               // 第 3 关:构建
      - uses: peaceiris/actions-gh-pages@v3   // 产物发布到 gh-pages 分支
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
本节要点CI/CD = 推代码即流水线:lint → test → build → deploy;发布从手动操作变成可重复的自动化任务。