React开发的Web应用部署到Firebase后显示白页如何解决

你当前部署白屏的核心原因是 firebase.json 配置的静态资源目录不正确：你指向了项目根目录的 public 文件夹，但React项目编译后的可部署产物并不在这个目录，而是在执行打包命令后生成的 build 目录下，按以下步骤操作即可完成部署：

• 第一步：修改firebase.json配置，调整hosting字段的内容，推荐同时添加单页应用的路由重写规则，避免前端路由刷新404：

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

• 第二步：在项目根目录执行React打包命令，生成可部署的静态产物：
  npm run build
  执行完成后根目录会生成build文件夹，里面包含所有编译压缩后的html、js、css、静态资源文件。
• 第三步：打包完成后再执行Firebase部署命令即可：
  firebase deploy

如果担心打包产物有问题，可以在部署前先本地验证build目录的运行效果，执行npx serve -s build，访问提示的本地端口确认应用正常运行后再执行部署操作。

内容的提问来源于stack exchange，提问作者Michel