saas

GitHub Actions Vercel 部署完全指南：预览环境、生产发布、多项目与回滚策略

用 GitHub Actions 实现 Next.js/React 项目的自动化部署：PR 自动创建预览环境（Preview Deployment）、合并到 main 自动发布生产环境、多项目管理、部署回滚、自动评论、环境保护（Environment Protection）和审计日志配置。

Leeting Yan 2025-11-23 2 分钟阅读 635 字

Vercel 自带 Git 集成，但在复杂场景下仍需 GitHub Actions：多项目 monorepo、自定义构建步骤、私有依赖、环境保护规则、以及需要在部署前执行额外检查（安全扫描、代码生成等）。本文提供完整的 Vercel + GitHub Actions 部署方案。

一、基础方案：Vercel CLI

# .github/workflows/deploy.yml
name: Deploy to Vercel

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

env:
  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

jobs:
  deploy-preview:
    runs-on: ubuntu-latest
    if: github.event_name == 'pull_request'
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm install --global vercel@latest
      - run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
      - run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
      - id: deploy
        run: echo "url=$(vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT

      - name: Comment Preview URL
        uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `🚀 Preview deployed: ${{ steps.deploy.outputs.url }}`
            })

  deploy-production:
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    environment:
      name: Production
      url: ${{ steps.deploy.outputs.url }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm install --global vercel@latest
      - run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - id: deploy
        run: echo "url=$(vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT

二、多项目 Monorepo 部署

jobs:
  deploy-web:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm install --global vercel@latest
      - working-directory: ./apps/web
        run: |
          vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
          vercel build --token=${{ secrets.VERCEL_TOKEN }}
          vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

  deploy-admin:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - working-directory: ./apps/admin
        run: |
          vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
          vercel build --token=${{ secrets.VERCEL_TOKEN }}
          vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

三、部署环境保护（Environment Protection）

jobs:
  deploy-production:
    environment:
      name: Production
      url: ${{ steps.deploy.outputs.url }}
    steps:
      - name: Deploy
        run: vercel --prod --token=${{ secrets.VERCEL_TOKEN }}

配置环境保护规则：

GitHub Repo → Settings → Environments → New environment
Name: Production
Protection rules：
- Required reviewers: 1（至少 1 人审批）
- Wait timer: 5 分钟（延迟部署）
- Deployment branches: main

四、回滚策略

jobs:
  rollback:
    runs-on: ubuntu-latest
    if: github.event_name == 'workflow_dispatch'
    steps:
      - uses: actions/checkout@v4
        with:
          ref: ${{ github.event.inputs.commit_sha }}
      - run: npm install --global vercel@latest
      - run: vercel --prod --token=${{ secrets.VERCEL_TOKEN }}

触发方式：GitHub Actions → Run workflow → 输入 commit SHA。

五、Secrets 配置清单

Secret	来源	说明
`VERCEL_TOKEN`	Vercel Settings → Tokens	个人访问令牌
`VERCEL_ORG_ID`	Vercel Project → Settings → General	组织 ID
`VERCEL_PROJECT_ID`	Vercel Project → Settings → General	项目 ID

探索更多技术文章

浏览归档，发现更多关于系统设计、工具链和工程实践的内容。

全部文章返回首页