Firebase Hosting部署故障问询：React应用本地正常线上报错

故障特征 #

React应用本地localhost运行完全正常，部署到Firebase Hosting初始运行正常，数天后触发故障，且同账号下所有Firebase应用均出现相同问题。

故障参考截图 #

排查&修复步骤 #

• 缓存规则配置修正
  Firebase Hosting默认缓存策略可能导致新旧构建产物冲突，需修改项目根目录下的firebase.json配置，针对HTML文件设置不缓存，静态资源设置长期缓存：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "**/*.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source": "static/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000, immutable"
          }
        ]
      }
    ]
  }
}

• 更新Firebase CLI后重新部署
  旧版本Firebase CLI存在资源上传不完整的已知bug，先升级CLI到最新版，再重新构建部署：

# 升级Firebase CLI
npm install -g firebase-tools@latest
# 重新构建React应用
npm run build
# 部署到Firebase Hosting
firebase deploy --only hosting

• 校验路径与环境变量配置

1. 检查package.json中homepage字段，根域部署可设置为"."，子路径部署填写对应子路径地址
2. 核对Firebase控制台配置的线上环境变量，和本地开发环境的变量配置保持一致，避免硬编码本地变量未同步到线上

• 清除服务工作者缓存
  如果应用开启了PWA功能，旧的服务工作者会缓存错误资源，可在构建完成后删除build/service-worker.js文件，或在应用代码中添加服务工作者强制更新逻辑。

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