React/Firebase Hosting：页面刷新时为何要求用户登录？

我之前也碰到过类似的棘手问题，单页应用在本地跑完全正常，部署到Firebase后刷新就跳去App Engine登录页，大概率是路由配置或者旧部署残留的问题，给你几个具体的排查和解决步骤：

• 检查Firebase Hosting的重写规则
  React是单页应用，所有路由都需要由前端处理，刷新时服务器如果找不到对应路径的文件，就可能触发错误的重定向。打开你的firebase.json，确保hosting部分的rewrites配置正确指向index.html，正确配置应该像这样：

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

  这里要确认public字段指向的是React打包后的目录（默认是build），rewrites的source设为**，确保所有请求都返回单页应用的入口文件。

• 排查是否有旧的App Engine关联残留
  如果你的项目之前曾经关联过App Engine，可能有旧的配置没清理干净。可以运行firebase hosting:info查看当前Hosting的配置信息，确认没有和App Engine相关的设置。如果不确定，也可以重新初始化Hosting（运行firebase init hosting），过程中注意不要覆盖已有的build文件夹和代码。

• 检查Webpack的publicPath配置
  确保Webpack配置里的publicPath设置为'/'，这样所有静态资源的路径都是根路径，不会因为路径错误导致页面加载异常进而触发奇怪的重定向。比如在webpack.config.js里：

  module.exports = {
    // ...其他配置
    output: {
      publicPath: '/',
      // ...其他输出配置
    }
  }
  

• 清除Firebase Hosting缓存
  有时候部署后的缓存会导致旧配置依然生效，你可以在部署时加上清除缓存的参数：

  firebase deploy --only hosting -m "Clear cache and update routing"
  

  或者直接去Firebase控制台的Hosting页面，找到「缓存」选项手动清除缓存。

• 检查自定义域名配置（如果有使用）
  如果你绑定了自定义域名，确认域名的DNS记录是指向Firebase Hosting的官方IP，而不是之前App Engine的地址。可以在Firebase控制台的Hosting域名设置里查看正确的解析记录，对比你的域名服务商的配置。

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