将环境变量部署到 Firebase 托管

Posted 2023-03-28

【中文标题】将环境变量部署到 Firebase 托管

【英文标题】：Deploy environment variables to Firebase hosting

【发布时间】：2020-07-02 08:49:25

【问题描述】：

我在 React 中使用 Firebase，并且在初始化 Firebase 时，我使用从带有 dotenv 的 .env 文件中获取的环境变量。我想构建我的 React 应用并将其部署到 Firebase 托管，我将 GitHub Actions 与以下 .yml 工作流文件一起使用：

name: Deploy
on:
  push:
    branches:
      - master

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: public
          path: public
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: public
      - name: Deploy
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: $ secrets.FIREBASE_TOKEN 

但是，我的构建步骤失败（即npm run build），因为找不到环境变量。如果我对值进行硬编码而不是使用我的环境变量，则工作流程是成功的。

我是否需要将我的环境变量添加到 GitHub 机密中，类似于我在部署步骤中添加 FIREBASE_TOKEN 的方式，并将它们添加到工作流中，如下所示：

name: Deploy
on:
  push:
    branches:
      - master

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
        env:
          FIREBASE_API_KEY: $ secrets.FIREBASE_API_KEY 
          FIREBASE_AUTH_DOMAIN: $ secrets.FIREBASE_AUTH_DOMAIN 
          FIREBASE_DATABASE_URL: $ secrets.FIREBASE_DATABASE_URL 
          FIREBASE_PROJECT_ID: $ secrets.FIREBASE_PROJECT_ID 
          FIREBASE_STORAGE_BUCKET: $ secrets.FIREBASE_STORAGE_BUCKET 
          FIREBASE_MESSAGING_SENDER_ID: $ secrets.FIREBASE_MESSAGING_SENDER_ID 
          FIREBASE_APP_ID: $ secrets.FIREBASE_APP_ID 
      - name: Archive Production Artifact
        uses: actions/upload-artifact@master
        with:
          name: public
          path: public
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master
      - name: Download Artifact
        uses: actions/download-artifact@master
        with:
          name: public
      - name: Deploy
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: $ secrets.FIREBASE_TOKEN 

我收到同样的错误，说它找不到 API 令牌。

当我在其他基于 firebase 的 React 应用程序中浏览工作流文件时，我看不到有人像我建议的那样添加这些环境变量。在部署到 Firebase 的应用程序中处理环境变量的正确方法是什么？它们属于构建还是部署步骤？

【问题讨论】：

你有解决办法吗？

需要明确的是，您是否将 API 密钥添加为 github 机密，或者只是在 env 文件中？您能否更具体地说明错误是什么，以及示例文件何时起作用。

【参考方案1】：

您的自定义环境变量必须以 REACT_APP_ 开头。除了 NODE_ENV 之外的任何其他变量都将被忽略，以避免在机器上意外暴露可能具有相同名称的私钥。 请看这篇文章Adding Custom Environment Variables。

作为附加说明，您还可以运行 npm run build 以及作为参数传递的环境变量，如下所示：

REACT_APP_FIREBASE_APIKEY=$ secrets.REACT_APP_FIREBASE_APIKEY  REACT_APP_FIREBASE_AUTHDOMAIN=$ secrets.REACT_APP_FIREBASE_AUTHDOMAIN  REACT_APP_FIREBASE_DBURL=$ secrets.REACT_APP_FIREBASE_DBURL  npm run build