Configuring Azure Application Gateway as a Reverse Proxy for Azure Static Web App

Question

How can Azure Application Gateway be configured to act as a reverse proxy for a static web app?

I have two web applications: app1, deployed in an Azure VM, and app2, deployed in Azure Static Web Apps. A custom domain has been set up for app1 as www.example.com. I want to set up a subdomain or path that redirects to app2 without altering the app1 custom domain, specifically to www.example.com/app2. It is essential that this URL www.example.com/app2 redirects to app2 while keeping the root domain as www.example.com.

Currently, Application Gateway is used to manage traffic to various applications, and the goal is to continue using it without introducing additional services like Azure Front Door. The requirement is for Application Gateway to function as a reverse proxy to the static web app instead of simply redirecting to the static web app URL (301 moved permanently).

Note: I have configured a backend pool with an FQDN pointing to the Static Web App URL. This is causing the application gateway to redirect instead of proxying the traffic to Static App.

Expectations:

• app1 --> www.example.com
• app2 --> www.example.com/app2

Answer 1

Hi AzureKnwGt-8579

By the above scenario we can use the This is achievable through URL path-based routing rules and URL rewrite rules. 

In your Application Gateway configuration, ensure that you have defined backend pools for your  vm and static web app.

Create route rule default domain to app1 backend pool

Under Routing rules, configure a path-based rule to route requests for /app2/* to the app2 backend pool.

Repeat the same process to the root (/) continue to route to app1.

Create or update the HTTP settings to enable Override with new host name. This ensures that the host header is set to the backend pool’s host name.

Set up a URL rewrite rule to modify the incoming URL path. This rule should rewrite www.example.com/app2 to the root path of your static web app.

create a listener for the backend pool. In the listener, set the "Protocol" to HTTP, and set the "Hostname" to www.example.com. Finally, set the "Path-based routing" to "Enabled", and add a rule to route requests with the path "/app2" to the backend pool.

Reference:

Rewrite HTTP headers and URL with Azure Application Gateway | Microsoft Learn

Tutorial: Create an application gateway with URL path-based routing rules using Azure portal | Microsoft Learn

Azure Application Gateway features | Microsoft Learn

---

Please don’t forget to close the thread by clicking "Accept the answer" wherever the information provided helps you, as this can be beneficial to other community members.