firebasegoogle-cloud-functionsnuxt.jsnuxtjs2

How to configure production URL for Firebase callable function in nuxt app?


I have a nuxt app uploaded to Firebase (served as cloud function). I have also a callable function that I'm trying to call from the app. The problem is that it tries to call localhost url instead of the production one.

My Firebase setup in nuxt.config.js looks like this:

module.exports = {
    env: {
        functionsURL: process.env.NUXT_ENV_FUNCTIONS === 'local' ? "http://localhost:5001/turniejomat/us-central1" : 'https://us-central1-turniejomat.cloudfunctions.net', // I would expect this to be applied
    },
    modules: [
        [
            '@nuxtjs/firebase',
            {
                config: {
                    // app config
                },
                services: {
                    functions: {
                        location: 'us-central1',
                        emulatorPort: 5001,
                    }
                }
            }
        ]
    ],
}

The firebase.nuxt.org documentation mentions only emulator configuration, but not production.

I'm calling the function like this:

const signUp = await this.$fire.functions.httpsCallable("signup")(configObject)

How do I make the function to use proper url in production?

EDIT:

This is package.json setting:

"scripts": {
        "dev": "SET \"NUXT_ENV_FUNCTIONS=local\" & nuxt",
        "build": "SET \"NUXT_ENV_FUNCTIONS=fire\" & nuxt build",
 } 

EDIT 2:

Apparently the env.functionsURL is applied properly, as the app code uses this variable directly for other purposes and it works correctly! It is the callable functions only that for some reason don't receive the relevant production url to be called. At the same time the only places in the code where 5001 port appears are:

  1. nuxt.config.js / env setting
  2. nuxt.config.js / modules / services / functions / emulatorPort setting
  3. service.functions.js module in nuxt/firebase folder which is added automatically (by firebase.nuxtjs I guess?).

The module looks like this:

export default async function (session) {
  await import('firebase/functions')
  const functionsService = session.functions('us-central1')
  functionsService.useFunctionsEmulator('http://localhost:5001')
  return functionsService
}

So maybe for some reason the callable function thinks it should still use emulator settings? How could I prevent it?

The only place where the module is called is the nuxt/firebase/index.js, like this:

 if (process.server) {
    servicePromises = [
      authService(session, firebase, ctx, inject),
    firestoreService(session, firebase, ctx, inject),
    functionsService(session, firebase, ctx, inject),
    ]
  }

  if (process.client) {
    servicePromises = [
      authService(session, firebase, ctx, inject),
      firestoreService(session, firebase, ctx, inject),
      functionsService(session, firebase, ctx, inject),
    ]
  }

Which seems that indeed regardless of the environment the same settings are indeed applied by the Firebase's native code. I could modify the functionsService code, but it does not seem like an optimal solution as Firebase might overwrite it at some point, like during build or update. Or it could have been that these 'native' files were generated only at the beginning and did not update despite potential changes made in the config (which was incorrect, but now is correct).

How could I enforce changes to these Firebase's files distinguishing prod and dev environments and make them safely persist? Probably nuxt.config.js / modules / services / functions / should be configured differently, but how?


Solution

  • So the solution turned out to be to set up functions.emulatorPort setting in nuxt.config.js conditionally - only for the dev environment and undefined for production:

    functions: {
        location: 'us-central1',
        emulatorPort: process.env.NUXT_ENV_FUNCTIONS === 'local' ? 5001 : undefined,                    
    }