网站 CI/CD 流水线搭建指南：自动化构建、测试与部署

CI/CD（持续集成/持续部署）是现代网站开发的标准实践。每次代码提交自动触发构建、测试和部署流程。

CI/CD 的核心价值

环节 传统方式 CI/CD
构建 本地手动构建 自动触发
测试 可能遗漏 每次必跑
部署 SSH 手动上传 自动化部署
回滚 操作复杂 一键回滚

GitHub Actions 工作流

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

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

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

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Lint
        run: npm run lint

      - name: Run tests
        run: npm test

      - name: Build
        run: npm run build

      - name: Upload build artifacts
        uses: actions/upload-artifact@v4
        with:
          name: build
          path: dist/

  deploy:
    needs: build-and-test
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest

    steps:
      - name: Download build
        uses: actions/download-artifact@v4
        with:
          name: build
          path: dist/

      - name: Deploy to server
        uses: easingthemes/ssh-deploy@main
        with:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          SOURCE: "dist/"
          REMOTE_HOST: ${{ secrets.DEPLOY_HOST }}
          REMOTE_USER: ${{ secrets.DEPLOY_USER }}
          TARGET: /var/www/example.com/

前端项目 CI/CD 要点

构建缓存

- name: Cache dependencies
  uses: actions/cache@v4
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}

环境变量管理

使用 GitHub Secrets 管理敏感信息，不同环境（dev/staging/prod）可以配置不同变量。

部署策略

策略 说明 适用场景
直接部署 构建后直接上传服务器 小型网站
蓝绿部署 新旧版本同时运行，切换流量 高可用要求
滚动更新 逐步替换实例 集群环境
金丝雀发布 先让部分用户体验新版 大型产品

16IDC 观察

CI/CD 的收益在小项目上可能不明显，但一旦建立好流程，每次发布的信心和质量都会有显著提升。建议从简单的 GitHub Actions 工作流开始，逐步加入测试、静态分析和自动回滚。