如何为Netlify上的React网站配置多阶段部署流程？

方案一：Netlify原生分支部署（零额外配置，快速上手） #

直接用Netlify自带的分支规则就能实现多环境部署，不用写复杂的工作流：

• 登录Netlify后台，进入你的React站点，找到部署→部署分支
  • 把main/master分支设为生产分支：推送这个分支自动部署到正式生产环境
  • 添加测试分支规则：比如指定staging/develop分支为测试分支，推送后自动部署到独立的测试环境（Netlify会自动生成测试域名）
• 日常工作流程：
  1. 本地改完代码，推送到测试分支，Netlify自动部署测试环境，先验证功能没问题
  2. 测试通过后，把测试分支合并到生产分支，自动触发生产环境部署
  3. 如果想手动选环境部署，直接去Netlify后台的部署页面，选对应分支手动触发部署就行

方案二：GitHub Action手动触发部署（灵活选择环境） #

要是想在GitHub上直接选部署到测试还是生产，用GitHub Action配合Netlify就能实现：

1. 准备Netlify认证信息 #

• 去Netlify后台，进入站点设置→应用→OAuth应用，生成NETLIFY_AUTH_TOKEN
• 复制站点ID：在站点设置→通用→站点信息里找SITE_ID
• 把这两个值加到GitHub仓库的Settings→Secrets and variables→Actions里，分别命名为NETLIFY_AUTH_TOKEN和NETLIFY_SITE_ID

2. 创建GitHub Action工作流文件 #

在项目根目录新建.github/workflows/deploy.yml，粘贴以下内容：

name: Netlify多环境部署
on:
  workflow_dispatch:
    inputs:
      environment:
        description: '选择部署环境'
        required: true
        type: choice
        options:
          - staging
          - production

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 拉取代码
        uses: actions/checkout@v4

      - name: 设置Node.js环境
        uses: actions/setup-node@v4
        with:
          node-version: '20' # 换成你React项目用的Node版本
          cache: 'npm'

      - name: 安装依赖
        run: npm ci

      - name: 构建项目
        run: npm run build
        env:
          REACT_APP_ENV: ${{ github.event.inputs.environment }} # 给React传环境变量，按需调整

      - name: 部署到Netlify
        uses: netlify/actions/cli@master
        with:
          args: deploy --prod=${{ github.event.inputs.environment == 'production' }} --site ${{ secrets.NETLIFY_SITE_ID }}
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

3. 使用方式 #

1. 本地改完代码，推送到GitHub仓库的任意分支（比如功能分支或主分支）
2. 打开GitHub仓库的Actions页面，找到Netlify多环境部署工作流，点击Run workflow
3. 在弹出的选项里选staging（测试）或production（生产），点Run workflow就触发部署了
4. 部署完成后，Netlify会返回对应环境的域名，直接验证就行

扩展到三阶段部署 #

如果需要开发/测试/生产三个阶段，只需在工作流的options里加个development选项，同时在构建步骤对应调整环境变量，Netlify会为每个部署生成独立的预览域名，后台能统一管理。

内容的提问来源于stack exchange，提问作者Gexedo