CI 和 CD（持续集成 & 持续交付/持续部署）

[一、CI/CD 解读](#一、CI/CD 解读)
- 1、CI（持续集成）
- [2、CD（持续交付 / 持续部署）](#2、CD（持续交付 / 持续部署）)
- - [（1）、Continuous Delivery（持续交付）](#（1）、Continuous Delivery（持续交付）)
  - [（2）、Continuous Deployment（持续部署）](#（2）、Continuous Deployment（持续部署）)
[二、为什么所有公司都需要 CI/CD？](#二、为什么所有公司都需要 CI/CD？)
[三、常用的 CI/CD 工具](#三、常用的 CI/CD 工具)
[四、前端与 CI/CD 的情缘](#四、前端与 CI/CD 的情缘)
- [1、前端在真实工作中的 CI/CD 流程（示例）](#1、前端在真实工作中的 CI/CD 流程（示例）)
- [2、前端必须掌握的 CI/CD 能力（最核心 4 项）](#2、前端必须掌握的 CI/CD 能力（最核心 4 项）)
- - [（1）、自动构建（build automation）](#（1）、自动构建（build automation）)
  - [（2）、自动部署前端静态产物到服务器 / CDN](#（2）、自动部署前端静态产物到服务器 / CDN)
  - （3）、版本回滚（Rollback）
  - （4）、环境管理（ENV）
- [3、前端最常用的 6 大 CI/CD 工具（按使用频率排序）](#3、前端最常用的 6 大 CI/CD 工具（按使用频率排序）)
- - [（1）、GitHub Actions（第一名：前端必须会）](#（1）、GitHub Actions（第一名：前端必须会）)
  - [（2）、Vercel（第二名：Next.js 必会）](#（2）、Vercel（第二名：Next.js 必会）)
  - （3）、Netlify（第三名：静态站点神器）
  - （4）、Jenkins（传统企业最常见，需会基础）
  - [（5）、GitLab CI（GitLab 用户必会）](#（5）、GitLab CI（GitLab 用户必会）)
  - （6）、Docker（部署的核心配套）
- [4、前端开发者必须掌握的 CI/CD 实战技能清单](#4、前端开发者必须掌握的 CI/CD 实战技能清单)
- - （1）、自动构建流程
  - （2）、自动部署（不同场景）
  - - [①、部署 SPA 到 Nginx](#①、部署 SPA 到 Nginx)
    - [②、Node 服务自动部署（Express/Koa）](#②、Node 服务自动部署（Express/Koa）)
    - [③、Next.js 直接用 Vercel（最简单）](#③、Next.js 直接用 Vercel（最简单）)
  - （3）、自动测试（可选但推荐）
  - [（4）、自动 Lint / 格式化](#（4）、自动 Lint / 格式化)
  - （5）、环境隔离（最重要）
- [5、行业里前端最常用的 CI/CD 实战方案（务必掌握）](#5、行业里前端最常用的 CI/CD 实战方案（务必掌握）)
- - [（1）、Vue/React 项目自动部署到服务器（主流）](#（1）、Vue/React 项目自动部署到服务器（主流）)
  - [（2）、Next.js / Nuxt SSR 自动部署（普及率高）](#（2）、Next.js / Nuxt SSR 自动部署（普及率高）)
  - [（3）、Node 后端服务自动部署](#（3）、Node 后端服务自动部署)
  - [（4）、自动构建 AI 应用（OpenAI/DeepSeek 接口）](#（4）、自动构建 AI 应用（OpenAI/DeepSeek 接口）)
  - [（5）、前端静态网站自动发布到 OSS / CDN](#（5）、前端静态网站自动发布到 OSS / CDN)
- [6、前端 CI/CD 技能图谱（2025 最推荐学习路径）](#6、前端 CI/CD 技能图谱（2025 最推荐学习路径）)

一、CI/CD 解读

CI（Continuous Integration）持续集成：
- 每次提交代码时自动构建 + 自动测试，确保"代码随时可运行"。
CD（Continuous Delivery / Continuous Deployment）持续交付/部署：
- 代码通过测试后自动部署到服务器（测试环境或生产环境）。

作用：让代码上线过程无需手工操作，全自动化。

1、CI（持续集成）

持续集成 = 自动把代码集成到主分支，并自动验证是否能正常工作。

CI 的自动化一般会做：

拉取最新代码
安装依赖
打包/构建
自动化测试（如 Jest、Vitest）
代码质量检查（ESLint、Prettier）
给出结果（通过 / 失败）

前端项目中的真实例子：

bash 复制代码

git push → GitHub Action 自动跑
    → npm install
    → npm run build
    → npm run test
    → 通过则 merge，否则失败

CI 保证：代码不崩、能编译、基本逻辑 OK。

2、CD（持续交付 / 持续部署）

CD 有两个含义，你要区分：

Continuous Delivery（持续交付）
Continuous Deployment（持续部署）

（1）、Continuous Delivery（持续交付）

构建 + 测试都自动完成，但部署这一步仍需 "人工确认"。

流程：

bash 复制代码

CI 通过 → 自动生成 build → 运维点一下 "Deploy"

适用于对生产环境谨慎的公司。

（2）、Continuous Deployment（持续部署）

完全自动部署，不需要人工点按钮。

流程：

bash 复制代码

CI 通过 → 自动部署 → 线上立即更新

适用于：

日更型产品
SaaS
微服务
内部系统

例如：

bash 复制代码

git push → 自动构建 → 自动部署到 Vercel / Render / 自家服务器

二、为什么所有公司都需要 CI/CD？

原因很简单：

提高效率
- 不用开发、运维来回发包上传服务器。
减少人为错误
- 手动复制文件、打包、改配置特别容易出错。
保证线上质量
- 自动测试可以阻止 Bug 上线。
团队协作更顺畅
- 多人同时开发不会互相覆盖。
自动可回滚
- CI/CD 平台都支持历史版本随时恢复。

三、常用的 CI/CD 工具

GitHub 用户最常见：

GitHub Actions（前端和后端最主流 ⭐️）
GitLab 用户
GitLab CI

公司内部常见：

Jenkins（最古老、最稳定）
Drone
Azure DevOps
GitHub Enterprise

前端项目常见的无服务器部署：

Vercel（自动部署，支持 Next.js）
Netlify
Cloudflare Pages

四、前端与 CI/CD 的情缘

前端应该学 CI/CD 吗？

强烈建议学，因为你未来随时会遇到：

React / Next.js / Vue 项目自动部署

Docker 化部署

做公司内部系统（BFF / Node 服务）

小程序 + 后端一起自动构建

代码 push 后自动上线

CI/CD 已经是前端的 "标配技能"。

1、前端在真实工作中的 CI/CD 流程（示例）

以前：

开发者：npm run build
开发者：打包文件传给运维
运维：手动上传服务器

现在（CI/CD）：

bash 复制代码

git push →
GitHub Actions 自动运行 →
自动构建 →
自动测试 →
自动部署到线上（如 Vercel / Docker / k8s）

开发者只要 push，不用做任何其他操作。

2、前端必须掌握的 CI/CD 能力（最核心 4 项）

自动构建（build automation）
自动部署前端静态产物到服务器 / CDN
版本回滚（Rollback）
环境管理（ENV）

（1）、自动构建（build automation）

提交代码后自动执行：

安装依赖（npm install）
构建（npm run build）
测试（npm run test）
Lint（eslint、prettier）

你必须会写 GitHub Actions / GitLab CI / Jenkins 的构建配置文件。

（2）、自动部署前端静态产物到服务器 / CDN

不同框架的典型部署场景：

前端框架	通常部署方式
Vue、React SPA	Nginx 容器 / OSS / CDN
Next.js / Nuxt SSR	Vercel / Node Server / Docker
Astro / SSG	OSS / CDN
Node BFF（Express）	Docker + Nginx

你必须会：

自动上传构建产物到服务器（如 scp / rsync）
自动产出 Docker 镜像并推到 registry
自动重启服务（PM2 / Docker）

（3）、版本回滚（Rollback）

CI/CD 必须具备：

随时回退到上一版本（Vercel、Netlify、Jenkins、Docker）
灰度发布/蓝绿发布（进阶技能）

（4）、环境管理（ENV）

每个 CI/CD 都涉及多环境：

dev
test
staging
production

前端必须会实现：

.env.development
.env.production
.env.staging

并在构建阶段注入。

3、前端最常用的 6 大 CI/CD 工具（按使用频率排序）

GitHub Actions（第一名：前端必须会）
Vercel（第二名：Next.js 必会）
Netlify（第三名：静态站点神器）
Jenkins（传统企业最常见，需会基础）
GitLab CI（GitLab 用户必会）
Docker（部署的核心配套）

（1）、GitHub Actions（第一名：前端必须会）

如果你在 GitHub：必学。

优势：

免费、强大、社区巨大
配置简单（yml）
和 Vercel / Docker / Cloudflare 无缝集成
前端项目教程最丰富

前端使用频率最高

（2）、Vercel（第二名：Next.js 必会）

适用：

Next.js（最佳）
React / Vue / SvelteKit / Astro

特点：

CI/CD 自动化（push = 自动部署）
一键回滚
Preview / Staging 环境自动生成

前端 SSR 最常用的零配置 CI/CD。

（3）、Netlify（第三名：静态站点神器）

适合：

Vue / React SPA
Astro / SSG
简单 Node 函数

优点：

自动构建部署
零服务器
免费额度多

（4）、Jenkins（传统企业最常见，需会基础）

如果你进大厂 / 传统企业：

70% 使用 Jenkins

要掌握：

管道（pipeline）
SSH 部署产物
自动跑测试
触发器（push / merge request）

（5）、GitLab CI（GitLab 用户必会）

如果公司使用 GitLab：

你只需学习 .gitlab-ci.yml 即可完成自动构建和部署

（6）、Docker（部署的核心配套）

Docker 本身不是 CI/CD，但所有现代 CI/CD 环境都依赖它：

前端 Docker 镜像构建
Node BFF 服务镜像构建
配合 Kubernetes 部署

前端必须至少会写：

Dockerfile（前端）
Dockerfile（Node BFF）
docker-compose.yaml

4、前端开发者必须掌握的 CI/CD 实战技能清单

自动构建流程
自动部署（不同场景）
自动测试（可选但推荐）
自动 Lint / 格式化
环境隔离（最重要）

（1）、自动构建流程

你必须能写出这样的 GitHub Actions：

yml 复制代码

name: Build
on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm install
      - run: npm run build

（2）、自动部署（不同场景）

①、部署 SPA 到 Nginx

yml 复制代码

run: npm run build
run: scp -r dist/* root@server:/var/www/html

②、Node 服务自动部署（Express/Koa）

yml 复制代码

docker build -t myapp:latest .
docker push registry/myapp
ssh root@server "docker pull registry/myapp && docker restart myapp"

③、Next.js 直接用 Vercel（最简单）

bash 复制代码

git push → 自动部署 → 自动预览 → 一键回滚

（3）、自动测试（可选但推荐）

Vitest
Jest
Playwright（E2E）

前端用得最多的是：

bash 复制代码

npm run test

CI/CD 自动执行。

（4）、自动 Lint / 格式化

在 CI 阶段自动检查：

bash 复制代码

npm run lint
npm run lint:fix

（5）、环境隔离（最重要）

确保：

bash 复制代码

dev → 测试服务器
prod → 正式环境

CI 注入 ENV：

yml 复制代码

env:
  NODE_ENV: production
  API_URL: ${{ secrets.API_URL }}

5、行业里前端最常用的 CI/CD 实战方案（务必掌握）

（1）、Vue/React 项目自动部署到服务器（主流）

技术：

GitHub Actions
Nginx
scp / rsync

（2）、Next.js / Nuxt SSR 自动部署（普及率高）

技术：

Vercel / Netlify
或 Docker + PM2 + Nginx

（3）、Node 后端服务自动部署

技术：

Docker
Jenkins
GitHub Actions

（4）、自动构建 AI 应用（OpenAI/DeepSeek 接口）

技术：

Node 服务 Docker 化
自动构建/部署到云服务器

（5）、前端静态网站自动发布到 OSS / CDN

典型存储：

阿里云 OSS
腾讯 COS
Cloudflare R2

6、前端 CI/CD 技能图谱（2025 最推荐学习路径）

（1）、必会（最重要）

GitHub Actions（写 workflow）
Nginx + 静态部署
SSH 自动上传构建产物
自动构建 Node 项目

（2）、强烈推荐

Docker（部署 Node 服务）
Vercel / Netlify（SSR 项目）

（3）、进阶

GitLab-CI
Jenkins pipeline
Docker Compose
灰度发布 / Canary / Blue-Green（企业级）

CI 和 CD（持续集成 & 持续交付/持续部署）

目录

一、CI/CD 解读

1、CI（持续集成）

2、CD（持续交付 / 持续部署）

（1）、Continuous Delivery（持续交付）

（2）、Continuous Deployment（持续部署）

二、为什么所有公司都需要 CI/CD？

三、常用的 CI/CD 工具

四、前端与 CI/CD 的情缘

1、前端在真实工作中的 CI/CD 流程（示例）

2、前端必须掌握的 CI/CD 能力（最核心 4 项）

（1）、自动构建（build automation）

（2）、自动部署前端静态产物到服务器 / CDN

（3）、版本回滚（Rollback）

（4）、环境管理（ENV）

3、前端最常用的 6 大 CI/CD 工具（按使用频率排序）

（1）、GitHub Actions（第一名：前端必须会）

（2）、Vercel（第二名：Next.js 必会）

（3）、Netlify（第三名：静态站点神器）

（4）、Jenkins（传统企业最常见，需会基础）

（5）、GitLab CI（GitLab 用户必会）

（6）、Docker（部署的核心配套）

4、前端开发者必须掌握的 CI/CD 实战技能清单

（1）、自动构建流程

（2）、自动部署（不同场景）

①、部署 SPA 到 Nginx

②、Node 服务自动部署（Express/Koa）

③、Next.js 直接用 Vercel（最简单）

（3）、自动测试（可选但推荐）

（4）、自动 Lint / 格式化

（5）、环境隔离（最重要）

5、行业里前端最常用的 CI/CD 实战方案（务必掌握）

（1）、Vue/React 项目自动部署到服务器（主流）

（2）、Next.js / Nuxt SSR 自动部署（普及率高）

（3）、Node 后端服务自动部署

（4）、自动构建 AI 应用（OpenAI/DeepSeek 接口）

（5）、前端静态网站自动发布到 OSS / CDN

6、前端 CI/CD 技能图谱（2025 最推荐学习路径）

（1）、必会（最重要）

（2）、强烈推荐

（3）、进阶