在部署到 firebase 主机之前，在 github 操作中设置环境变量

Question

I have a React application that makes use of the automatic deploy Github actions that Firebase provides. My issue is that I don't push my .env file to Github, and therefore there are no environment variables built into my code when the workflow script file runs yarn build in the Github action.

I tried to get around this by setting variables on my Github settings for the repo. I tried both Github secrets (under "Actions") and "Environments".

For actions -> repository secrets, I set up a secret called REACT_APP_GOOGLE_MAPS_API_KEY and added the following script to my steps :

REACT_APP_GOOGLE_MAPS_API_KEY=${{secrets.REACT_APP_GOOGLE_MAPS_API_KEY}} yarn && yarn build

Then I also created an environment called env , and on actions -> environment secrets I added the same, and changed the script to:

REACT_APP_GOOGLE_MAPS_API_KEY=${{env.REACT_APP_GOOGLE_MAPS_API_KEY}} yarn && yarn build

Neither of these worked; the env vars did not get bundled into the project and I get an error when I try to load maps on my live link because of a "missing api key".

How can I set secrets/variables in github and then utilise them in my workflow scripts?

For reference, here's the boilerplate script you get from firebase:

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
    steps:
      - uses: actions/checkout@v2
      - run: yarn && yarn build # I added my vars here, before `yarn` #
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_WEBPAGE_NAME }}"
          projectId: webpage_name

Answer 1

You can define environment variables at three levels:

Workflow: available in the entire workflow.

name: Deploy to Firebase Hosting on PR
on: pull_request
env:
  REACT_APP_GOOGLE_MAPS_API_KEY: ${{ secrets.REACT_APP_GOOGLE_MAPS_API_KEY }}
jobs:
  build_and_preview:
    ...

Job: available in all the steps of the job.

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_GOOGLE_MAPS_API_KEY: ${{ secrets.REACT_APP_GOOGLE_MAPS_API_KEY }}
    steps:
      ...

Step: available only in a specific step within a job.

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
    steps:
      - uses: actions/checkout@v2
      - run: yarn && yarn build
        env:
          REACT_APP_GOOGLE_MAPS_API_KEY: ${{ secrets.REACT_APP_GOOGLE_MAPS_API_KEY }}

For your case, as you only need the API key during yarn build , declaring it in the step will be the best option.

Ref: https://docs.github.com/es/actions/learn-github-actions/environment-variables