javascript - 如何托管 Firebase 函数和单页应用程序？

Question

我正在使用 React.js 开发一个单页应用程序。我和我的团队将尽最大努力利用 Firebase Hosting，并尝试部署我们的应用程序。我的问题是，我正在尝试部署静态站点和功能，唯一的问题是我无法使用当前的配置托管它们。这是我正在使用的 firebase.json，尽管它不显示 /helloWorld 中的函数，仅显示静态站点。

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/helloWorld",
        "function": "helloWorld"
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

当我转到 /helloWorld 时，我希望它路由到 helloWorld 函数，并将其路由到静态 index.html 文件当我转到 /helloWorld 以外的任何路线时。这是一个示例如果我是 Express.js。

const express = require('express');
const app = express();

app.get('/helloWorld', (req, res) => {
  res.send('this is a cloud function');
});

app.get('*', (req, res) => {
  res.send('this is the static site');
});


app.listen(3000);

Answer 1

如果我理解得很好，您只需在用户尝试访问 www.yourwebiste.com/** 时将他们重定向到 index.html (其中 ** 可以是 helloWrold 以外的任何内容)，并且仅当他们尝试访问 www.yourwebsite.com/helloWorld< 时才显示 helloWorld 页面

对吗？

如果是的话，我会这样做:

firebase.json

...
"rewrites": [
  {
   "source": "/helloWorld/**", 
   "function": "helloWorld"
  }
]

无需添加

{
  "source": "**",
  "function": "/index.html"
}

因为这是默认重定向。

然后在你的js文件中

const express = require("express");
const redirection = express();

redirection.route('/helloWorld')
  .get(function (req, res) {
    res.send('this is my redirected page')
  })