Heroku 部署混乱：Vue.js 前端与 Flask 后端

Posted 2023-02-22

【中文标题】Heroku 部署混乱：Vue.js 前端与 Flask 后端

【英文标题】：Heroku deployment confusion: Vue.js frontend with Flask backend

【发布时间】：2019-04-07 14:57:42

【问题描述】：

我目前的网络应用程序涉及一个 Vue.js 前端和一个充当 REST API 的 Flask 后端。它们分别在我的仓库中分为客户端和服务器文件夹。我希望通过 Github 部署功能将其部署到 Heroku，但遇到了一些我需要澄清的错误和问题。

所有代码都可以在这个 Github Repo 中找到：https://github.com/justintranjt/thrive-test

在开发中，我一直这样运行应用程序：

在一个终端中运行 thriveApp.py。在另一个终端运行 npm run dev。导航到 localhost:8080 这是正在运行的本地服务器 Vue.js 应用程序。

这就是应用程序在 Heroku 上运行的方式吗？还是使用 npm run build 运行 Vue 应用程序？在这种情况下，我必须获取生成的构建文件夹并将其提供给 Flask 应用程序，对吗？

此外，我在前端和后端之间的一些链接指定了本地工作的 localhost:8080 和 localhost:5000（8080 是 Vue，5000 是 Fl​​ask）。但是当部署到 Heroku 时这会起作用吗？

<b-form>
    <b-button variant="primary" href="http://localhost:5000/loginPage">Login via CAS</b-button>
</b-form>

如您所见here，我的 Vue 应用程序中有一个按钮，它链接到我的 Flask 应用程序路由的登录页面。在 Heroku 上运行时，我是否必须更改 URL 中显示 localhost:5000 的部分？

最后，当我目前尝试在 Heroku 上构建应用程序时，只有代码的 Python 部分被识别为 package.json 指定的 Vue 应用程序中的模块未安装，而 requirements.txt 指定的 Python 插件由安装Heroku。

我感觉所有这些问题通常都是相互关联的。关于 Heroku 部署的任何其他建议或技巧也会有所帮助，因为我目前对部署感到很困惑。

【参考方案1】：

这就是应用程序在 Heroku 上运行的方式吗？

不！ npm run dev 在开发模式和热重载下使用 vue 启动整个开发服务器。这是很大的开销，尤其是在文件大小方面。

或者 Vue 应用程序是使用 npm run build 运行的？

有点。 Vue 根本不需要在你的服务器上运行，它都是客户端。 npm run build 将您的文件捆绑并压缩到 dist 文件夹，您将只剩下 html、css 和 javascript - 这是您生产环境中需要的所有前端代码 - 无需部署任何源代码文件。您需要做的就是从 any 服务器提供这些静态文件。这可以由您的烧瓶或任何 apache、nginx 等完成。

但这在部署到 Heroku 时会起作用吗？

这将是非常棘手的设置。这是我不会在同一（虚拟）服务器上部署前端和后端的原因之一。

未安装 package.json 指定的 Vue 应用程序中的模块

如果您部署捆绑的前端而不是源代码，这将不再是问题。我仍然建议从不同的环境为前端提供服务。

【讨论】：

听起来不错。所以似乎解决方案是使用 npm run build 捆绑前端，它会生成一个名为 dist 的静态文件文件夹，并让 Flask 应用程序为 dist 服务，对吗？此时 Heroku 将正确运行 Flask 应用程序，同时从捆绑的前端提供正确的文件。如果这是错误的，或者您想提出更好的解决方案，请纠正我！您能否解释一下“从不同环境为前端提供服务”作为替代方案的含义？感谢您的帮助。

run serve 捆绑的文件用于生产，是的。不过，从哪里为他们服务的决定取决于。如果你正在构建一个带有客户端路由的单页应用程序，你可能不希望你的烧瓶应用程序为它提供服务，至少如果你的后端确实是一个 rest api，因为在这种情况下服务于前端的环境将需要将所有传入请求重新映射到单个路由，如下所示：router.vuejs.org/guide/essentials/…，这会弄乱您的 REST API 路由。