Github Actions - 如何使存储在.env文件中的环境变量在我的工作流中可用？

Question

我会尽可能地讲得清楚。我也问过相关问题，但没得到令人信服的回答。
我正在使用React和firebase进行托管。
同时，我将firebase Web API密钥存储在我的.env文件中。
我使用Firebase CLI设置了Firebase托管，并选择在合并或拉取请求时自动部署。
设置完成后，在我的工作目录中创建了一个.github文件夹和一个.yml文件。

   .github
      - workflows
          -firebase-hosting-merge.yml
          -firebase-hosting-pull-request.yml

现在，当我手动运行firebase deploy将项目部署到Firebase（未推送到GitHub）时，一切正常，我的应用程序正在运行。
但是，当我进行更改并将更改推送到GitHub时，Github操作会触发自动部署到Firebase的过程。构建可以通过所有检查。

然而，当我访问托管的URL时，控制台会出现错误，显示Your API key is invalid, please check you have copied it correctly.
我尝试了一些解决方法，例如将Firebase Web API密钥存储到GitHub secrets中，并在.yml文件中访问它。

# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
 
name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - master
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm ci && npm run build --prod
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_EVENTS_EASY }}'
          channelId: live
          projectId: my-project
        env:
          REACT_APP_API_KEY: ${{secrets.REACT_APP_API_KEY}}
          FIREBASE_CLI_PREVIEWS: hostingchannels

但我仍然遇到错误。我认为这个错误肯定是由于环境变量导致的。
我将firebase网页API密钥存储在位于根目录的.env.production文件中。 不知何故，GitHub操作未使用我定义的环境变量。
请告诉我如何管理我的环境变量，以便工作流可以访问它。

- Tarun Singh

---

从快速阅读中看，该操作中没有提到需要包含额外的 env。 - astrochun

谢谢您的回复。我对Github actions还不熟悉，您能否解释一下？ - Tarun Singh

这是您用于部署的操作存储库：https://github.com/FirebaseExtended/action-hosting-deploy我没有看到环境示例的提及，所以我不确定您是否可以这样做。顺便问一下，当您说将API密钥存储在根目录中时，是否指的是在GitHub上？如果是这样，您可能已经泄漏了API令牌。 - astrochun

不，我将我的API密钥存储在.env文件中，该文件未被推送到GitHub，因为我已将其添加到.gitignore文件中。我通过命令process.env.REACT_API_KEY在我的项目中访问API密钥。 - Tarun Singh

其他必需的配置变量呢？例如storageBucketId、messagingId等等...？ - Chinmay Atrawalkar

Answer 1

答案是在作业之前将自定义环境变量放在第一层级中：

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - master

env: # <--- here
  REACT_APP_API_KEY: ${{secrets.REACT_APP_API_KEY}} # <--- here

jobs:
  build_and_deploy:
...

将这些密钥添加到 Github > 您的项目 > 设置 > 密钥

- Camila Eyzaguirre Villarroel

---

你真的救了我的命。为什么其他地方没有这么清楚呢？谢谢你的卓越表现。 - nilatti

Answer 2

您可以使用Create Envfile Github Action在工作流程中创建.env文件。

要向envfile添加键，请将键/值对添加到with:部分。它必须以envkey_开头。

steps:
  - uses: actions/checkout@v2
  - name: Use Node.js
    uses: actions/setup-node@v1
  - name: Make envfile
    uses: SpicyPizza/create-envfile@v1
    with:
      envkey_REACT_APP_API_KEY: ${{secrets.REACT_APP_API_KEY}}
      directory: './'
      file_name: '.env'

- NITY