React+Firebase项目测试/生产环境分离及自动化部署方案咨询

我完全懂你手动切换配置文件的痛苦——重复操作不仅容易出错，还拖慢部署节奏。下面是一套基于Firebase官方工具的完整方案，帮你搞定测试/生产环境的自动化部署和配置管理：

1. 用Firebase CLI管理多项目环境 #

Firebase CLI本身就支持关联多个项目到本地，不用再手动修改代码里的配置：

• 先确保你已经安装Firebase CLI：npm install -g firebase-tools
• 登录你的Firebase账号：firebase login
• 如果还没初始化Firebase项目，在根目录执行：firebase init，根据提示选择Hosting等你需要的功能
• 添加测试环境的Firebase项目：firebase use --add，然后选择你的测试项目，给它起个别名比如test
• 同样添加生产项目，别名设为prod
• 现在只需执行firebase use test或firebase use prod就能快速切换当前关联的项目，全程不用碰代码！

2. 动态加载Firebase配置（告别硬编码切换） #

接下来让React自动根据环境加载对应配置，推荐两种方式：

方式一：环境变量（最常用、最简单） #

React原生支持通过.env文件管理环境变量，步骤如下：

• 在项目根目录创建两个文件：.env.development（对应本地开发/测试环境）和.env.production（对应生产环境）
  • .env.development内容示例：

    REACT_APP_FIREBASE_API_KEY=XXX
    REACT_APP_FIREBASE_AUTH_DOMAIN=domaintest.firebaseapp.com
    REACT_APP_FIREBASE_DATABASE_URL=https://domaintest.firebaseio.com
    REACT_APP_FIREBASE_PROJECT_ID=domain-test
    REACT_APP_FIREBASE_STORAGE_BUCKET=domaintest.appspot.com
    REACT_APP_FIREBASE_MESSAGING_SENDER_ID=000
    

  • .env.production内容示例：

    REACT_APP_FIREBASE_API_KEY=YYY
    REACT_APP_FIREBASE_AUTH_DOMAIN=domain.firebaseapp.com
    REACT_APP_FIREBASE_DATABASE_URL=https://domain.firebaseio.com
    REACT_APP_FIREBASE_PROJECT_ID=domain
    REACT_APP_FIREBASE_STORAGE_BUCKET=domain.appspot.com
    REACT_APP_FIREBASE_MESSAGING_SENDER_ID=111
    

• 在Firebase初始化文件中读取这些变量：

  const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  };
  
  firebase.initializeApp(firebaseConfig);
  

• React会自动识别NODE_ENV：本地开发时自动加载.env.development，执行npm run build时自动加载.env.production

方式二：Firebase Remote Config（适合动态调整配置场景） #

如果你的配置需要在不重新部署的情况下修改，可以用Firebase Remote Config：

• 在测试和生产的Firebase控制台分别配置对应的参数
• 在React应用中先初始化Remote Config，拉取对应环境的配置后再初始化Firebase
• 这种方式适合复杂场景，大部分情况下环境变量就足够满足需求

3. 一键部署脚本（简化部署操作） #

在package.json中添加部署脚本，不用每次敲冗长的命令：

{
  "scripts": {
    "deploy:test": "firebase use test && npm run build && firebase deploy",
    "deploy:prod": "firebase use prod && npm run build && firebase deploy"
  }
}

现在只需执行npm run deploy:test就能一键部署到测试环境，npm run deploy:prod部署到生产环境，全程不用手动改配置！

4. 可选：CI/CD集成（彻底解放双手） #

如果想实现代码提交后自动部署，可以结合GitHub Actions：

• 在项目根目录创建.github/workflows/firebase-deploy.yml文件
• 配置示例如下（需要在GitHub Secrets中添加对应的Firebase服务账号密钥）：

  name: Deploy to Firebase
  on:
    push:
      branches:
        - main # 生产环境分支
        - develop # 测试环境分支
  
  jobs:
    deploy:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v3
        - name: Setup Node.js
          uses: actions/setup-node@v3
          with:
            node-version: '18'
        - name: Install dependencies
          run: npm install
        - name: Build project
          run: npm run build
        - name: Deploy to Firebase Test
          if: github.ref == 'refs/heads/develop'
          uses: FirebaseExtended/action-hosting-deploy@v0
          with:
            repoToken: ${{ secrets.GITHUB_TOKEN }}
            firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_DOMAIN_TEST }}
            projectId: domain-test
            channelId: live
        - name: Deploy to Firebase Production
          if: github.ref == 'refs/heads/main'
          uses: FirebaseExtended/action-hosting-deploy@v0
          with:
            repoToken: ${{ secrets.GITHUB_TOKEN }}
            firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_DOMAIN }}
            projectId: domain
            channelId: live
  

这样每次推代码到develop分支会自动部署到测试环境，推到main分支自动部署到生产环境，彻底告别手动操作！

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