使用 Google Firebase 托管和函数测试和部署应用程序的最佳 setup/workflow

Question

我用 vuejs 构建了一个小型网络应用程序 (www.suntax.de) 并托管在 Google Firebase 上。我使用 Firebase 托管、数据库和函数。我使用函数在后端做一些计算。

现在一切都运行宁，但我在到达那里时遇到了一些麻烦，并且我想改进一些关于我的工作流程的事情。因此，我想向您解释一下我做了什么以及我现在挣扎的地方。

首先，我设置了 vuejs 应用程序并将其部署到 firebase。我添加了自定义域，一切正常。后来我实现了云功能，想从我的vuejs应用程序中调用。在 firebase deploy 之后，我可以在浏览器中调用这个函数，它工作正常： https://us-central1-suntax-6d0ea.cloudfunctions.net/calcEEGcompensation?year=2013&month=1&size=10

现在我想，我只是从我的 vuejs 应用程序调用函数的 URL。但后来我收到以下错误消息： [Error] Origin * is not allowed by Access-Control-Allow-Origin.

我当时读到我必须在 firebase.json 中添加一个 rewrite 部分：

现在我的 firebase.json 看起来像这样：

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    // Add the following rewrites section *within* "hosting"
   "rewrites": [ {
      "source": "/calcEEGcompensation", "function": "calcEEGcompensation"
    } ]
  }
}

现在我可以使用以下 URL 调用我的 firebase 函数： https://www.suntax.de/calcEEGcompensation?year=2013&month=1&size=10

在我的 vuejs 应用程序中集成上述 URL 后，应用程序在部署到 firebase 服务器后运行正常。

因为我想不断改进应用程序，所以我想在部署之前在本地测试所有内容。

我知道我可以运行通过以下方式在本地进行 firebase 托管和运行： firebase serve --only functions,hosting

但是，现在我的应用程序对我的函数 https://www.suntax.de/calcEEGcompensation?year=2013&month=1&size=10 进行了硬编码调用，这再次导致错误 [Error] Origin * is not allowed by Access-Control-Allow-Origin.

但也将 URL 更改为本地函数 http://localhost:5001/suntax-6d0ea/us-central1/calcEEGcompensation?year=2013&month=1&size=10 导致错误信息 [Error] Origin * is not allowed by Access-Control-Allow-Origin.

一些进一步的阅读使我找到了 cors 的解决方案。所以我将函数更改为：

const functions = require('firebase-functions');
const cors = require('cors')({origin: true});

exports.calcEEGcompensation = functions.https.onRequest((req, res) => {
    cors(req, res, () => {
        const yearOfCommissioning = req.query.year;
        const monthOfCommissioning = req.query.month;
        const pvsystemsize = req.query.size;

        ...

        res.send("hello");
    });
});

这很有用，现在一切正常： - 已部署的应用程序仍然运行ning 正常。 - 我可以在本地运行应用程序同时调用本地函数和部署函数。我只需要更改函数的 URL。

但现在我的问题是：我能以更好的方式解决这个问题吗？如果我在本地测试vuejs应用程序和功能，我必须在部署之前更改功能URL。然后我必须在本地测试时将其改回。没有 cors.

，我无法在本地测试我的应用程序和功能

我理想的解决方案是有一个设置，可以在本地进行全面测试，并且可以使用 firebase deploy 轻松部署，而无需对 URL 进行任何更改。这可能吗？

谢谢并致以最诚挚的问候，克里斯托夫

Answer 1

更新（对于 Firebase 托管）：
目前没有可以使用 Firebase Hosting SDK 解决的解决方法。
但是还有其他方法可以实现这一目标。

在您的托管源中尝试以下代码。

if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
    console.log('It's a local server!');
}

在我看来，这些是目前检查开发环境的最佳方式。
因此，您应该在 Firebase 托管中使用 location.hostname，在 Cloud Functions 中使用 server.address()。

并用常量变量定义函数终点。

const DEBUG = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
const FUNCTIONS_ENDPOINT_DEV = 'http://localhost:5001/';
const FUNCTIONS_ENDPOINT_PRD = 'https://us-central1-something.cloudfunctions.net/';
const FUNCTIONS_URL_CALC = 'calcEEGcompensation?year=2013&month=1&size=10';

var endpoint;
if (DEBUG) {
    endpoint = FUNCTIONS_ENDPOINT_DEV + FUNCTIONS_URL_CALC;
} else {
    endpoint = FUNCTIONS_ENDPOINT_PRD + FUNCTIONS_URL_CALC;
}

原始答案（对于 Cloud Functions for Firebase）：
您是否尝试过 node.js 网络模块的 server.address() 功能？
此方法将告诉您您的功能代码是 localhost 上的运行还是实际部署的服务器。

例如，您可以这样使用。

const server = app.listen(function() {
    let host = server.address().address;
    let port = server.address().port;

    if (!host || host === '::') {
        host = 'localhost:';
    }

    console.log('Server is running on %s%s', host, port);
});

Answer 2

我找到了非常简单的解决方案，并且完全符合我的要求。我不知道为什么我以前没有弄清楚。这是我所做的：

我刚从我的 firebase 主机上给亲戚 URL 打电话：

calcEEGcompensation?year=2013&month=1&size=10

如果在 firebase.json 中正确设置了重写，则一切正常：

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    // Add the following rewrites section *within* "hosting"
   "rewrites": [ {
      "source": "/calcEEGcompensation", "function": "calcEEGcompensation"
    } ]
  }
}

像这样设置完所有内容后，我可以执行 firebase serve --only functions,hosting 并且可以在本地测试所有内容。执行后firebase deploy，服务器上一切顺利

我不需要cors。

感谢@wonsuc 的回答。

使用 Google Firebase 托管和函数测试和部署应用程序的最佳 setup/workflow

Best setup/workflow for testing and deploying an application using Google Firebase Hosting and Functions

firebase

firebase-hosting

google-cloud-functions

firebase-cli