Firebase托管的网站将不会加载(但会在本地加载) [英] Firebase hosted website won't load (but loads locally)

问题描述

我已经创建了一个以create-react-app开头的react应用，该应用在本地开发中似乎运行良好.我已使用firebase deploy将其上传到firebase托管，并且当我在计算机上使用chrome加载托管版本时，托管版本运行良好，但是托管站点无法使用firefox或任何其他浏览器加载.托管站点在其他计算机上也无法使用任何浏览器(包括chrome)加载.

I've built a react app beginning with create-react-app that appears to be working fine in local development. I've uploaded it to firebase hosting using firebase deploy, and the hosted version works fine when I load it using chrome on my computer, but the hosted site fails to load using firefox or any other browser. The hosted site also fails to load using any browser, including chrome, on other machines.

以下是指向托管网站的链接: https://physics-coach.firebaseapp.com/ 这是此站点的github存储库的链接: https://github.com/occam98/physicscoach2

Here's the link to the hosted site: https://physics-coach.firebaseapp.com/ Here's the link to the github repo for this site: https://github.com/occam98/physicscoach2

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

I've tried toubleshooting using the developer tools, but I can't seem to make much headway—the only message I get in the console when the site fails to load is:

您似乎正在使用Firebase JS的开发版本 SDK.将Firebase应用程序部署到生产环境时，建议执行以下操作: 仅导入要使用的单个SDK组件.

It looks like you're using the development build of the Firebase JS SDK. When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use.

对于CDN构建，可以按以下方式使用 (替换为组件名称-即auth，数据库， 等等):

For the CDN builds, these are available in the following manner (replace with the name of a component - i.e. auth, database, etc):

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

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

对于任何有关如何解决此问题的疑难解答建议，我将不胜感激.

I'd appreciate any troubleshooting advice about how to solve this problem.

推荐答案

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

Try changing your firebase.json contents to:

{
  "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"，该文件夹实际上将不包含来自运行命令npm run build的任何HTML/JS/CSS资产. create-react-app 生产构建命令npm run build生成所有已编译的HTML/JS/CSS资源到目录"build":

Your current firebase.json points to folder "public", which will not actually contain any HTML/JS/CSS assets from running command npm run build. create-react-app production build command npm run build generates all the compiled HTML/JS/CSS resources to directory "build":

npm run build创建一个包含生产版本为的构建目录 您的应用.在build/static目录中将是您的JavaScript 和CSS文件. build/static中的每个文件名都将包含一个 文件内容的唯一哈希.文件名中的此哈希启用 长期缓存技术.

npm run build creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the file contents. This hash in the file name enables long term caching techniques.

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

Update the configuration, execute npm run build followed by firebase deploy to re-build and re-deploy.

此示例还包括配置为排除服务人员文件以及用于使用诸如react-router-dom之类的路由器的重写规则.如果它们不适用于您的项目，则可以将其删除.

This example also includes configuration to exclude service worker files as well as rewrite rules for the purposes of using a router such as react-router-dom. You can remove them if they do not apply to your project in any way.

更新: 同样在constants.js中，您应该将Firebase导入更新为以下内容以解决警告.假设您使用的是Firebase Auth和Firebase实时数据库:

Update: Also in constants.js you should update your Firebase imports to the following to resolve the warning. This assumes you are using Firebase Auth and Firebase Realtime Database:

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

希望有帮助！

这篇关于Firebase托管的网站将不会加载(但会在本地加载)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！