使用React、Firebase和GitHub Action部署时如何隐藏API密钥

首先明确核心前提：

所有打包到前端静态资源中的变量最终都可以被用户通过浏览器开发者工具获取，任何直接注入到React客户端代码中的密钥都无法实现绝对隐藏。如果你的密钥属于敏感、可被滥用的类型（比如付费第三方API密钥、后端操作权限密钥），绝对不要直接传入前端代码。

场景1：密钥为Firebase客户端配置密钥 #

如果你要隐藏的是Firebase初始化配置firebaseConfig中的字段，不需要做额外处理：这些字段本身就是设计为公开的，你只需要在Firebase控制台配置好对应服务的安全规则（比如Firestore、Storage的访问规则）、做好域名白名单限制，就不会出现安全风险。

场景2：密钥为调用第三方服务的私有敏感密钥 #

这种情况推荐使用Firebase云函数做代理，完全避免密钥暴露到前端：

• 登录Firebase控制台，进入Secret Manager服务，将你的私有API密钥存储为机密，不要提交到任何代码文件中
• 编写Firebase Cloud Function，在云函数内部读取Secret Manager中存储的密钥，发起第三方API请求，处理返回结果后回传给前端
• React前端只需要调用该云函数的公开接口即可，不需要携带任何私有密钥，你可以额外搭配Firebase Auth做接口访问权限校验，避免接口被恶意滥用
• 云函数的部署可以和你的GitHub Action流程集成，不需要手动操作

场景3：非敏感密钥的轻量存储方案 #

如果你的密钥不属于敏感类型，接受前端可查的风险，可以使用GitHub Secrets + React环境变量的方案，避免密钥提交到GitHub代码库：

1. 打开GitHub对应代码库的Settings > Secrets and variables > Actions，点击New repository secret，将你的API密钥存储为仓库机密，命名必须以REACT_APP_开头（比如REACT_APP_MY_PUBLIC_KEY），这是React CRA环境识别自定义环境变量的强制要求
2. 修改你的GitHub Action workflow配置文件，在构建React应用的步骤中注入环境变量，示例配置：

jobs:
  deploy-to-firebase:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm install
      - name: Build React app
        env:
          # 将GitHub Secrets中的密钥注入到构建环境
          REACT_APP_MY_PUBLIC_KEY: ${{ secrets.REACT_APP_MY_PUBLIC_KEY }}
        run: npm run build
      - name: Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          channelId: live
          projectId: 你的Firebase项目ID

3. React代码中直接通过process.env.REACT_APP_MY_PUBLIC_KEY即可访问该变量，本地开发时可以在项目根目录创建.env.local文件存储该密钥，记得把.env.*加入.gitignore避免提交到代码库。

内容的提问来源于stack exchange，提问作者Austin Maxwell Edger