以 Phoenix 应用程序作为代理运行 Vue 应用程序的正确方法

Question

现在，我正在 phoenix 应用程序中运行 Vue 应用程序。我首先创建了一个phoenix项目，然后启动了一个名为assets..的Vue应用程序，用于在开发环境中运行它。我已经添加了

watchers: [npm: ["run", "build", cd: Path.expand("../assets", __DIR__)]]

它每次都会创建一个build，它在app.html.eex 中使用，来自priv/static..

对于部署，我使用的是 phoenix 静态构建包。它在部署之前的生产环境中会先创建一个构建，然后运行 ​​phoenix app。一切正常。但由于它的错误方式..

没有利用 Vue 应用程序的整体优势。例如代码拆分/加载代码块仅页面请求。以及我们可以在 Vue 应用程序中使用的许多其他 webpack 功能都没有被使用，因为我们只是创建构建并将其投入生产。

我的问题是。我曾在 5 月的教程中看到使用您的 API 作为代理运行 Vue 应用程序。这样主应用程序将是 Vue，Phoenix API 将在代理后面工作。

现在我有这个设置可以在开发模式下部署和工作。我的问题是如何实现相反的效果？

启动 Vue 应用程序，它也会自动启动 phoenix 应用程序。也用于在 Heroku 上部署。 API 将简单地运行，但 Vue 应用程序将提供比 JS 或 CSS 文件静态文件更多的功能？

更新：是否可以制作一个 Vue 和一个 phoenix 的伞式应用程序？

Answer 1

这更像是一个扩展评论，但它变得非常大，所以我把它移到了一个答案。

要启动两个或更多应用程序，您需要像工头（在heroku 中，我认为有一个buildpack）或systemd，甚至从您的elixir 应用程序启动一个nodejs 服务器（不确定这在heroku 中是否可行）。

您也可以通过 phoenix 使用的 webpack 配置手动拆分您的组件，这可能比仅提供单个 js 文件涉及更多。需要考虑将其拆分为两个独立服务的原因，但这通常是通过具有不同的入口点来实现的（如果我没记错的话，我已经有一段时间没有以这种方式使用它了）。为了让 webpack 在拆分资产（css 和其他）方面发挥最佳效果，您还需要以 webpack 可以理解依赖项的方式编写您的 vue 组件（至少是这种情况 - 并且 webpack 分块可能存在一些复杂性和使用动态组件时的凤凰摘要等）。

其他选择是，例如，使用一个独立的 nuxt 应用程序，它将 VueJS 应用程序与你需要的一切捆绑在一起，webpack、服务器、vuex、合理的配置和“结构”等。现在你有两个不同的应用程序，运行每个 http 服务器，您可以使用 asyncData & fetch 使用来自 phoenix 应用程序的数据填充/隐藏您的前端，您可以使用异步组件和所有这些东西。然后将前端（nuxt 应用程序）部署到一个heroku 实例，将phoenix 服务器部署到另一个实例或其他地方。

此时，您的 phoenix 应用程序基本上是前端的 api。所以构建 vue 应用程序时必须牢记这一点，现在你有 2 个应用程序需要部署和处理。它确实在很多方面都有帮助，但它也更复杂（授权、cookie 等），因此如果值得这样做，为什么需要对其进行加权。主要的好处是，由于它们现在是 2 个应用程序，因此可以部署与前端相关的样式和内容，而无需重新部署后端。

根据前端的类型，您还可以将 nuxt 应用程序作为静态网站部署到 s3/cloudfront 或任何其他云存储引擎。例如，如果您喜欢，X 公共页面大部分都是静态内容，而所有动态数据都在登录墙或其他东西的后面，那么这也是一个可以正常工作的解决方案。

所有 3 种方法都有效，具体取决于您的需要/理由。