代码之家 › 专栏 › 技术社区 › cmolitor

使用Google Firebase托管和功能测试和部署应用程序的最佳设置/工作流

firebase-cli firebase-hosting google-cloud-functions firebase

cmolitor · 技术社区 · 6 年前

我用vuejs构建了一个小型web应用程序(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.

我当时读到,我必须添加一个 rewrite 中的节 firebase.json :

现在是我的火力基地。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 server后运行良好。

由于我希望不断改进应用程序,所以我希望在部署之前在本地测试所有内容。

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

然而,现在我的应用程序对我的函数进行了硬编码调用 https://www.suntax.de/calcEEGcompensation?year=2013&month=1&size=10 这又导致了错误 [错误]访问控制允许原点不允许原点*。

还可以将URL更改为本地函数 http://localhost:5001/suntax-6d0ea/us-central1/calcEEGcompensation?year=2013&month=1&size=10 导致错误消息 [错误]访问控制允许原点不允许原点*。

通过进一步阅读,我找到了解决方案 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");
    });
});

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

但现在我的问题是: 我能以更好的方式解决这个问题吗?如果在本地测试vuejs应用程序和函数,则必须在部署之前更改函数URL。然后我必须在本地测试时将其更改回来。我无法在没有 cors公司 。

我的理想解决方案是有一个可以在本地进行全面测试的设置,并且可以轻松部署 firebase部署 没有任何更改的网址。这可能吗?

谢谢并致以最良好的问候, 克里斯托夫

2 回复 | 直到 6 年前

cmolitor 6 年前

我找到了一个非常简单的解决方案,它完全符合我的要求。我不知道为什么我以前没有弄明白。以下是我所做的:

我只需从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的回答。

wonsuc 6 年前

更新(用于Firebase托管):
目前没有解决方法,您可以使用Firebase托管SDK来解决它。
但有其他方法可以实现这一点。

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

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

在我看来,这些是目前检查开发环境的最好方法。
因此,您应该使用 location.hostname 在Firebase主机中,以及 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;
}

原始答案(针对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);
});