React应用本地运行正常但部署到Firebase后无法访问

云原生阿岚

2026-7-4

解决React-Firebase部署后「Site Not Found」问题

以下是针对该问题的排查和解决步骤：

检查Firebase控制台部署状态
登录Firebase控制台，进入对应项目的「托管」页面，查看最新部署记录是否显示成功。若记录中有错误，根据日志提示修复；若无最新记录，说明firebase deploy未完成上传，需排查命令执行问题。同时尝试直接访问Firebase默认的*.firebaseapp.com域名，排除自定义域名配置干扰。
验证build文件夹完整性
本地执行npm run build后，打开项目根目录下的build文件夹，确认存在index.html文件以及static/css、static/js等静态资源文件夹。若文件缺失，删除node_modules和package-lock.json，重新执行npm install后再打包，排查依赖安装或打包过程中的隐性错误。
确认firebase.json配置细节
确保hosting字段的public值为"build"，且重写规则适配React单页应用。标准配置示例：
```
{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```
避免误将public设为React开发阶段的public文件夹，这会导致部署未打包的开发文件。
清理Firebase本地缓存与认证
执行以下命令重置本地Firebase状态：
```
firebase logout
firebase login
```
用firebase projects:list确认当前关联项目正确，若有误则用firebase use <你的项目ID>切换目标项目。再执行firebase deploy --debug，通过调试日志排查权限问题、文件上传失败等隐性错误。
排除浏览器缓存干扰
部署完成后，使用浏览器强制刷新（Ctrl+Shift+R / Cmd+Shift+R）打开页面，或用隐私模式访问，避免旧缓存导致的「Site Not Found」显示。