如何在 nuxt 应用程序中为 Firebase 可调用函数配置生产 URL？

Question

我有一个 nuxt 应用程序上传到 Firebase（用作云功能）。我还有一个可调用函数，我正试图从应用程序中调用它。问题是它试图调用 localhost url 而不是生产函数。

我在 nuxt.config.js 中的 Firebase 设置如下所示：

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,
                    }
                }
            }
        ]
    ],
}

firebase.nuxt.org documentation 仅提及模拟器配置，未提及生产。

我是这样调用函数的：

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

如何使函数在生产中使用正确的url？

编辑：

这是package.json设置：

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

编辑 2：

显然 env.functionsURL 应用正确，因为应用程序代码直接将此变量用于其他目的并且它工作正常！只是callable functions因为某些原因没有收到相关的制作url才被调用。同时代码中唯一出现5001端口的地方是：

nuxt.config.js / env 设置
nuxt.config.js / modules / services / functions / emulatorPort 设置
service.functions.js 模块在 nuxt/firebase 文件夹中自动添加（我猜是 firebase.nuxtjs？）。

模块如下所示：

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

所以也许出于某种原因 callable function 认为它仍应使用模拟器设置？我该如何预防？

唯一调用模块的地方是nuxt/firebase/index.js，像这样：

 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),
    ]
  }

这似乎确实与环境无关，Firebase 的本机代码确实应用了相同的设置。我可以修改 functionsService 代码，但它似乎不是最佳解决方案，因为 Firebase 可能会在某些时候覆盖它，比如在构建或更新期间。或者可能是这些 'native' 文件仅在开始时生成，并且尽管在配置中进行了潜在更改但并未更新（这是不正确的，但现在是正确的）。

我如何强制更改这些 Firebase 的文件以区分生产环境和开发环境并使它们安全地持久存在？可能 nuxt.config.js / modules / services / functions / 应该配置不同，但是如何配置？

Answer 1

使用nuxt.config.js中的publicRuntimeConfig，为了配置环境：

export default {
  publicRuntimeConfig: {
    baseURL: process.env.BASE_URL || 'https://us-central1-turniejomat.cloudfunctions.net'
  }
}

随后 dev 脚本将是：

"dev": "SET \"BASE_URL=http://localhost:5001/turniejomat/us-central1\" & nuxt"

始终用发展价值代替生产，而不是相反。

Answer 2

您可能想再次查看文档。我检查了前面的步骤，似乎您没有初始化 firebase，您还可以指定是要在开发模式还是生产模式下工作。你可以在指南中找到这个，配置在开头。您的 nuxt.config.js 文件的 (guide/options/config) 详细信息。

config

REQUIRED

Your firebase config snippet and other Firebase specific parameters. You can retrieve this information from your Firebase project's overview page:

https://console.firebase.google.com/project/<your-project-id>/overview

nuxt.config.js:
config: {
  // REQUIRED: Official config for firebase.initializeApp(config):
  apiKey: '<apiKey>',
  authDomain: '<authDomain>',
  projectId: '<projectId>',
  storageBucket: '<storageBucket>',
  messagingSenderId: '<messagingSenderId>',
  appId: '<appId>',
  measurementId: '<measurementId>'
}
Can be defined per NODE_ENV environment if put in child-objects config.production and config.development, meaning that e.g. config.production gets loaded when NODE_ENV === 'production'.

You can also specify multiple custom environments as mentioned in the customEnv option below.

guide/options/services 部分指导您如何初始化 firebase。

services

REQUIRED

By default, NO Firebase products are initialized. To initialize a specific service, set its services flag to true or create a child object and name the key after the service.

Available services:

nuxt.config.js:
services: {
  auth: true,
  firestore: true,
  functions: true,
  storage: true,
  database: true,
  messaging: true,
  performance: true,
  analytics: true,
  remoteConfig: true
} 
Each service has advanced options that you can configure. See the service options section for more details.

编辑如果这不起作用，我想知道您是否在开发模式下配置了您的 firebase 项目，在这种情况下，问题可能就在那里。要将其更改为开发模式或对该部分进行故障排除，您可能需要从头开始创建一个新项目并 import/export 您的旧项目，就像他们在此 .

中建议的那样

Answer 3

所以解决方案是在 nuxt.config.js 中有条件地设置 functions.emulatorPort 设置 - 仅针对开发环境和 undefined 生产环境：

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

如何在 nuxt 应用程序中为 Firebase 可调用函数配置生产 URL？

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

firebase

google-cloud-functions

nuxt.js

nuxtjs2

config

REQUIRED

services

REQUIRED