NextJs firebase hosting build on github actions not reading environment variables

Question

I am deploying a NextJs application on Firebase hosting using Github Actions.

I have the following workflow file:

name: Deploy to Firebase Hosting on merge
on:
  push:
    branches:
      - main
jobs:
  build-and-deploy-hosting:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: hosting
    steps:
      - name: Check out latest version of the code
        uses: actions/checkout@v2
      - name: Install Node.js and NPM
        uses: actions/setup-node@v2
        with:
          node-version: "14"
      - name: Make envfile
        uses: SpicyPizza/create-envfile@v1
        with:
          envkey_NEXT_PUBLIC_FIREBASE_API_KEY: '${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}'
          envkey_NEXT_PUBLIC_FIREBASE_PROJECT_ID: '${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}'
          envkey_NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: '${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}'
          envkey_NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: '${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}'
          envkey_NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: '${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}'
          envkey_NEXT_PUBLIC_DEVELOPMENT: false
          file_name: .env.local
          directory: ./
      - run: npm ci
      - run: npm run build
      - run: npm run export
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNTxxx }}'
          channelId: live
          projectId: xxxx
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels

Typically, NextJs looks for an .env.local file with the environment variables placed within it. So I added these as secrets in the Github repo and then reference them in the build file by making an .env.local file.

But it's never recognized because when the Action runs, I get the following error:

> Build error occurred
[Error: Your API key is invalid, please check you have copied it correctly.] ***
  type: 't',
  code: 'auth/invalid-api-key',
  a: null
***
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! xxx@0.1.0 build: `next build`
npm ERR! Exit status 1
npm ERR!

score 3 · Answer 1 · answered Sep 07 '21 at 05:10

I used the ENV context referenced in the GitHub docs, which seems more straightforward.

This Stack Overflow answer solved my final issue, the ENV context needs to be added at the top level above jobs.

for example:

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
env:
  NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY: ${{secrets.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY}}

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest

score 0 · Answer 2 · answered Apr 22 '21 at 16:28

Pretty sure this is triggered by using quotes around the mustache templates (the ${{ secrets.SOME_NAME }} bits) which causes them to be interpreted literally rather than get replaced.

name: Deploy to Firebase Hosting on merge
on:
  push:
    branches:
      - main
jobs:
  build-and-deploy-hosting:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: hosting
    steps:
      - name: Check out latest version of the code
        uses: actions/checkout@v2
      - name: Install Node.js and NPM
        uses: actions/setup-node@v2
        with:
          node-version: "14"
      - name: Make envfile
        uses: SpicyPizza/create-envfile@v1
        with:
          envkey_NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
          envkey_NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}
          envkey_NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}
          envkey_NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
          envkey_NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}
          envkey_NEXT_PUBLIC_DEVELOPMENT: false
          file_name: .env.local
          directory: ./
      - run: npm ci
      - run: npm run build
      - run: npm run export
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNTxxx }}
          channelId: live
          projectId: xxxx
        env:
          FIREBASE_CLI_PREVIEWS: hostingchannels

NextJs firebase hosting build on github actions not reading environment variables

2 Answers2