Firebase 部署 --only hosting 不会更新 React.js webapp 内容，除非站点数据被清除

Question

我正在尝试更新已部署到 firebase 的 react.js 站点。如果不使用隐身模式 window 或使用开发工具 > 应用程序 > 清除存储 > 清除站点数据，则无法访问更新的内容。

我确定这是一个与 Firebase 托管相关的问题比与 React 更密切相关，但 React 的 service-worker.js 文件和 Firebase 之间似乎存在潜在干扰。因此，为了完整性，我标记了 React。

反应版本：16.8.6 Firebase CLI 版本：7.1.0

我的步骤是：

更改代码
$ npm 运行构建
$ firebase serve --only hosting || firebase 部署——仅托管
访问 .web.app 或 localhost:5000

期望：我会看到有新变化的网站现实：我看到的是旧站点，没有新的变化

研究和尝试的解决方案：

设置 Cache-Control Headers

我已经尝试在我的 firebase.json 文件中将 Cache-Control headers 设置为 "no-cache" for service-worker.js。 {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"} ]},

此处的 Create React App 部署文档中明确提到了这一点： https://facebook.github.io/create-react-app/docs/deployment

在无数 Stack Overflow 问题中，例如这里的问题：

不幸的是，即使我的 firebase.json 文件如下所示，问题仍然存在。这让我相信可能有一个新的、更新的问题。

摆弄 Service Worker：我还围绕 Service Worker 本身进行了研究。目前设置为 'unregister'，但我已将其设置为 'register' 并部署了多次，没有明显变化。

我不确定是否必须设置为 'register'，鉴于上面 #1 中的建议。

****firebase.json****

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
    ]
  }
}

****/src/index.js****

.....
const store = configureStore();
....

serviceWorker.unregister();


****directory structure****

/
firebase.json
firebase.src
build/
      /static
      service-worker.js
      index.html
      ....
....

Answer 1

最终，Reactjs 和 Firebase Hosting 都不是问题的根源。我只是发布这个以防有人处于类似情况并且怀疑上面的配置，它是正确的，使用它。

Redux-Persist 的 Persist Gate 未按预期工作，导致应用程序每次重新部署时都具有 mini-crashes。崩溃发生在版本号更新之前，使网站看起来像是没有收到更新。

清除缓存会解决 Redux-Persist 问题，因为它会清除本地存储中的数据，但这让我认为这是浏览器缓存问题，但事实并非如此。

如果您正在使用 Redux-Persist & Persist Gate 并看到非常相似的问题，请仔细查看 Persist Gate 是否允许组件在再水化之前呈现。我通过在 Redux 中使用 _persist 对象作为标志来解决它

Answer 2

以防有人遇到问题。我通过删除根文件夹中的 .firebase 文件夹并将其添加到我的 .gitignore 来解决它。它在缓存中保留以前构建的版本以加快部署速度。

我在配置多站点时遇到了一些问题。

Firebase 部署 --only hosting 不会更新 React.js webapp 内容，除非站点数据被清除

Firebase deploy --only hosting does not update React.js webapp content unless site data is cleared

firebase

reactjs

firebase-hosting