前端中的 CI/CD 教程详解（附实践方案）
🚀 前端中的 CI/CD 教程详解（附实践方案）
📌 本文适合所有使用 Vue、React、Vite、Webpack 等构建工具的前端项目，手把手带你理解什么是 CI/CD、前端项目中如何实践，并给出 GitHub Actions 等实战例子。
📌 一、什么是 CI/CD？
CI/CD 是现代软件开发流程的基石：
| 缩写 | 全称 | 含义 |
|---|---|---|
| CI | Continuous Integration | 持续集成：自动测试、构建和代码检查 |
| CD | Continuous Delivery / Deployment | 持续交付/持续部署：自动发布到测试或生产环境 |
通俗理解：
- CI：开发同事提交代码后，系统自动执行测试 & 构建 → 保证代码质量
- CD：代码一旦构建成功，自动上传服务器 / 云平台 → 实现自动上线
✨ 前端中，CI/CD 解决了“构建依赖难管理、上线靠手动、环境不一致”等问题
🧩 二、前端项目常见的 CI/CD 流程图
Git Push↓
CI/CD 平台监听到提交↓
拉取代码 & 安装依赖（如：pnpm install）↓
执行测试（如：vitest、jest）↓
构建产物（vite build）↓
构建成功后：→ 自动部署到静态资源服务器（如 OSS、Vercel、Netlify）→ 或上传至后端（如 Nginx、Tomcat 等）
⚙️ 三、前端中 CI/CD 用于哪些场景？
| 场景 | 示例 |
|---|---|
| 自动部署 | 代码提交后自动上线，无需手动打包 |
| 多环境支持 | dev/test/pro 环境自动区分部署 |
| 自动测试 | 合并代码前自动跑测试防回归 |
| Lint 检查 | eslint/stylelint 校验规范性 |
| 自动生成版本 | 自动生成 version.json 提示前端系统更新 |
🛠️ 四、主流 CI/CD 工具推荐
| 平台 | 优势 | 使用场景 |
|---|---|---|
| GitHub Actions ✅ | 与 GitHub 集成最佳，免费配额 | Vue/React 项目部署到 Netlify/Vercel |
| GitLab CI | 私有仓库支持好 | 企业自建 GitLab 平台 |
| Jenkins | 自由度高 | 企业内部部署复杂流程 |
| Vercel/Netlify | 零配置极速部署 | 快速预览、部署静态网站 |
| 阿里云/腾讯云部署工具 | 与云服务集成 | 部署到国内服务器 |
✍️ 五、实战：GitHub Actions 实现 Vue3 项目的 CI/CD
项目结构假设使用的是 Vite + Vue3，托管在 GitHub 上，部署到 Netlify（也可换为 OSS 或自建服务器）：
1. 在项目根目录创建 .github/workflows/deploy.yml
name: CI & Deployon:push:branches:- main # 或 master 分支jobs:build-and-deploy:runs-on: ubuntu-lateststeps:- name: 拉取代码uses: actions/checkout@v3- name: 安装 Node.jsuses: actions/setup-node@v3with:node-version: 18- name: 安装依赖run: |corepack enablepnpm install- name: 构建项目run: pnpm run build- name: 部署到 Netlify（或 OSS）uses: nwtgck/actions-netlify@v1with:publish-dir: ./distproduction-deploy: trueenv:NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
2. 添加 Secrets（密钥）
在 GitHub 项目 → Settings → Secrets → 添加：
NETLIFY_AUTH_TOKENNETLIFY_SITE_ID
3. 成功效果：
- 你每次
git push到main分支 - GitHub Actions 会自动构建并部署至 Netlify
- 项目更新完成，无需本地打包上传！
🧩 六、最佳实践 Tips
✅ 1. 区分不同环境构建
# package.json
"scripts": {"dev": "vite","build:dev": "vite build --mode development","build:prod": "vite build --mode production"
}
然后在 .env.development、.env.production 中分别配置不同 API 地址、版本号等。
✅ 2. 自动生成前端版本号用于更新提示
CI/CD 中构建时写入版本：
// vite-plugin-generate-version.ts
const version = new Date().toISOString();
fs.writeFileSync('public/version.json', JSON.stringify({ version }));
✅ 3. 构建结果提交给后端（如上传 OSS）
- name: 上传到阿里云 OSSrun: |ossutil cp -r dist oss://your-bucket-name/your-path/ -f
📦 七、总结
| 优势 | 描述 |
|---|---|
| 高效 | 提交即构建，无需人工 |
| 安全 | 权限可控，免上传打包文件 |
| 稳定 | 保证构建环境一致性 |
| 易用 | GitHub Actions、Netlify 配置简单 |
📁 示例项目推荐
- Vue3 + Vite + GitHub Actions + Netlify：vite-vue3-template
- CI/CD 教程合集：awesome-actions
如果你希望结合 企业私有部署（如 Jenkins + Nginx） 或 自动化测试流程整合，也可以继续扩展，比如：
- 自动触发后端接口通知
- 前后端联动构建
- 自动化 UI 测试（Cypress、Playwright）
📌 前端项目要实现真正高效上线，一套合理的 CI/CD 流程是不可或缺的，建议每个团队早早建立起来！