API + SPA部署最佳做法

Question

在前端（使用Vue.js）开发SPA并使用后端的（Laravel）API的端点会带来一些需要解决的挑战：

1.引入新的后端/前端代码时如何同步部署

如果将代码分隔在两个VCS存储库（前端/后端）中，则要同步同步前端和后端的部署以确保两者在同一时间完成可能会很困难。否则，这可能导致意外行为（例如，调用尚未部署或已更改的端点）。有人为此提出了一个很好的解决方案吗？您解决该问题的最佳做法是什么？如果无法对每个小的更改进行版本控制怎么办？

2.如何确保在部署后刷新SPA的前端代码？

因此，您设法使部署保持同步（请参阅问题1），但是如何确保每个当前活动的最终用户的SPA代码都得到刷新？启用webpack代码拆分后，对于在部署之间当前正在使用您的应用程序的用户，该应用程序可能会立即中断。

您如何确保为用户提供最新的JS，而不让他们在每次请求时都重新加载整个应用程序？什么是最佳做法（除了强制用户通过WebSocket刷新整个页面外）？是否有解决方案可以让当前活动的用户继续使用该应用程序，而不会在他们刚准备好可以保存的内容时被刷新？

我对您的发现，学习和解决方案非常感兴趣！

Answer 1

1. 引入新的后端/前端代码时如何同步部署

这里的最佳实践是将后端和前端保持在同一个 repo 中。当然，您可以从中提取一些可重用的代码以用于其他项目，但理想情况下代码库应该在同一个 repo 中，否则您将继续面临这些令人沮丧的代码同步问题。即使您查看流行的 Laravel 库 - 它们都在同一个 repo 中拥有前端和后端。

如果这不是选项，我建议您使用可以链接两个存储库版本的版本控制系统。是的，这意味着要对每一个小的变化进行版本控制！

2、如何确保SPA的前端代码在部署后正在刷新？

通常，我会避免强制刷新客户端代码库，但如果您有长时间的用户会话，这实际上可能是有意义的。

为此，您可以使用任何 Web 套接字实现（例如 Pusher），并让您的 CI 通过任何部署的 Web 套接字通知前端。然后前端可以将页面刷新排队。查看这篇关于如何实施的文章。

Answer 2

这两个问题是紧密耦合的，在我看来不能分开回答。我有一些可能的策略来处理这种情况：

1. 永远不要在 API 中引入重大更改

API 部署应该是增量的，不会破坏使用先前版本的用户的任何内容。通过这种方式，您可以简单地将更改推送到后端，并在后端部署完成后部署前端。如果您有单独的项目，则很容易实现。这可以通过在 API 前面加上版本来为主要版本执行：

https://website.url/api/v${version}/${endpoint}

而次要部署应该只是不破坏前端功能的微小调整/错误修复。

这种方法是最好的，因为它确保用户活动绝对不会停机，但需要额外的工作并且在许多项目中可能不可行。如果后端没有引入重大更改，您可以从前端实现一个简单的轮询系统（具有很长的时间跨度，例如几分钟），以检测是否需要重新加载以加载新的前端部署。

2. 过期请求的标准响应

{
    "error": "update required"
}

老实说，我不喜欢这种方法，因为请求可能是带有一些表单数据的 POST 请求，页面重新加载可能会丢失用户的所有输入，这很烦人。