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

Question

我希望这适用于任何使用 webpack 构建 Assets / block 的 web 框架，在我的例子中是 Vue。

我的工作流程是:

开发一个功能

构建(npm 运行构建)

部署(eb 部署)

返回 1.

构建删除所有以前的 block ，并添加新的 block ，即

我的模块.1X3DF23.js
我的其他模块.9DFdw232.js

如果用户同时在前端没有刷新页面(SPA，不太可能)并浏览到依赖于已删除 block 的新 View ，他们会为那些丢失的旧 Assets 获得 404。

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

初步想法:

让网络应用程序以 30 秒的间隔 ping 后端，这将触发版本自动刷新。

有什么选择吗？

Answer 1

我会完全不删除以前的 block 。我不知道 elasticbeanstalk 是如何工作的，所以我将向您展示我的策略，使用一个好的旧 ubuntu 服务器。

基本上，您的 Vue 应用程序中有这些文件夹:

dist -> Contains the content of the built application with npm run build
node_modules
public
src
...

我所做的是创建一个名为 deploy 的新文件夹。因为 dist 的一个问题文件夹是 npm run build删除 dist 的内容构建开始时的文件夹。

拥有deploy文件夹，您可以随时保存所需的所有数据。

因此，当我构建项目时，我会将 dist 文件夹的内容复制到 deploy 文件夹中，而不删除之前的 block 。

为了避免deploy文件夹干扰 git，我将其添加到 .gitignore注册表。

您可以使用 bash 通过简单的递归粘贴来做到这一点:

cp -R dist/* deploy/

这将取代您的 index.html页面进入部署文件夹，但不会覆盖您以前的 block 。

此解决方案的问题:您的 deploy文件夹可能会变得很大，因为以前的 block 永远不会被删除。

此问题的解决方案:编写一个健壮的脚本，在部署应用程序时删除超过 1 天(或更多)的 block 。您可以根据文件的创建日期编写脚本。如果您精通 bash，请使用它。我个人更喜欢直接在 deploy.js 中用 node 编写这种脚本我项目根目录下的脚本..