laravel - API + SPA 部署最佳实践

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

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

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

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

<强>2。如何确保 SPA 的前端代码在部署后得到刷新?

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

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

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

最佳答案

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

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

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

<强>2。如何确保 SPA 的前端代码在部署后得到刷新?

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

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

关于laravel - API + SPA 部署最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45231485/

相关文章:

laravel eloquent 匹配多字表名时遇到问题

php - 在 Laravel 中使用用户过滤器缓存数据(不仅如此)

javascript - Webpack:将当前条目名称传递给 js?

Webpack 5 Node Polyfill 指令不起作用

javascript - Vue.js 中 'data:' 、 'data: ()' 和 'data()' 之间有什么区别

javascript - 如果存储 getter 更改而不重新加载页面,请重新运行 nuxt 路由中间件?

php - 尝试访问 int 类型值的数组偏移量 { DefaultValueBinder.php 第 82 行}

mysql - Laravel 5 具有多态关系的只读 View 模型

javascript - 如何在 React 中延迟加载 js 文件(针对多语言应用程序)

laravel - 计算属性返回未定义