Firebase部署成功后的空白页面

Question

当我使用npm start命令时,我的ReactJs应用程序在我的本地框上运行正常.但是,当我尝试使用firebase initto 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输出:

Answer 1

我遇到了同样的问题.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"
      }
    ]
  }
}

Answer 2

看看public你的财产package.json

"public": "public",

它指向firebase托管将查找您的应用程序的资源文件夹.如果资源文件夹为空,您将看到一个空白页面

当您构建您的react应用程序时build,如果您没有另外指定,则默认情况下所有文件都将转到该文件夹.因此,将公共属性设置为reactjs构建文件夹.

Answer 3

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

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

在某些情况下，它是有效的。

Answer 4

使用初始化Firebase应用程序后firebase init,您应该在项目的文件夹中有一个firebase.json文件.问题是公钥必须指向您的构建文件夹.例如,在创建反应的应用程序内生成文件夹是建立/你已经跑后NPM运行生成的第一次.然后firebase.json必须看起来类似于这个:

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

公钥指向构建.然后尝试使用firebase部署进行另一次部署.

Answer 5

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

Answer 6

检查是否homepage在package.json中没有设置属性。之所以拥有它，是因为我一开始也要部署到Github页面。删除它，对其进行重建，重新部署和工作。