CI/CD 实战全解析：原理、流程与落地探索

前端 CI/CD 实战全解析：从原理到落地

引入 CI/CD 流程是现代前端工程化的重要实践。它不仅让部署自动化、构建高效，还为多人协作提供质量保障、减少冲突。没有它，团队只能依赖人工操作完成测试、构建、部署，效率低且容易出错。

为什么需要 CI/CD？

在没引入 CI/CD 之前，前端发布流程通常是这样的：

拉代码 → 安装依赖 → 构建打包 → 手动部署；

这种"手动发布流"痛点明显：

构建环境不一致，node_modules 不可控；
没有 Lint / Test，质量靠人品；
多人协作冲突频发；
上线出错无法快速回滚、定位。

而引入 CI/CD 后，一切发生了变化：

Push / PR 自动触发 lint、test、build、部署流程；
每个分支都可以自动生成预览环境；
多人协作流程更顺畅，交付质量提升。

CI/CD 典型流程（基于 GitHub Actions）

1. 项目结构（示例）

arduino 复制代码

.github/
  workflows/
    ci.yml
    release.yml
    build.yml
scripts/
  prepare-env.ts
  build-docker.ts

2. 基础 CI 流程

yml 复制代码

# .github/workflows/ci.yml
name: CI

on:
  pull_request:
    branches:
      - 'master'

jobs:
  install:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: '18'

      - name: Cache dependencies
        uses: actions/cache@v3
        with:
          path: node_modules
          key: deps-${{ hashFiles('**/package-lock.json') }}

      - name: Install deps
        run: npm ci

  lint:
    needs: install
    runs-on: ubuntu-latest
    steps:
      - run: npm run lint

  test:
    needs: install
    runs-on: ubuntu-latest
    steps:
      - run: npm run test

  build:
    needs: [lint, test]
    runs-on: ubuntu-latest
    steps:
      - run: npm run build

亮点说明：

分阶段分 job，最大化并行；
缓存 node_modules，大幅提升执行速度；
每个阶段失败都能立刻反馈，防止问题合并。

自动部署 Preview 环境

每次 PR 提交后，自动部署一个临时环境，供测试和产品预览。

yml 复制代码

# .github/workflows/preview.yml
name: Preview Deploy

on:
  pull_request:
    types: [opened, synchronize, reopened]

jobs:
  preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Deploy to Preview
        run: |
          BRANCH="${{ github.head_ref }}"
          DOMAIN=""
          echo "Preview URL: https://$DOMAIN"
          
          # 执行具体部署命令，例如 kubectl apply ...

缓存机制优化构建速度

每次 CI 都是全新环境，为了不重复安装：

yaml 复制代码

- uses: actions/cache@v3
  with:
    path: node_modules
    key: node-modules-${{ hashFiles('package-lock.json') }}

技术内核：

依赖锁定文件（package-lock.json）变化才更新缓存；
可以缓存 webpack 构建缓存 .turbo, .next, dist；

多环境部署与变量注入

yaml 复制代码

# .github/workflows/release.yml

on:
  workflow_dispatch:
    inputs:
      env:
        type: choice
        options: [new-dev, staging, prod]
      service:
        type: string
        description: 服务名称（如 database）

jobs:
  prepare:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Prepare Env
        run: node scripts/prepare-env.ts ${{ inputs.env }}

      - name: Inject Vars
        run: |
          echo "ENV=${{ inputs.env }}" >> $GITHUB_ENV
          echo "SHORT_SHA=${GITHUB_SHA::7}" >> $GITHUB_ENV

应用场景：

镜像 tag：dev_abcd123
日志记录带 SHA，方便排查问题；
自动在 gitops 仓库中更新配置。

构建产物镜像化部署

yml 复制代码

# .github/workflows/build.yml

jobs:
  build-and-push:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Prepare Env
        run: node scripts/prepare-env.ts prod

      - name: Build & Push Docker Image
        run: |
          node scripts/build-docker.ts \
            --service web \
            --env prod \
            --sha ${{ github.sha }}

做 CI/CD 的推荐路径

先做 lint/test 构建流程；
再引入缓存机制和分支预览部署；
最后实现自动化构建镜像 + gitops 更新配置。

CI/CD 不只是一套流程，它是一种"把复杂流程自动化，让团队放心合并代码"的文化。