Heroku部署混乱:带有Flask后端的Vue.js前端 [英] Heroku deployment confusion: Vue.js frontend with Flask backend
问题描述
我目前正在使用一个Web应用程序，该Web应用程序包含一个Vue.js前端以及一个Flask后端作为REST API.它们分别在我的仓库中分为客户端和服务器文件夹.我希望通过Github部署功能将其部署到Heroku，但是遇到一些错误和需要澄清的问题.
I currently a web app involving a Vue.js frontend with a Flask backend acting as a REST API. They are divided into the client and server folders in my repo, respectively. I am looking to deploy it to Heroku via the Github deployment feature but am running into some errors and questions I need clarified.
所有代码都可以在此Github存储库中找到: https://github.com/justintranjt/thrive -测试
All code can be found in this Github Repo: https://github.com/justintranjt/thrive-test
- 在开发中，我一直在像这样运行应用程序:
在一个终端中运行 thriveApp.py .在另一个终端中，运行 npm运行dev .导航到正在运行本地服务器的localhost:8080 Vue.js应用程序.
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上运行吗?还是使用 npm run build 运行Vue应用程序?在那种情况下，我将不得不使用生成的构建文件夹并将其提供给Flask应用程序，对吗?
Is this how the application will be run on Heroku? Or is the Vue application run using npm run build? In that case I would have to take the produced build folder and serve it in the Flask application, correct?
-
此外，我在前端和后端之间的一些链接指定本地工作的localhost:8080和localhost:5000(8080是Vue，5000是Flask).但是部署到Heroku上可以正常工作吗?
In addition, some of my links between the frontend and backend specify localhost:8080 and localhost:5000 (8080 is Vue and 5000 is Flask) which work locally. But will this work when deployed to Heroku?
<b-form>
<b-button variant="primary" href="http://localhost:5000/loginPage">Login via CAS</b-button>
</b-form>
您可以在此处，我的Vue应用程序中有一个按钮，该按钮链接到由Flask应用程序路由的登录页面.在Heroku上运行时，我是否必须更改URL中表示 localhost:5000 的部分?
As you can see here, I have a button in my Vue application that links to a login page routed by my Flask application. Will I have to change the portion of the URL that says localhost:5000 when running on Heroku?
- 最后，当我当前尝试在Heroku上构建应用程序时，仅将代码的Python部分识别为package.json指定的Vue应用程序中的模块，而未安装require.txt指定的Python插件，而由Heroku.
我感觉所有这些问题通常都是相互关联的.关于Heroku部署的任何其他建议或技巧也将有所帮助，因为我目前对部署非常困惑.
I have a feeling all of these questions are generally related to each other. Any other advice or tips regarding Heroku deployment would also be helpful as I'm quite confused about deployment at the moment.
推荐答案
应用程序将在Heroku上运行吗?
Is this how the application will be run on Heroku?
不！ npm run dev使用dev模式在vue内启动整个开发服务器，并进行热重载.这会产生很多开销，尤其是在文件大小方面.
No! npm run dev spins up an entire development server with vue in dev mode and hot reloading. That's a lot of overhead, especially when it comes to file sizes.
还是使用npm run build运行Vue应用程序?
Or is the Vue application run using npm run build?
种类. Vue完全不需要在您的服务器上运行，而是全部在客户端. npm run build将文件打包并缩小到dist文件夹，您将只剩下html，css和javascript-这是生产环境中需要的所有前端代码-无需部署任何源代码文件.您需要做的就是从任何服务器提供这些静态文件. 可以由您的烧瓶或仅由任何apache，nginx等完成.
Kind of. Vue doesn't need to run on your server at all, it's all client-side. npm run build bundles and minifies your files to a dist folder, you'll be left with only html, css and javascript - this is all of the frontend code that needs to be on your production environment - no need to deploy any of the source files. All you need to do is serve those static files from any server. This could be done by your flask, or just any apache, nginx etc.
但是将其部署到Heroku上可以正常工作吗?
But will this work when deployed to Heroku?
设置起来非常棘手.这是我不将前端和后端部署在同一(虚拟)服务器上的原因之一.
That will be very tricky to setup. It's one of the reasons why I would not deploy front- and backend on the same (virtual) server.
package.json指定的Vue应用程序中的模块未安装
modules from the Vue app specified by package.json are not installed
如果部署捆绑的前端而不是源代码，这将不再是问题.我仍然建议从其他环境中服务前端.
If you deploy your bundled frontend instead of the source code this wont be an issue anymore. I still recommend serving the frontend from a different environment.
这篇关于Heroku部署混乱:带有Flask后端的Vue.js前端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
