firebase 暂存和 github 操作的环境变量

Question

问题

通过 github 操作部署时，dotenvVault 中的变量

process.env.REACT_APP_HELLO

在 Firebase 暂存区域中未定义。

背景

在 dotenvVault（Web 界面）内，我已将环境变量（包括 REACT_APP_HELLO 变量）放入开发、暂存和生产环境中。我已将它们本地拉到我的存储库的 .env 文件中，并且还完成了 dotenv 构建。

在我的 github 存储库中，我通过转到“设置”->“环境”（开发、暂存和生产）创建了相应的环境。我已按照 dotenv 的文档将不同的 DOTENV_KEY 添加到我的 3 个环境中。

我运行了

firebase init hosting:github

并将几个 Firebase 服务帐户连接到存储库。在同一命令中，我配置了一个 yaml 文件以根据拉取请求部署到 firebase staging。我修改了 yaml 以部署到不同的 firebase 项目，以使它们分开。

我可以很好地访问分阶段应用程序（正如我所说，在另一个项目中），但

process.env.REACT_APP_HELLO

未定义。这意味着我不确定 firebase staging 是哪个环境。是“分阶段”“发展”还是什么都没有？我能以某种方式控制它吗？

YAML：

name: Deploy to Firebase Hosting on PR
'on': pull_request
env:
  REACT_APP_HELLO: ${{ secrets.REACT_APP_HELLO }}
  REACT_APP_FIREBASE_API_KEY: ${{ secrets.REACT_APP_FIREBASE_API_KEY }}
  REACT_APP_AUTH_DOMAIN: ${{ secrets.REACT_APP_AUTH_DOMAIN }}
  REACT_APP_DATABASE_URL: ${{ secrets.REACT_APP_DATABASE_URL }}
  REACT_APP_PROJECT_ID: ${{ secrets.REACT_APP_PROJECT_ID }}
  REACT_APP_STORAGE_BUCKET: ${{ secrets.REACT_APP_STORAGE_BUCKET }}
  REACT_APP_MESSAGING_SENDER_ID: ${{ secrets.REACT_APP_MESSAGING_SENDER_ID }}
  REACT_APP_APP_ID: ${{ secrets.REACT_APP_APP_ID }}
  REACT_APP_MEASUREMENT_ID: ${{ secrets.REACT_APP_MEASUREMENT_ID }}
jobs:
  build_and_preview:
    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MYPROJECT_00000 }}'
          projectId: myproject-00000

Answer 1

问题似乎可能与 GitHub Actions 工作流程中环境变量的设置方式以及 React 应用程序中的使用方式有关。

这里有一些建议：

GitHub Actions 中的环境变量： 确保后续步骤可以访问您在工作流程中定义的环境变量。在您的情况下， env 块用于定义环境变量，但您可能希望使用 FirebaseExtended/action-hosting-deploy 步骤中的 with 块来设置这些变量。

yaml

• 使用：FirebaseExtended/action-hosting-deploy@v0 和： repoToken: '${{secrets.GITHUB_TOKEN }}' firebaseServiceAccount：'$ {{secrets.FIREBASE_SERVICE_ACCOUNT_MYPROJECT_00000 }}' 项目 ID：myproject-00000 环境： | REACT_APP_HELLO=${{ Secrets.REACT_APP_HELLO }} REACT_APP_FIREBASE_API_KEY=${{ Secrets.REACT_APP_FIREBASE_API_KEY }} # 在这里添加其他变量

React App 中的环境变量： 确保您的 React 应用程序配置为识别这些环境变量。在 Create React App (CRA) 项目中，您通常会在环境变量中添加 REACT_APP_ 前缀。确保您的 .env 文件（.env.local、.env.development 等）具有正确的变量名称。

例如，在用于暂存的 .env 文件中：

环境 复制代码 REACT_APP_HELLO=暂存值 确保在构建期间为暂存环境加载了正确的 .env 文件。

检查 Firebase 托管配置： 确保您的 Firebase 托管配置已正确设置以使用适当的环境变量。 Firebase Hosting 本身并不像 React 那样理解环境变量，因此您可能需要在构建脚本中处理此问题或使用 env-cmd 等工具在构建期间加载环境变量。

调试： 向 GitHub Actions 工作流程添加一些调试步骤，以打印工作流程各个阶段的环境变量及其值。这可以帮助您确定变量设置是否正确。

• 名称：调试环境变量 运行： | 回声“REACT_APP_HELLO：$ {{秘密。REACT_APP_HELLO }}” echo“其他变量...”

请记住安全地处理敏感信息，并避免暴露日志或公共存储库中的秘密。如果问题仍然存在，请仔细检查您的环境变量设置，并确保 GitHub Actions 工作流程、Firebase 托管配置和 React 应用之间的一致性。