给前端项目接上 CI/CD：自动构建与预发布环境

wuwenzen@outlook.com (wuwj) — Wed, 20 Oct 2021 00:00:00 +0000

以前做前端上线，经常是这样的：

本地 npm run build 打包；
用 FTP 或手动拷贝把 dist 丢到服务器；
出了问题再手动覆盖回去。

这种方式有几个明显缺点：

完全依赖人的操作习惯，出错难追踪；
没有固定的「预发布环境」，测试体验不好；
回滚麻烦，基本靠「手快」。

这篇文章记录的是：一次给前端项目接上 CI/CD 的实际过程，目标是：

提交代码 → 自动构建 → 部署到预发布 → 人工验证 → 一键上线 & 可快速回滚。

1. 流程目标先画出来

先不管用什么平台（GitHub Actions、GitLab CI、Jenkins…），流程大致分为几步：

CI 阶段（持续集成）
- 安装依赖；
- 跑 lint / 单测；
- 打包构建。
CD 阶段（持续交付/部署）
- 构建产物上传到制品库或对象存储；
- 自动部署到预发布环境；
- 人工验证无问题后，再部署到生产；
- 所有版本有记录，可一键回滚。

把这张「大图」先画给团队看，大家对齐预期后，再来谈具体实现。

2. 以 GitHub Actions 为例写一个最小流水线

2.1 基础 CI：安装 + 构建

.github/workflows/ci.yml：

name: Frontend CI

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

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Build
        run: npm run build

      - name: Archive production artifacts
        uses: actions/upload-artifact@v3
        with:
          name: dist
          path: dist

这样每次 PR / 推送到 develop，都能自动帮你检查：

自动化部署 on Saiga

给前端项目接上 CI/CD：自动构建与预发布环境

1. 流程目标先画出来

2. 以 GitHub Actions 为例写一个最小流水线

2.1 基础 CI：安装 + 构建