reactjs - How to deploy a Flask+React application to Azure Web Service

Question

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)

Answer 1

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