Firebase deploy --only 托管不会更新 React.js webapp 内容，除非站点数据被清除答案

【问题标题】：Firebase deploy --only hosting does not update React.js webapp content unless site data is clearedFirebase deploy --only 托管不会更新 React.js webapp 内容，除非站点数据被清除
【发布时间】：2019-11-23 07:47:13
【问题描述】：

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

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

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

我的步骤是：

更改代码
$ npm run build
$ firebase serve --only 托管 || firebase deploy --only 托管
访问 .web.app 或 localhost:5000

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

研究和尝试的解决方案：

设置缓存控制标头

我尝试在我的 firebase.json 文件中将 service-worker.js 的 Cache-Control 标头设置为“no-cache”。 {"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 hosting - force browser to reset cache on new deploys?

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

摆弄 Service Worker：我还围绕服务人员本身进行了研究。它目前设置为“取消注册”，但我已将其设置为“注册”并多次部署，没有明显变化。

根据上面 #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
      ....
....

【问题讨论】：

标签： reactjs firebase firebase-hosting

【解决方案1】：

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

Redux-Persist 的 Persist Gate 未按预期工作，导致应用程序每次重新部署时都会出现小故障。崩溃发生在版本号等内容可以更新之前，使网站看起来好像没有收到更新。

清除缓存可以解决 Redux-Persist 问题，因为它会清除本地存储中的数据，但这让我认为这是浏览器缓存问题，其实不是。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：