Firebase 托管 + 使用 webpack 进行反应
Posted
技术标签:
【中文标题】Firebase 托管 + 使用 webpack 进行反应【英文标题】：Firebase hosting + React with webpack 【发布时间】：2016-12-28 07:36:10 【问题描述】：有没有办法将 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>
【问题讨论】：
【参考方案1】：我正在使用 create-react-app 包来创建我的 React 应用程序。 调用命令“npm run build”。这会生成一个包含 webpack 输出的“build”目录。在您的 firebase.json 文件中，改为指向“build”目录。然后运行“firebase serve”或“firebase deploy”命令。
"hosting":
"public": "build",
"rewrites": [
"source": "**",
"destination": "/index.html"
]
【讨论】：
所以你在你的开发机器上本地构建，然后部署到firebase？有没有办法让 firebase 在部署期间进行构建？ @EgeErsoz 你可以尝试嵌入一些可以运行命令行命令的节点包，但现在你只能选择$ npm run build && firebase deploy || echo "Failed to build"。这将首先构建应用程序，然后，如果构建成功，我们将部署 firebase 应用程序。
也许使用 grunt 并使用例如 grunt deploy 启动部署过程【参考方案2】：
在您的特定情况下，当您拥有一个演示/原始/样板索引文件时，我假设该文件位于“/app/”目录中。您可以将其替换为您的应用程序原始 index.html，然后就完成了。
其他帮助提示（您可以保留您的 app 目录，并在阅读本文时将其公开使用）：
提示 1： 当您在 Firebase 上部署应用程序并尝试访问浏览器（尤其是 React、Redux）应用程序时，您可能会收到一条错误消息：
在 bundle.js 中找不到模块“run”
所以正如答案中提到的，它是必须的，在此之后 - 你必须执行命令：
npm 开始此命令将重新生成 bundle.js 并且不会包含/需要我们在开发时使用的 "run" 模块。在此之后，您可以将最新的 bundle.js 部署到服务器。
提示 2： 在 output:... 部分的 webpack.config 中，您应该设置 path 和publicPath 到一个新目录，即 /public/。否则，在 Firebase 主机上，当您提到“公共”目录作为默认部署目录时 - 那么它会产生问题并且应用程序将无法在 Firebase 服务器上运行。
注意：实际上我不确定也不知道如何告诉 firebase 使用我的根目录而不是我的“公共”文件夹中的文件
但我认为输出 Webpack 生成的文件并将其他公共文件 (css, html) 保存在公共文件夹中是好的，否则 firebase deploy 也可能会上传位于根目录中的其他文件。 （如果我错了，请纠正我）。
好的，最后当你更新 webpack.config 输出值为：
output:
path: __dirname+ '/public',
publicPath: '/public/',
filename: 'bundle.js'
然后（最后确保您也完成了 Tip.1）并运行命令以获取最新的 bundle.js
npm 开始。最后，您可以使用以下命令进行部署：
firebase deploy我相信您在运行最后一个部署命令之前可能已经遵循了启动
firebase login 和其他 init 命令的初始步骤。
注意："firebase serve" 命令还有助于调试和测试应用程序是否在本地计算机上运行良好，然后它也将在实时 Firebase 服务器上运行良好。
【讨论】：
【参考方案3】：我遇到了同样的问题。 @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 应用程序就部署了。
【讨论】：
以上是关于Firebase 托管 + 使用 webpack 进行反应的主要内容，如果未能解决你的问题，请参考以下文章
Firebase 托管：如何防止对 SPA 的 index.html 进行缓存
在 Firebase 托管中使用 Firebase 和 React