node.js - Heroku 部署困惑 : Vue. js 前端与 Flask 后端

Question

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

所有代码都可以在此 Github 存储库中找到:https://github.com/justintranjt/thrive-test

• 在开发过程中，我一直像这样运行应用程序:

In one terminal run thriveApp.py. In another terminal run npm run dev. Navigate to localhost:8080 which is the local server running the Vue.js application.

这就是应用程序在 Heroku 上运行的方式吗？或者 Vue 应用程序是使用 npm run build 运行的吗？在这种情况下，我必须获取生成的构建文件夹并将其提供给 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 部署的任何其他建议或技巧也会有所帮助，因为我目前对部署感到非常困惑。

Answer 1

Is this how the application will be run on Heroku?

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

Or is the Vue application run using npm run build?

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

But will this work when deployed to Heroku?

这设置起来会非常棘手。这是我不会在同一台(虚拟)服务器上部署前端和后端的原因之一。

modules from the Vue app specified by package.json are not installed

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