如何将Flask + React应用程序部署到Azure Web Service [英] How to deploy a Flask+React application to Azure Web Service

问题描述

我一直在本地主机上开发此应用程序，该主机具有Flask作为后端( localhost:5000 )和React作为前端( localhost:3000 )，并且他们之间的交流一直很好.现在，我应该将其放到网上，以便其他人也可以看到它-我在Azure中经验不足，但是如何将这两个组件(React& Flask)部署到Azure Web应用程序服务上的一个URL中?(在我有使用FTP上载' build '文件夹到' site/wwwroot '文件夹以建立一个没有任何后端的简单React应用程序的经验之前)

解决方案

最新

测试后，将python项目部署在webapp中，将react项目部署在虚拟应用程序中，并将普通节点项目也部署在虚拟应用程序中.

将flask python项目部署到Windows环境中，正常的部署方法将失败，请确保按照此博客文档(第三方文档)进行操作，这对我有用.

效果如图所示.您可以看到普通节点项目可以正常访问，但是react项目不能.我认为有一些错误.(已提出支持请求以进行确认)

建议虚拟应用程序的部署方法采用下图所示的发布方法.

上级

由于Windows支持虚拟应用程序，因此建议在创建Azure Web应用程序时选择Windows.

我们可以正常部署flask应用程序，并在虚拟应用程序中部署react应用程序.

在通常情况下，两个Web应用程序的 process.env.port 是相同的，并且不会因虚拟路径而相互干扰.

参考文章:

1.同一Azure Web应用程序服务上的Vue前端和Express后端

2.Azure前门未在浏览器中维护自定义域

I have been working on this app on my localhost, which has Flask as the backend (localhost:5000) and React as the front end (localhost:3000), and they have been communicating well. Now I am supposed to put it up online so that other ppl can see it as well - I didn't have much experience in Azure, but how can I deploy these two components(React&Flask) into one URL on Azure web app service? (Before I had some experience in using FTP to upload the 'build' folder to a "site/wwwroot" folder to put up a simple React app without any backend)

解决方案

Newest

After testing, the python project is deployed in the webapp, the react project is deployed in the virtual application, and the normal node project is also deployed in the virtual application.

Deploy the flask python project to the windows environment, the normal deployment method will fail, please be sure to follow this blog document (third-party document) to operate, it works for me.

Running Flask app with HttpPlatformHandler in Azure App Services

The effect is shown in the figure. You can see that the normal node project can be accessed normally, but the react project is not. I think there are some bugs. (Has raised a support ticket to confirm)

The deployment method of virtual application is recommended to adopt the publishing method shown in the figure below.

Privious

It is recommended to choose windows when creating azure web app, because windows supports virtual application.

We can deploy flask app normally and deploy react app in virtual app.

Under normal circumstances, the process.env.port of the two webapps is the same and will not interfere with each other because of the virtual path.

Reference post:

1. Vue Frontend and Express backend on same Azure web app Service

2. Azure Front Door Is Not Maintaining Custom Domain in Browser

这篇关于如何将Flask + React应用程序部署到Azure Web Service的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！