8、前端 CI/CD 流程全解析与实战部署🪜 写在前面前端工程要跑得快、改得稳、发得准，离不开 CI/CD 系统的支

🪜 写在前面

前端工程要跑得快、改得稳、发得准，离不开 CI/CD 系统的支持。一个架构师级别的前端工程，一定具备以下特征：

任何人 clone 下来就能运行
每次 PR/Push 自动测试 + 构建
构建产物自动上传至服务器或 CDN
发布流程支持回滚、版本标识、预发布环境测试

本篇我们将手把手搭建一套完整的前端 CI/CD 工作流，基于 GitHub Actions + Vite + Node 项目实战落地。

🎯 一、什么是 CI/CD？

缩写	含义	作用
CI	Continuous Integration（持续集成）	自动测试、构建、合并代码
CD	Continuous Delivery/Deployment（持续交付/部署）	自动发布到测试或生产环境

🧱 二、CI/CD 工作流全景图

Push → GitHub
    ↓
GitHub Actions 触发流程
    ↓
🔹 安装依赖
🔹 单元测试
🔹 Lint 检查
🔹 构建产物
🔹 上传至服务器/CDN/对象存储

🧰 三、实战项目准备

my-project/
├── .github/workflows/deploy.yml   # CI/CD 流程配置
├── src/
├── vite.config.ts
├── package.json
└── ...

✅ 四、编写 GitHub Actions 工作流配置

✍️ 新建 `.github/workflows/deploy.yml`

name: 前端构建部署

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

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

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

      - name: 📦 安装依赖
        run: npm ci

      - name: ✅ 执行 Lint + Test
        run: |
          npm run lint
          npm run test

      - name: 🛠️ 打包构建产物
        run: npm run build

      - name: 📤 上传构建产物到服务器
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          password: ${{ secrets.SERVER_PASSWORD }}
          source: 'dist/'
          target: '/var/www/my-project'

🔐 五、配置 Secrets 安全信息

进入 GitHub 仓库 → Settings → Secrets → Actions 添加以下环境变量：

Name	用途
`SERVER_HOST`	服务器 IP
`SERVER_USER`	服务器用户
`SERVER_PASSWORD`	服务器密码

建议后续改为 SSH 私钥方式更安全。

🖥️ 六、服务器部署准备（以 Nginx 为例）

sudo apt install nginx
sudo mkdir -p /var/www/my-project

Nginx 配置文件：

server {
  listen 80;
  server_name yourdomain.com;

  location / {
    root /var/www/my-project;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

🌈 七、部署优化点建议

目标	推荐方案
自动回滚	保留上一个版本目录 `dist_bak/`，失败则恢复
多环境部署	使用环境变量 + 多个 workflow（如 dev/staging/prod）
多分支控制	设置 `on.push.branches: [dev]` 限定触发
自动版本标记	使用 `actions/create-release` 自动打 tag

💡 八、扩展：构建 + CDN 静态托管

如使用七牛、阿里云 OSS、Cloudflare R2：

- name: 上传到 OSS
  uses: manyuanrong/setup-ossutil@v2.0
  with:
    endpoint: ${{ secrets.OSS_ENDPOINT }}
    access-key-id: ${{ secrets.OSS_ACCESS_KEY }}
    access-key-secret: ${{ secrets.OSS_SECRET_KEY }}
- run: ossutil cp -r dist/ oss://my-bucket/project/ --force

✅ 九、一键部署体验演示

git push origin main
# 👇 自动触发构建 → 打包 → 上传服务器 → 自动部署

流程运行：

✅ 触发成功
✅ 构建成功
✅ 上传成功
✅ 自动发布完成

📁 十、CI/CD 模板复用建议

建议将 .github/workflows/deploy.yml 抽象为模板，支持参数化：

应用名（APP_NAME）
构建目录（BUILD_PATH）
发布目标（TARGET_PATH）
使用脚手架模板自动注入

搭配脚手架 CLI 一起使用，极大简化配置流程。

🧠 总结一句话

CI/CD 是连接开发与交付的桥梁，架构师应当让“部署”从此不再是“手动上线+微信截图”。

下一篇我们将进入实战高频话题之一： 👉 《前端日志埋点系统的架构设计》

8、前端 CI/CD 流程全解析与实战部署