Firebase主机如何通过环境变量提供预览通道？

Question

我想在 Firebase 上使用预览频道，以便在 go 直播之前分享和测试功能。 创建预览通道很简单，但目前我在使用预览通道 url 时遇到错误：

我目前使用存储 React 环境变量的 .env 文件，允许我连接到 firebase，但是在为预览通道构建和部署时，这些环境变量似乎无法访问。

关于如何让这个工作的任何想法请

Answer 1

该错误确实是由于您的托管应用程序无法访问指定您的应用程序应该连接到的 Firebase 项目的那些环境变量（例如，对用户进行身份验证、管理数据等）。 为什么您的 GitHub Actions 的管道步骤无法访问它们，当然，如果不深入了解您的设置，我无法判断。

但是，解决该问题的一种方法（无需将您的项目配置检查到版本控制代码中）是将所有必需的（环境）变量存储在 GitHub 中，以便它们可用于与 GitHub 项目关联的 GitHub 操作你正在努力。 您可以在https://github.com/<your-username>/<your-GitHub-project-name>/settings/variables/actions添加它们。 假设您有一个 React 应用程序，然后可以通过firebase-hosting-pull-request.yml脚本将环境变量与要部署在预览通道上的代码一起发送，该脚本可能看起来类似于这个：

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
  build_and_preview:
    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
    runs-on: ubuntu-latest
    env:
      REACT_APP_FIREBASE_API_KEY: ${{ vars.REACT_APP_FIREBASE_API_KEY }}
      REACT_APP_FIREBASE_AUTH_DOMAIN: ${{ vars.REACT_APP_FIREBASE_AUTH_DOMAIN }}
      REACT_APP_FIREBASE_PROJECT_ID: ${{ vars.REACT_APP_FIREBASE_PROJECT_ID }}
      REACT_APP_FIREBASE_STORAGE_BUCKET: ${{ vars.REACT_APP_FIREBASE_STORAGE_BUCKET }}
      REACT_APP_FIREBASE_MESSAGING_SENDER_ID: ${{ vars.REACT_APP_FIREBASE_MESSAGING_SENDER_ID }}
      REACT_APP_FIREBASE_APP_ID: ${{ vars.REACT_APP_FIREBASE_APP_ID }}
    steps:
      - uses: actions/checkout@v2
      - run: npm ci && npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_XXX }}'
          projectId: XXXXX
          expires: 2d

这会读取为存储库的 GitHub 操作存储的变量，并使它们可用于在build_and_preview作业中执行的所有管道步骤。

如果您有更敏感的数据要存储，您可以将这些存储在可用的 GitHub 秘密中（位于https://github.com/<your-username>/<your-GitHub-project-name>/settings/secrets/actions ）到您的 GitHub 操作，然后以与变量类似的方式使它们可用于您部署的代码。