如何使用 Firebase 托管将两个 React 应用程序部署到两个不同的路径答案

【问题标题】：How to deploy two react apps to two different paths using firebase hosting如何使用 Firebase 托管将两个 React 应用程序部署到两个不同的路径
【发布时间】：2018-08-15 22:18:49
【问题描述】：

我有两个 React Web 应用程序（均使用 create-react-app 创建），我想将它们部署到不同路径上的同一个域。例如：

myapp.firebaseapp.com/auth myapp.firebaseapp.com/main

我该如何做到这一点？

【问题讨论】：

标签： reactjs firebase firebase-hosting

【解决方案1】：

在 Firebase 上的托管选项卡下的文档中搜索后，我能够提出一些建议。我相信 Cloud Function 可能是您完成您所说的（基于 URL 的动态路由）的最佳解决方案。

https://firebase.google.com/docs/hosting/functions

来自链接：

为您的托管站点创建一个 HTTP 函数打开 /functions/index.js 在您喜欢的编辑器中，并将其内容替换为以下内容代码。这将创建一个名为 bigben 的简单 HTTPS 函数。

const functions = require('firebase-functions');

exports.bigben = functions.https.onRequest((req, res) => {
  const hours = (new Date().getHours() % 12) + 1 // london is UTC + 1hr;
  res.status(200).send(`<!doctype html>
    <head>
      <title>Time</title>
    </head>
    <body>
      ${'BONG '.repeat(hours)}
    </body>
  </html>`);
});

将请求直接托管到您的函数使用重写规则，您可以将匹配特定模式的请求定向到单个目的地。例如，引导来自页面 /bigben 的所有请求在您的托管站点上执行 bigben 功能，您将打开 firebase.json 并在下面添加以下重写配置托管部分。

 {   "hosting": {
     "public": "public",

     // Add the following rewrites section *within* "hosting"    "rewrites": [ {
       "source": "/bigben", "function": "bigben"
     } ]
 } }

所以在你的情况下，你可以通过调用你的 App() 函数来使用一个函数来呈现你的应用程序，而不是执行这个 bigben 函数。

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

我认为 zeit 允许您同时运行多达 3 个不同的部署，但您要问的（我相信）是如何将不同的端点添加到您的一个 firebase 应用程序。

【讨论】：