Firebase 托管的网站不会加载（但会在本地加载）

IT技术 reactjs firebase
2021-04-29 19:07:31

我已经构建了一个以 create-react-app 开头的 react 应用程序，它似乎在本地开发中运行良好。我已经使用 firebase deploy 将它上传到 firebase 托管，当我在我的计算机上使用 chrome 加载它时，托管版本工作正常，但托管站点无法使用 firefox 或任何其他浏览器加载。托管站点也无法在其他机器上使用任何浏览器（包括 chrome）加载。

这是托管站点的链接：https : //physics-coach.firebaseapp.com/ 这是该站点的 github 存储库的链接：https : //github.com/occam98/physicscoach2

我已经尝试使用开发人员工具进行故障排除，但我似乎无法取得太大进展 - 当站点加载失败时，我在控制台中收到的唯一消息是：

看起来您正在使用 Firebase JS SDK 的开发版本。将 Firebase 应用部署到生产环境时，建议仅导入您打算使用的各个 SDK 组件。

对于 CDN 构建，它们可以通过以下方式使用（替换为组件的名称 - 即身份验证、数据库等）：

https://www.gstatic.com/firebasejs/5.0.0/firebase-.js rollbar.min.js:2:24504

我很感激有关如何解决此问题的任何故障排除建议。

1个回答

尝试将您的firebase.json内容更改为：

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/service-worker.js",
        "headers": [{ "key": "Cache-Control", "value": "no-cache" }]
      }
    ]
  }
}

您当前firebase.json指向文件夹"public"，该文件夹实际上不包含来自运行命令的任何 HTML/JS/CSS 资产npm run build。create-react-app 生产构建 命令将npm run build所有已编译的 HTML/JS/CSS 资源生成到目录"build"：

npm run build 使用应用程序的生产版本创建一个构建目录。在 build/static 目录中将是您的 JavaScript 和 CSS 文件。build/static 中的每个文件名都将包含文件内容的唯一哈希值。文件名中的这个哈希值支持长期缓存技术。

更新配置，执行npm run build后firebase deploy重新构建和重新部署。

此示例还包括用于排除 Service Worker 文件的配置以及出于使用路由器的目的的重写规则，例如react-router-dom. 如果它们以任何方式不适用于您的项目，您可以删除它们。

更新： 此外，constants.js您应该将 Firebase 导入更新为以下内容以解决警告。这假设您使用 Firebase 身份验证和 Firebase 实时数据库：

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

希望这有帮助！

其它你可能感兴趣的问题
上一篇使用 React 和 Axios 更新 Firebase 中的数据 下一篇对应于 `PropTypes.element` 的 `defaultProp` 的正确值是多少？