node.js - 带有 Node API 的 Vue 应用程序 : project structure

Question

对于我的第一篇文章，我想征求您对带有使用 API 的 Node 的 Vue 应用程序的意见。

对于一个小项目，我正在两个文件夹中进行本地工作:- 客户端(VueJs)- 服务器( Node )

并使用 npm 单独运行它们:- npm 运行开发- npm 运行 watch

到目前为止，一切都很好，因为我可以开发我的应用程序...但是有关部署，我有点迷失了。

对于 VueJs 端，我使用以下命令构建生产应用程序:npm run build我的应用程序已在 client/dist 中创建

对于我的服务器，我可以使用 Forever、Nodemon 或任何东西......

但是，这是我的问题:我如何在同一个实例中部署两者？

到目前为止，我认为我可以在构建它时将 dist 文件夹移动到服务器端。

但我想使用两个不同的端口将它们分开:一个用于 API，一个用于客户端。

由于我独自学习，我不知道最佳实践，任何提示将不胜感激。

(顺便说一句，我正在尝试将其部署在 Google Cloud 实例上，但我也迷路了)

感谢您的阅读

Answer 1

最重要的是，您不能将前端和后端部署在不同的端口上并期望它们相互通信。浏览器安全模型将启动并阻止客户端返回。

也就是说，只要它们位于同一域上，您就可以单独部署(尽管它们可能是不同的子域，例如 www.example.com 和 api.example.com)。

这在一定程度上取决于您使用的 Google 云资源，但常见的版本是从 Google 云计算中获取一台虚拟机，将客户端和服务器推送到其中，然后设置一个 Web 服务器(例如 NGINX)来为一个路径或子域上的客户端文件提供服务，并通过不同的路径或子域充当您的 api 的反向代理。这是一个有据可查的方法/架构。