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 操作，然后以與變量類似的方式使它們可用於您部署的代碼。