部署SPA时如何确保前端的无缝可用性？

Question

我希望这适用于使用webpack构建资产/块的任何Web框架，在我的情况下是Vue。

我的工作流程是：

1. 开发功能
2. 构建（npm运行构建）
3. 部署（eb部署）
4. 返回1。

建筑物会删除所有以前的块，而会添加新的块，即

my-module.1X3DF23.js
my-other-module.9DFdw232.js

如果用户同时在前端而不刷新页面（SPA不太可能），并浏览到依赖于已擦除块的新视图，那么对于那些丢失的旧资产，他们会得到404。

到目前为止，我一直在增加版本号以及来自服务器的所有XHR请求。如果应用程序注意到更改，它将重新加载自身。但是，如果块中出现404错误，则无论如何都不会调用XHR请求。

初步想法：

1. 让网络应用以30秒的间隔对后端执行ping操作，这将触发版本自动刷新。

还有其他选择吗？

Answer 1

我建议您执行以下操作

请考虑按以下方式使用静态网址资源

  

abc.com/v1/module.123.js

我建议您保留

  

v1

在您的内部版本更新之间相同。

Webpack将生成如下的新文件名

  

build1：module.123.js

     

build2：module.234.js

每当内部版本之间module.js的内容发生变化时。

在构建更新期间，请确保您没有删除

  

v1

服务器中的

文件夹。您可以合并旧文件夹和新文件夹，而无需进行完全替换。通过这样做，您将同时拥有

  

module.123.js

     

module.234.js

服务器中v1文件夹中的

。这样可以避免SPA中出现http 404错误。

您可以通过其他过程将构建更新通知用户，并要求他刷新浏览器以获取更改。可以使用Server Sent Event

向用户发送此更改通知。

您可以每6个月左右将V1文件夹更改为V2或其他一些适合您清理未使用文件的内容。

Answer 2

如果您的应用程序是100％静态应用程序，则可以使用AWS S3存储桶。要更新您的应用程序，您只需要更新您的存储库即可。

aws s3 sync --delete / source / destiny

我们一直在这样做，并且您所期望的更新是无缝的。