如何在 firebase 托管的 webapp 中获取 firebase 函数 URL？

Question

我正在开展一个项目，在该项目中，我们有与 Firebase 一起使用的预先存在的云功能。我们正在添加一个使用 firebase 云托管的小型 React SPA，这个 SPA 将与一些现有的公共云功能进行交互。

到目前为止，我们的工作方式是，我们在 Firebase 中有一个开发项目和一个生产项目。对于云功能，这很好用，我们设置了特定firebase functions:config:set于环境的配置，用于区分生产服务器和开发服务器。

问题在于托管 SPA 联系云功能。我已经看到很多关于如何访问托管代码中的环境配置的问题，例如这个：如何从 Firebase 托管的应用程序中引用 Firebase 函数配置变量？答案似乎是具有返回环境变量值的 firebase 函数，但对我来说，这只是将问题进一步推回了步骤。我完全理解，由于 SPA 在浏览器中运行，因此让此代码可以访问环境变量将是一个巨大的安全问题。

对于托管 SPA，我真正需要的唯一特定于环境的配置是云功能的基址。

例如，如果在我的云功能中我有

const functions = require('firebase-functions');
const express = require('express');
const test = express();
test.on('/hello/:target', (req, res) => {
  res.send(`Hello ${req.params.target}`);
})
exports.test = functions.https.onRequest(test);

然后部署后，此云功能可在https://us-central1-DEV-PROJECT-NAME.cloudfunctions.net/test/hello/world和https://us-central1-PROD-PROJECT-NAME.cloudfunctions .net/test/hello/world。我如何最好地为项目获得适当的根 url（https://us-central1-DEV-PROJECT-NAME.cloudfunctions.net或https://us-central1-PROD-PROJECT-NAME.cloudfunctions.net） SPA 部署到？

例如。是否有一些全局我可以在前端 js 代码中访问，我可以在其中执行以下操作：

const url = `${__FIREBASE_GLOBALS__.cloudFunctions.baseUrl}/test/hello/${input}`;

并且是否根据托管应用程序部署到的项目正确定义了 url？

Answer 1

我在这里假设您在 SPA 中除了调用 Cloud Functions 之外没有以任何其他方式使用 Firebase（因为您没有另外说明）。

阅读Firebase 托管的 Firebase Web 设置文档，尤其是有关SDK 导入和隐式初始化的部分。当您使用 Firebase 托管托管网站时，有一些特殊的 URL 可以为您提供该项目的配置。有一些特殊的脚本可让您访问 Firebase 产品。特别要注意的是，相对路径 URI/__/firebase/init.js将生成 JavaScript，该 JavaScript 使用项目的默认设置初始化 Firebase JavaScript SDK。继续并在指向您的网络应用程序的浏览器中访问它。projectId您可能对配置的属性感兴趣。

如果您想获取该值，可以使用 Firebase SDK，该 SDK 将由上面第一个链接中包含的脚本初始化。至少，您可以添加：

<script src="/__/firebase/5.8.2/firebase-app.js"></script>
<script src="/__/firebase/init.js"></script>

然后稍后（请参阅 API 文档）：

firebase.app().options.projectId

获取 Firebase Hosting 提供内容的项目的 ID。您可以使用它来构建函数的 URL。

您还可以方便地将 HTTP 函数移植到可调用函数，并使用 Firebase SDK 从网站调用它们来调用它们。或不。