如何为不同Firebase环境定制React应用部署（含云函数与规则）

嘿，这个场景我在实际项目里折腾过好几次，给你分享几个靠谱的解决方案：

Firebase CLI本身就支持指定云函数源目录，根本不需要每次把代码移动到默认的functions/文件夹。具体怎么做呢？

首先建议你调整项目结构，给每个环境单独建云函数目录：

your-react-firebase-app/
├── functions-staging/  # 预发布环境的云函数代码
│   ├── index.js
│   ├── package.json
│   └── utils/          # 该环境专属的工具函数
├── functions-prod/     # 生产环境的云函数代码
│   ├── index.js
│   ├── package.json
│   └── utils/
├── functions-shared/   # 多环境共享的通用代码（可选）
│   └── common-helpers.js
├── src/                # React前端代码
└── firebase.json

部署的时候，只需要通过--source参数指定对应环境的云函数目录，再加上--project指定目标Firebase项目ID即可：

• 部署到预发布环境：

  firebase deploy --only functions --project your-staging-project-id --source functions-staging
  

• 部署到生产环境：

  firebase deploy --only functions --project your-prod-project-id --source functions-prod
  

如果有通用代码要复用，直接在每个环境的云函数里通过相对路径引用即可，比如在functions-staging/index.js里：

const commonHelpers = require('../../functions-shared/common-helpers.js');

这里有两种常用的方式，看你更偏好哪种：

方案1：为每个环境单独维护规则文件 #

直接创建不同的规则文件，比如firestore.rules.staging和firestore.rules.prod，分别编写对应环境的规则逻辑（比如预发布环境允许测试账号更多权限，生产环境严格控制）。

部署规则时，用--rules参数指定对应文件：

• 部署预发布规则：

  firebase deploy --only firestore:rules --project your-staging-project-id --rules firestore.rules.staging
  

• 部署生产规则：

  firebase deploy --only firestore:rules --project your-prod-project-id --rules firestore.rules.prod
  

方案2：用模板+变量替换维护统一规则文件 #

如果大部分规则逻辑是通用的，只有少量差异（比如环境标识、权限阈值），可以维护一个模板文件firestore.rules.template，里面用占位符标记差异部分：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // 通用规则
    match /users/{userId} {
      allow read: if request.auth != null;
      // 环境差异部分
      allow write: if request.auth != null && ${ENV} == 'staging';
    }
  }
}

然后写个简单的Node脚本或者用sed命令，在部署前根据目标环境替换占位符，生成对应环境的规则文件：

// replace-env.js
const fs = require('fs');
const env = process.env.TARGET_ENV; // 比如 staging 或 prod
const template = fs.readFileSync('./firestore.rules.template', 'utf8');
const rules = template.replace('${ENV}', `'${env}'`);
fs.writeFileSync(`./firestore.rules.${env}`, rules);

运行脚本后再部署，这样能减少重复代码的维护成本。

以GitHub Actions为例，给你梳理下核心步骤：

1. 在GitHub Secrets里存储各环境的Firebase服务账号密钥

   • 分别从Firebase控制台的「项目设置→服务账号」下载staging和prod项目的密钥JSON文件
   • 在GitHub仓库的「Settings→Secrets and variables→Actions」里添加两个密钥：FIREBASE_SERVICE_ACCOUNT_STAGING和FIREBASE_SERVICE_ACCOUNT_PROD，值分别对应两个JSON文件的内容

2. 编写GitHub Actions工作流文件
   在.github/workflows/deploy.yml里配置触发条件和部署步骤：

   name: Deploy to Firebase Environments
   on:
     push:
       branches:
         - develop # 推送到develop分支时部署到staging
         - main    # 推送到main分支时部署到prod
   jobs:
     deploy-staging:
       if: github.ref == 'refs/heads/develop'
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v4
         - name: Setup Node.js
           uses: actions/setup-node@v4
           with:
             node-version: 20
         - name: Install Firebase CLI
           run: npm install -g firebase-tools
         - name: Deploy to Staging
           env:
             FIREBASE_SERVICE_ACCOUNT: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_STAGING }}
           run: |
             echo "$FIREBASE_SERVICE_ACCOUNT" > firebase-staging.json
             firebase login:ci --token $(cat firebase-staging.json)
             firebase use your-staging-project-id
             firebase deploy --only functions,firestore:rules --source functions-staging --rules firestore.rules.staging
   
     deploy-prod:
       if: github.ref == 'refs/heads/main'
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v4
         - name: Setup Node.js
           uses: actions/setup-node@v4
           with:
             node-version: 20
         - name: Install Firebase CLI
           run: npm install -g firebase-tools
         - name: Deploy to Production
           env:
             FIREBASE_SERVICE_ACCOUNT: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_PROD }}
           run: |
             echo "$FIREBASE_SERVICE_ACCOUNT" > firebase-prod.json
             firebase login:ci --token $(cat firebase-prod.json)
             firebase use your-prod-project-id
             firebase deploy --only functions,firestore:rules --source functions-prod --rules firestore.rules.prod
   

这样每次推送到对应分支，就能自动完成对应环境的云函数和Firestore规则部署了。

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