CI/CD是什么？如何搭建？

一、CI/CD 是什么？

1️⃣ CI（Continuous Integration，持续集成）

核心思想：频繁提交代码 + 自动构建验证

👉 每次你 git push 后，系统会自动做这些事：

安装依赖（npm install）
运行测试（jest / vitest）
代码检查（eslint）
构建项目（npm build）

📌 目的：

👉 尽早发现问题，而不是上线才爆炸

2️⃣ CD（Continuous Delivery / Deployment，持续交付/部署）

分两种：

✔ Continuous Delivery（持续交付）

自动构建完成
需要"手动点击"部署

✔ Continuous Deployment（持续部署）

自动构建 + 自动上线（无人干预）

📌 举个例子：

复制代码

git push → 自动测试 → 自动打包 → 自动发布到服务器

二、CI/CD 整体流程（你项目里的真实流程）

复制代码

开发 → 提交代码 → CI执行 → 构建 → CD部署 → 线上环境

三、常见 CI/CD 工具

你可以选这些：

云平台（推荐简单上手）

GitHub Actions（最简单）
GitLab CI（公司常用）
Jenkins（老牌但复杂）

部署平台

Vercel（前端神器）
Netlify
阿里云 / 腾讯云 / AWS

四、手把手：搭建一个 CI/CD（前端项目）

我用你熟悉的 React 项目 + GitHub Actions 举例（最实用）

🧱 第一步：准备项目

确保你项目可以正常：

复制代码

npm install
npm run build

⚙️ 第二步：创建 CI 配置

在项目根目录创建：

复制代码

.github/workflows/ci.yml

写入：

复制代码

name: CI

on:
  push:
    branches: [ "main" ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: 拉代码
        uses: actions/checkout@v3

      - name: 安装 Node
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: 安装依赖
        run: npm install

      - name: 代码检查
        run: npm run lint

      - name: 构建
        run: npm run build

👉 这一步已经完成 CI

🚀 第三步：加上 CD（自动部署）

方式1：部署到服务器（最通用）

复制代码

- name: 部署到服务器
  uses: appleboy/scp-action@master
  with:
    host: ${{ secrets.SERVER_HOST }}
    username: root
    password: ${{ secrets.SERVER_PASS }}
    source: "build/"
    target: "/var/www/app"

方式2：用 Vercel（推荐你）

直接连接 GitHub：

👉 每次 push 自动部署

📌 优点：

0配置
自动域名
自动 HTTPS

五、你当前技术栈如何落地？

结合你现在做的：

👉 React + Ant Design + Echarts 项目

推荐你这样搭：

⭐ 最简单方案（推荐）

复制代码

GitHub + GitHub Actions + Vercel

流程：

复制代码

push代码 → 自动构建 → 自动部署 → 生成访问链接

⭐ 公司级方案

复制代码

GitLab + GitLab CI + Docker + Nginx

适合：

内网部署
多环境（测试/预发/生产）

六、CI/CD 核心价值（重点）

你一定要理解这几点：

✅ 1. 自动化

不用手动打包上传

✅ 2. 稳定

每次部署流程一致

✅ 3. 快速

几分钟上线

✅ 4. 可追溯

每次发布都有记录

七、给你的进阶建议（结合你背景）

你已经有 7 年经验了，可以往这几个方向升级：

🚀 进阶1：Docker 化

复制代码

构建 → 打包成镜像 → 部署容器

🚀 进阶2：多环境管理

复制代码

dev / test / prod 自动切换

🚀 进阶3：灰度发布

复制代码

新版本先给10%用户