Firebase 托管 + 与 webpack react

IT技术 reactjs firebase firebase-hosting reactfire
2021-05-13 03:16:03

有没有办法将 Firebase 托管添加到使用 webpack 的 React 项目？具体来说，我试图将它添加到https://github.com/mxstbr/react-boilerplate

这是我的 firebase.json 文件

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

当我打电话时firebase serve页面是空的。但是，如果我这样做，npm start该应用程序可以正常工作。所以，JS/React 代码没有被注入到 index.html 中，这是

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome to Firebase Hosting</title>
  </head>
  <head>
    <!-- The first thing in any HTML file should be the charset -->
    <meta charset="utf-8">
    <!-- Make the page mobile compatible -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Allow installing the app to the homescreen -->
    <link rel="manifest" href="manifest.json">
    <meta name="mobile-web-app-capable" content="yes">
    <title>React.js Boilerplate</title>
  </head>
  <!-- The app hooks into this div -->
  <!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
  <body>
  <div id="app"></div>
  <div id="message">
      <h1>Welcome to Firebase Hosting</h1>
    </div>
  </body>
</html>
3个回答

我正在使用create-react-app包来创建我的 React 应用程序。调用命令“npm run build”。这会生成一个包含 webpack 输出的“build”目录。在您的 firebase.json 文件中，改为指向“build”目录。然后运行“firebase serve”或“firebase deploy”命令。

"hosting": {
  "public": "build",
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}

在你的特殊情况下，当你有一个 demo/raw/boiler-plate 索引文件时，我认为它会在 '/app/' 目录中。你可以用你的应用程序原始index.html替换它，你就完成了。

其他帮助提示（您可以保留您的应用程序目录，并在阅读本文时将其作为公开使用）：

提示 1： 当您在Firebase上部署应用程序并尝试访问浏览器（尤其是React、Redux）应用程序时，您可能会收到一条错误消息：

在 bundle.js 中找不到module“运行”

所以正如答案中提到的那样，它是必须的，在此之后 - 您必须执行命令： 

启动
此命令将重新生成bundle.js并且不会包含/需要我们在开发时使用的“运行”module。之后，您可以将最新的 bundle.js 部署到服务器。

提示2：在webpack.config内output:{...}应设置一节path，并publicPath到一个新的目录，即/公/。否则在Firebase主机上，当您提到“public”目录作为要部署的默认目录时 - 那么它会产生问题并且应用程序将无法在 Firebase 服务器上运行。

注意：实际上我不确定也不知道如何告诉 firebase 使用我的根目录上的文件而不是我的“公共”文件夹中的文件 但我认为输出 Webpack 生成的文件并将其他公共文件 ( css, html)保留在公共文件夹中是否则firebase deploy也可以上传位于根目录中的其他文件。（如我错了请纠正我）。

好的，最后当您将webpack.config输出值更新为：

output: { path: __dirname+ '/public', publicPath: '/public/', filename: 'bundle.js' }

然后（最后确保您也完成了 Tip.1）并运行命令以获取最新的 bundle.js 

启动
. 最后，您可以使用以下命令进行部署：
火力基地部署
我相信firebase login在运行最后一个部署命令之前，您可能已经遵循了启动和其他 init 命令的初始步骤。

注意：该"firebase serve"命令还有助于调试和测试应用程序是否在本地机器上运行良好，然后它也将在实时 Firebase 服务器上运行良好。

我遇到了同样的问题。@Caritos 说得对。但是，我发现了其他问题。

1) 我需要在 HTML 文件中添加代码：

<script type="text/javascript" src="/bundle.js"></script>

2) 在 npm build 目录中，这个链接标签没有正确构建，因为它没有自动关闭：

不正确：

<link href="/bundle-f9b3749622929f71c476.css" rel="stylesheet">

正确的：

<link href="/bundle-f9b3749622929f71c476.css" rel="stylesheet" />

关闭链接标签后，我的 React 应用程序就部署了。

其它你可能感兴趣的问题
上一篇ReactJS - 数组中对象键的 setState 下一篇如何3D打印没有平底和中间孔的五角星形物体？