reactjs - 在 GCP App Engine 上使用代码拆分部署应用程序 - 加载 block * 失败

标签 reactjs google-app-engine google-cloud-platform code-splitting webpack-splitchunks

我们有一个使用 React 从 Create React App 创建的 Web 应用程序(前端)。该应用程序在 Google Cloud Platform App Engine Standard 上运行。我们的 Web 应用程序是代码拆分的。然后在用户导航中加载每个页面。

它工作得很好。例如,我们遇到的问题是用户 A 在应用主页上。我们部署了一个更改 block 文件名的修复程序。用户 A 然后尝试访问另一个页面,然后收到错误 Loading chunk * failed。获取文件的 url 现在返回 404,因为该文件已被一些新的 block 文件替换。

这是我在研究过程中发现的一个常见问题,但我没有找到适用于 Google App Engine 的解决方案。

这是一篇解释问题/解决方案的文章:https://mitchgavan.com/code-splitting-react-safely/

我想使用解决方案“解决方案 1:部署后将旧文件保留在您的服务器上”,但我看不到如何使用 GCP 执行此操作...

这是 app.yaml 文件

service: frontend
runtime: nodejs14
env: standard
instance_class: F1

handlers:
  - url: /(.*\..+)$
    static_files: build/\1
    upload: build/(.*\..+)$
  - url: /.*
    static_files: build/index.html
    upload: build/index.html

我们有以下调度文件(* 用于屏蔽 url)

dispatch:
  - url: "*"
    service: frontend

  - url: "www.*"
    service: frontend

最佳答案

之前没有尝试过,但看看它是否有意义/有效。

  1. 我们有一个 blog article关于从 GAE 下载源代码。它包含有关部署时源存储位置(暂存存储桶)的说明、源保留在那里的时间以及如何修改它在 Google 自动删除它之前保留的时间。

  2. 当您部署到 GAE 时,gcloud 只会部署已更改的文件(不会部署未更改的文件)。由于生成了新的哈希值,您现在有了"new"文件,旧文件不再存在于您的本地计算机上。我不知道 Google 是否会自动从上面第 1 点中的暂存位置删除这些文件。

  3. 我的建议是按照博客文章中的步骤(来自项目符号 1)更改(更改)文件在暂存存储桶中保留的时间。另一种选择是检查保留策略选项卡,看看您是否可以更改规则,以免文件被删除。如果您能够更改文件的保留时间或保留策略,它可能会解决您的问题。让我知道这是否有效

关于reactjs - 在 GCP App Engine 上使用代码拆分部署应用程序 - 加载 block * 失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69995272/

相关文章:

reactjs - REACT - 如何将 URL 字符串替换为 <a> 元素并正确渲染它

python - 异步延迟谷歌应用引擎中的多个任务

.net - 谷歌CP : 403 The caller does not have permission

android-studio - Android Studio 3 - 如何添加云端点模块

javascript - 如何使 Next.js "see"成为 react-dom 包?

javascript - React prop 的本地副本是只读的

python - 当我使用 App Engine SDK 在本地主机中部署我的谷歌云端点 python 应用程序时出错

linux - 如何执行命令 'appcfg rollback' ?

amazon-web-services - 在哪里部署用于 API 预测的机器学习模型?

javascript - 为什么在尝试使用 React 从另一个文件导入类时出现空白屏幕