将环境变量部署到 Firebase 托管

Question

我在 React 中使用 Firebase，在初始化 Firebase 时，我使用从我的 .env 文件中提取的环境变量dotenv。我想构建我的 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 的应用程序中处理环境变量的正确方法是什么？它们属于构建还是部署步骤？

Answer 1

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

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

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