Add .env Secrets to Nuxt App Deploying on Firebase Hosting with Github Actions

Question

I'm trying to deploy a Nuxt app to firebase hosting using github actions...

The deploy worked fine until I added my firebase config to .env - it runs fine on localhost but when deployed the api key and other config doesn't seem to be registering.

.env

FIREBASE_APIKEY=mykey
FIREBASE_AUTHDOMAIN=mydomain
FIREBASE_DATABASEURL=mydburl
FIREBASE_PROJECTID=projectid
FIREBASE_STORAGEBUCKET=bucket
FIREBASE_MESSAGINGSENDERID=senderid
FIREBASE_APPID=appid
FIREBASE_MEASUREMENTID=measurementid

nuxt.config.js

// Nuxt-Fire Module Options
    firebase: {
        config: {
            apiKey: process.env.FIREBASE_APIKEY,
            authDomain: process.env.FIREBASE_AUTHDOMAIN,
            databaseURL: process.env.FIREBASE_DATABASEURL,
            projectId: process.env.FIREBASE_PROJECTID,
            storageBucket: process.env.FIREBASE_STORAGEBUCKET,
            messagingSenderId: process.env.FIREBASE_MESSAGINGSENDERID,
            appId: process.env.FIREBASE_APPID,
            measurementId: process.env.FIREBASE_MEASUREMENTID
        },
        onFirebaseHosting: true,
        services: {
            auth: {
                persistence: 'local', // default
                initialize: {
                    // onAuthStateChangedMutation: 'ON_AUTH_STATE_CHANGED_MUTATION',
                    onAuthStateChangedAction: 'onAuthStateChanged'
                },
                ssr: true
            },
            firestore: true,
            storage: true,
            performance: true
            // analytics: true,
        }
    },

deploy.yml

name: Firebase Continuous Deployment

on:
    push:
        branches: [master]

jobs:
    firebase-deploy:
        runs-on: ubuntu-latest

        steps:
            - uses: actions/checkout@master
            - uses: actions/setup-node@master
              with:
                  node-version: '12'
            - run: yarn install
              env:
                  FIREBASE_APIKEY: ${{ secrets.FIREBASE_APIKEY }}
                  FIREBASE_AUTHDOMAIN: ${{ secrets.FIREBASE_AUTHDOMAIN }}
                  FIREBASE_DATABASEURL: ${{ secrets.FIREBASE_DATABASEURL }}
                  FIREBASE_PROJECTID: ${{ secrets.FIREBASE_PROJECTID }}
                  FIREBASE_STORAGEBUCKET: ${{ secrets.FIREBASE_STORAGEBUCKET }}
                  FIREBASE_MESSAGINGSENDERID: ${{ secrets.FIREBASE_MESSAGINGSENDERID }}
                  FIREBASE_APPID: ${{ secrets.FIREBASE_APPID }}
                  FIREBASE_MEASUREMENTID: ${{ secrets.FIREBASE_MEASUREMENTID }}
            - run: yarn generate
            - uses: w9jds/firebase-action@master
              with:
                  args: deploy --only hosting
              env:
                  FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Looks like you're setting your env variables on the yarn install step. Shouldn't they be on the yarn generate step below? — Phil
Pretty much a lucky guess on my part, I'm hopeless when it comes to Nuxt. Glad you got it working 🙂 — Phil

pjmanning pjmanning · Accepted Answer · 2021-01-19T03:31:59

The environment variables were being run on yarn install instead of on yarn generate...

deploy.yml

name: Firebase Continuous Deployment

on:
    push:
        branches: [master]

jobs:
    firebase-deploy:
        runs-on: ubuntu-latest

        steps:
            - uses: actions/checkout@master
            - uses: actions/setup-node@master
              with:
                  node-version: '12'
            - run: yarn install
            - run: yarn generate
              env:
                  FIREBASE_APIKEY: ${{ secrets.FIREBASE_APIKEY }}
                  FIREBASE_AUTHDOMAIN: ${{ secrets.FIREBASE_AUTHDOMAIN }}
                  FIREBASE_DATABASEURL: ${{ secrets.FIREBASE_DATABASEURL }}
                  FIREBASE_PROJECTID: ${{ secrets.FIREBASE_PROJECTID }}
                  FIREBASE_STORAGEBUCKET: ${{ secrets.FIREBASE_STORAGEBUCKET }}
                  FIREBASE_MESSAGINGSENDERID: ${{ secrets.FIREBASE_MESSAGINGSENDERID }}
                  FIREBASE_APPID: ${{ secrets.FIREBASE_APPID }}
                  FIREBASE_MEASUREMENTID: ${{ secrets.FIREBASE_MEASUREMENTID }}
            - uses: w9jds/firebase-action@master
              with:
                  args: deploy --only hosting
              env:
                  FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Add .env Secrets to Nuxt App Deploying on Firebase Hosting with Github Actions

2 Answers