API + SPA部署最佳实践

时间:2017-07-21 07:22:38

标签: laravel webpack vue.js single-page-application

在前端开发SPA(使用Vue.js)会消耗后端(Laravel)API中的端点,这会带来一些需要解决的挑战:

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

如果代码在两个VCS存储库(前端/后端)中分离,则同步前端和后端的部署可能很有挑战性,确保两者在完全相同的时间完成。否则,这可能导致意外行为(例如,调用尚未部署或已更改的端点)。有人想出一个很好的解决方案吗?解决这个问题的最佳做法是什么?如果版本化每一点变化都不是一种选择怎么办?

2。如何确保部署后刷新SPA的前端代码?

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

如何确保为用户提供最新的JS而不让他们在每次请求时重新加载整个应用程序?什么是最佳实践(除了强制用户通过websockets刷新整个页面)?是否有解决方案允许当前活跃的用户继续使用该应用程序而不必强制刷新,而他们可能刚刚完成了可以保存的内容?

我对你的发现,学习和解决方案非常感兴趣!

3 个答案:

答案 0 :(得分:3)

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

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

如果不是这样,我建议您使用一个可以链接两个存储库版本的版本控制系统。是的,这意味着对每个小的更改进行版本控制!

2。如何确保部署后刷新SPA的前端代码?

通常,我会避免做一些事情来强制刷新客户端代码库,但是如果您有很长的用户会话,那实际上是有道理的。

为此,您可以使用任何Web套接字实现(例如Pusher),并让您的CI通过Web套接字将任何部署通知前端。然后,前端可以将页面刷新排队。查看this article的实施方法。

答案 1 :(得分:1)

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

在过渡环境中,您可以在生产前运行两个测试套件。

2。如何确保部署后刷新SPA的前端代码?

不仅破坏您的API。实施宽限期。例如,您可以检查每个请求的更新,然后通知用户有新版本可用,以便他们必须尽早单击按钮。在数据库中记录使用的客户端版本。更新所有用户后,您可以删除旧的端点。

答案 2 :(得分:1)

我认为这两个问题紧密相关,无法单独回答。我有一些可能的策略来应对这种情况:

1。切勿在API中引入重大更改

API部署应该是渐进式的,而对于使用先前版本的用户而言,它不会破坏任何内容。这样,您可以简单地将更改推送到后端,并且在完成后端部署后,即可部署前端。如果您有单独的项目,则轻松实现。 对于主要版本,可以通过在API前面加上以下版本来实现:

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

次要部署只能是不影响前端功能的次要调整/错误修正。

这种方法是最好的,因为它可以确保用户活动中绝对没有停机时间,但是需要额外的工作,在许多项目中可能不可行。如果后端没有带来重大变化,则可以从前端实施简单的轮询系统(时间跨度较长,例如几分钟),以检测是否需要重新加载来加载新的前端部署。

2。过期请求的标准回复

  • 来自前端的每个请求都包含有关前端使用的版本的信息。可以是标准标头,也可以是参数。您应该在发送请求本身之前将请求包装在添加信息的函数中。

  • 如果服务器从过时的前端检测到请求,它将返回标准响应,例如:

{
    "error": "update required"
}
  • 前端检测到错误并重新加载页面

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