Share via

Application Gateway with Static Web Apps Not working

BM 5 Reputation points
2023-04-22T20:02:13.4766667+00:00

I have an web application i'm trying to deploy to Azure. There is an App Service API backend and a Static Web App front end. I'm using Application Gateway to route the traffic to the 2 application. I have a custom domain name setup and it's pointing to the public IP of the application gateway. I have one listener in the gateway that is configured by a path based rule. 1 rule for the api to the app service which is working perfectly. I can make a request to my custom domain: www.custom-domain.com/api/gethealth and it works. However, when i try to reach the static app via the gateway, by going to: www.custom-domain.com if i have Override with new host name set to No, it get a 404 when i access www.custom-domain.com but if i have Override with new host name set to Yes and then select Pick host name from backend target, when i visit www.custom-domain.com, it redirects me to the ****.azurestaticapps.net url and doesn't use my custom-domain URL. I've tried adding a custom domain to the Static Web App, but then it puts it in a Redirect Loop and the page is not accessible. All the documentation i find points me to Azure App Service which is working fine. I can't find the correct config for the Static Web App. I've followed this guide and it doesn't work. https://learn.microsoft.com/en-us/azure/architecture/best-practices/host-name-preservation This seems like a pretty basic config, but i've spent days on this and for whatever reason, it just doesn't work. I really appreciate your help.

Azure Application Gateway
Azure Application Gateway
An Azure service that provides a platform-managed, scalable, and highly available application delivery controller as a service.
1,014 questions
Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
7,408 questions
Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
851 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. SnehaAgrawal-MSFT 20,856 Reputation points
    2023-04-24T11:45:33.37+00:00

    @BM Thanks for asking question! If you want to configure static web app behind Azure Application Gateway, then to restrict traffic to a specific CDN, configure your CDN to add a header containing a predefined, secret value to every request, and configure Static Web Apps to require the header.

    To restrict traffic to an Azure Application Gateway, configure your app to only allow traffic from your Application Gateway's IP.

    Also, configure your app to allow forwarding of your CDN or Application Gateway's hostnames.

    Also could you confirm if you have configured the custom domain for your Static Web App, correctly by referring to official doc: Set up a custom domain with Azure DNS in Azure Static Web Apps

    See video link here might be helpful. Let us know.

    0 comments