成功部署 Firebase 后的空白页面答案

【问题标题】：Blank page after successful Firebase deployment成功部署 Firebase 后的空白页面
【发布时间】：2019-02-10 03:10:40
【问题描述】：

当我使用npm start 命令时，我的 ReactJs 应用程序在我的本地机器上运行良好。但是，当我尝试使用 firebase init 将我的应用程序部署到 Firebase 时，我看到一个空白页。我可能做错了什么？

更新：我必须编辑 Firebase.json 文件以删除

"predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint"],

因为我遇到了与此相关的错误。

Firebase.json：

{
  "database": {
    "rules": "database.rules.json"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "source": "functions"
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

Firebase 部署命令输出：

=== Deploying to 'socialmedia-5ec0a'...

i  deploying database, storage, firestore, functions, hosting
i  database: checking rules syntax...
+  database: rules syntax for database socialmedia-5ec0a is valid
i  storage: checking storage.rules for compilation errors...
+  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
+  firestore: rules file firestore.rules compiled successfully
i  functions: ensuring necessary APIs are enabled...
+  functions: all necessary APIs are enabled
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  functions: preparing functions directory for uploading...
i  hosting[socialmedia-5ec0a]: beginning deploy...
i  hosting[socialmedia-5ec0a]: found 5 files in public
+  hosting[socialmedia-5ec0a]: file upload complete
i  database: releasing rules...
+  database: rules for database socialmedia-5ec0a released successfully
+  storage: released rules storage.rules to firebase.storage/socialmedia-5ec0a.appspot.com
+  firestore: released rules firestore.rules to cloud.firestore
i  hosting[socialmedia-5ec0a]: finalizing version...
+  hosting[socialmedia-5ec0a]: version finalized
i  hosting[socialmedia-5ec0a]: releasing new version...
+  hosting[socialmedia-5ec0a]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/socialmedia-5ec0a/overview
Hosting URL: https://socialmedia-5ec0a.firebaseapp.com

Chrome F12 输出：

【问题讨论】：

你跑npm run build了吗？
我遇到了同样的问题，但解决了，将"hosting" 更改为"public": "build"，再次运行npm run build，然后运行firebase deploy

标签： reactjs firebase npm web-applications firebase-hosting

【解决方案1】：

看看你package.json的public属性

"public": "public",

它指向 Firebase 托管将在其中查找您的应用程序的资源文件夹。如果资源文件夹为空，您将看到一个空白页面

当你构建你的 react 应用程序时，如果你没有另外指定，所有文件默认都放在build 文件夹中。因此，将 public 属性设置为您的 reactjs 构建文件夹。

【讨论】：

【解决方案2】：

我遇到了同样的问题。 http://localhost:3000/ 为应用程序提供了良好的服务，但是当我使用 npm run build 和 firebase deploy 进行部署时，我只是看到一个空白页。

我不确定原因，但我将 firebase.json 中的“public”属性更改为“build”并且它起作用了。

这是我的新 firebase.json 文件。

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

【讨论】：

我使用 npm run-script build 命令生成构建文件。
在我发布我的 8 小时后发布与我完全相同的答案有什么意义？？
此设置会将公用文件夹指向您的构建文件夹...在这种情况下是构建文件所在的位置:)
您还需要确保您的 package.json 脚本中至少有这些项目..."scripts": { "start": "react-scripts start", "build": "react-scripts build", "predeploy": "npm run build", "deploy": "firebase build" }
在我的情况下，我需要 "public":"build" 并且需要将 "rewrites" 数组添加到我的 firebase.json 文档中。

【解决方案3】：

您还可以检查更改firebase.json 文件是否不起作用的另一件事。

在 Chrome 开发工具中，转到 Application->Clear Storage
点击clean site data
然后refresh 应用程序。

在某些情况下，它有效。

【讨论】：

【解决方案4】：

使用 firebase init 初始化 Firebase 应用程序后，您的项目文件夹中应该有一个 firebase.json 文件。问题是公钥必须指向您的构建文件夹。例如，在你第一次运行 npm run build 之后，在 create-react-app 中构建文件夹是 build/。那么 firebase.json 必须看起来类似于这个：

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

要构建的公钥点。然后尝试使用 firebase deploy 进行另一个部署。

【讨论】：

【解决方案5】：

检查您没有在 package.json 中设置 homepage 属性。我拥有它是因为我一开始也在部署到 Github 页面。删除、重建、重新部署和工作。

【讨论】：

这是我的解决方案。在观看开发工具时，它一直试图从基于主页属性的 url 中提取静态文件。删除了属性，一切正常。
这也是我的解决方案。所以我选择 firebase 而不是 Github。

【解决方案6】：

如果更改 firebase.json 中的 'public' 属性不起作用，那么首先找出您的 index.html 文件在哪个文件夹中，确保它是您编写的 index.html，因为 firebase 可能会模拟index.html 在主文件夹中并将您的 index.html 移动到“build”文件夹中，它可能还有另一个文件夹，其中包含您的应用程序的名称在“build”文件夹中。然后您需要将 firebase.json 中的 'public' 属性更改为该文件夹的名称，如下所示：

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

【讨论】：

【解决方案7】：

100% 工作示例。

解决了 Firebase 中 React 应用托管中的空白页错误。

在blog找到解决方案

在几分钟内托管您的 React Web 应用程序。

顺序错误 =>

firebase 登录

firbase 初始化

firebase 部署

npm 运行构建

正确的顺序 =>

firebase 登录

firbase 初始化

npm 运行构建

firebase 部署

【讨论】：

【解决方案8】：

我遇到了同样的问题。但是在指向构建文件夹之后。 . .我仍然看到一个空白的主机。在这种情况下，您可以复制包含 firebase 初始化代码的构建文件夹，并将其粘贴到公用文件夹中。确保将<div id=root> </div> 添加到正文部分，然后再次添加npm run build。还要确保您的 firebase.json 指向前面文章中提到的构建。

【讨论】：

【解决方案9】：

使用构建来构建

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

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。

【解决方案10】：

删除 .firebase 文件夹
删除您的构建文件夹并通过“npm run build”重新构建它
然后再次通过“firebase init”初始化您的应用
您想使用什么作为您的公共目录？ build // public 直接应该是 build
配置为单页应用程序（将所有 URL 重写为 /index.html）？是 // 重写规则是的
使用 GitHub 设置自动构建和部署？ (y/N) n // 自动构建 no
文件 build/index.html 已经存在。覆盖？ (y/N) n // 不应该重写 index.html 最重要的部分
firebase deploy // 一切顺利。

【讨论】：

【解决方案11】：

如果您也将其部署到 GitHub，只需从 package.json 文件中删除 homepage 键即可。它对我有用，希望对你也有用。

【讨论】：

【解决方案12】：

我发现 Firebase 托管需要一些时间才能让您的所有网站运行。对我来说，第一次上传最多需要 30 分钟。后续更新应立即上传。

如果您在检查器开发人员工具中注意到只有 html 页面处于活动状态，而页面的其余部分没有，那么这可能是解决方案。

所以我的建议是耐心点，喝杯咖啡:)

【讨论】：