前端 CI/CD 流水线设计：从提交到发布的自动化

前端部署看似「打个包传上去」，但要做好工程化，流水线需要像后端一样严谨。本文分享一套经过验证的前端 CI/CD 设计。

流水线的四个阶段

1. 质量门禁（Quality Gate）

提交触发流水线后，首先并行执行：

• 代码风格检查（ESLint、Prettier）；
• 类型检查（tsc --noEmit）；
• 单元测试（Vitest）；
• 依赖安全扫描（pnpm audit）。

任何一项失败即阻断，不给问题流入下一步的机会。

2. 构建与产物校验

pnpm build
# 校验产物完整性、注入体积预算检查

产物校验是前端特有的关键步骤：检查 bundle 体积、确认关键资源存在、生成哈希清单。

3. 多环境部署

用环境变量区分构建配置，按环境推送：

• preview：每个 PR 自动部署预览环境，便于评审；
• staging：合并主分支后部署，跑端到端测试；
• production：打 tag 或手动审批后发布。

4. 发布与回滚

前端回滚的精髓在于产物不可变 + 目录版本化：

• 每次构建产物带唯一哈希，发布到 releases/<hash>/；
• 用软链接或配置指向当前版本；
• 回滚只需把指针切回上一个版本目录，秒级完成。

关键实践

• 构建一次，多处部署：同一份产物在不同环境复用，避免「开发构建的包上线」的隐患；
• PR 预览环境：让评审者在真实环境里看效果，而非只看代码 diff；
• 灰度发布：新版本先切 5% 流量，观察错误率再逐步放量。

结语

一条好的前端流水线，衡量标准不是「跑得有多花哨」，而是出了问题能不能快速定位、快速回滚。把回滚设计进流程，比任何炫技都实在。