Traffic Manager for Static Web App

Yogesh Sharma 21 Reputation points
2022-04-27T10:10:34.137+00:00

Hi,

I have two Static Web App which I want to put behind Azure Traffic Manager with Weighted routing method.

Static Web App 1: ms.azure.yogeshsharma.me
Static Web App 2: int.azure.yogeshsharma.me

Added both of them to Traffic Manager with DNS Name: http://weighted.trafficmanager.net

However getting an error as below:

=-=-=-=-=
404 Web Site not found.
You may be seeing this error due to one of the reasons listed below :

Custom domain has not been configured inside Azure. See how to map an existing domain to resolve this.
Client cache is still pointing the domain to old IP address. Clear the cache by running the command ipconfig/flushdns.
Checkout App Service Domain FAQ for more questions.
=-=-=-=-=

Also tried adding custom header as "host:ms.azure.yogeshsharma.me" and "host:int.azure.yogeshsharma.me" for respective Endpoint in ATM.

Can you suggest how can we ATM for load balancing between multiple Static Web App.

Azure Traffic Manager
Azure Traffic Manager
An Azure service that is used to route incoming network traffic for high performance and availability.
110 questions
Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
6,690 questions
Azure Static Web Apps
Azure Static Web Apps
An Azure service that provides streamlined full-stack web app development.
738 questions
{count} votes

Accepted answer
  1. brtrach-MSFT 14,476 Reputation points Microsoft Employee
    2022-04-28T16:21:35.75+00:00

    @Yogesh Sharma Thank you for your detailed reply.

    My sandbox just completed DNS verification and I am encountering the same issue as you. Documentation specifically states, "External endpoints are used for IPv4/IPv6 addresses, FQDNs, or for services hosted outside Azure. Theses services can either be on-premises or with a different hosting provider." Just below that part of the document, it lists the services formally supported within Azure.

    Azure endpoints are used for Azure-based services in Traffic Manager. The following Azure resource types are supported:

    PaaS cloud services.
    Web Apps
    Web App Slots
    PublicIPAddress resources (which can be connected to VMs either directly or via an Azure Load Balancer). The publicIpAddress must have a DNS name assigned to be used in a Traffic Manager profile.

    Please note that Static Web Apps is a different product with a different underlying architecture than Web Apps and Static Web Apps does not currently support Public IP addresses.

    We apologize but Static Web Apps are not supported with ATM at this time as there is no official Azure endpoint. There are two other options that we are going to suggest below but we understand your interest in ATM. You can request Static Web Apps to be added to ATM on Azure Feedback, which the product group watches for future product ideas.

    With that being said, there are two other routes we can think of. We would suggest that you consider using enterprise-edge, which is a built in feature now within Static Web Apps that offers global balancing of your site with little to no additional configuration required by you. Please see here and here for additional information.

    If you want further control or your project requirements limits you from using a preview feature, you will likely need to use Azure Front Door service directly, which has documentation and provides similar load balancing features. Azure Front Door offers many services but one of them is load balancing. This will require more manual configuration but give you greater control than the enterprise-edge feature that is built into Azure Static Web Apps.

    I was not able to find any first party documentation to highlight the load balancing features but this 3rd party blog does a good job explaining the possibilities available within Azure Front Door.

    Please let us know if you have any further questions or concerns.

    1 person found this answer helpful.

3 additional answers

Sort by: Most helpful
  1. brtrach-MSFT 14,476 Reputation points Microsoft Employee
    2022-04-28T04:37:25.26+00:00

    @Yogesh Sharma Thank you for your question regarding Azure Traffic Manager (ATM) and Azure Static Web Apps. We apologize for the frustration you have encountered with receiving 404 errors.

    Can you please verify if you added the traffic manager endpoints with the local domain (.azurestaticapps.net) or with your custom domain (contoso.com)? We have only seen Azure Static Web Apps work with ATM in the past if used with a custom domain name as the endpoint.

    The below steps worked for a previous customer and I am in the process of validating them myself. CNAME validation can take up to 12 hours so I am waiting on that to complete but I wanted to go ahead and share this with you while I await the results.

    1. Under your custom domain DNS, create a CNAME record with the following values

    Name: www

    Type: CNAME

    Alias record set: No

    Alias or value: YOURSTATICWEBAPPNAME.azurestaticapps.net -----this is found under your static web apps "Custom domain" tab

    1. Go back to your static web app and validate the newly created CNAME record, do this by going to "Custom domain" tab and clicking "Add" then put the www.YOURCUSTOMDOMAIN.com in the domain name box, then proceed to the next page of "Validate + Configure" and select the CNAME option and press add. this can take a few minutes for validation
    2. After all these steps complete successfully then go to your traffic manager and create a new external end point with these values

    Type: External endpoint

    Name: this can be anything you would like

    Fully-qualified domain name (FQDN) or IP: www.YOURCUSTOMDOMAIN.com

    Location: As close to your static web app as possible

    Custom Header settings: you can leave this blank

    Now you can go to your www.YOURCUSTOMDOMAIN.com and it should take you to your static web app.

    I will update you within the next day on the outcome of my test. Please do let us know your outcome of the above process and if it resolves the issue then we ask you mark this as a verified answer to help others.

    0 comments No comments

  2. Yogesh Sharma 21 Reputation points
    2022-04-28T11:33:13.78+00:00

    Hi @brtrach-MSFT Thanks for checking this. I am already using custom domain of Static Web App as below in Traffic Manager Endpoint.

    ms.azure.yogeshsharma.me and int.azure.yogeshsharma.me

    Now to step that you mentioned,

    I have already followed step 1 to create custom domain for static web app which is shared as above.

    However, step 2 looks incorrect to me. As per step mentioned I don't see any connection where we are trying to access Static Web App using Traffic Manager Endpoint.

    Following the example that you shared www.YOURCUSTOMDOMAIN.com is custom domain to Static Web App and later added as External Endpoint to ATM. However ATM has its own domain which is used to load balance and Static Web App should be accessible using it. If we try to access using www.YOURCUSTOMDOMAIN.com, it essential means we are directly accessing Static Web App by skipping ATM as their was a DNS CNAME created pointing www.YOURCUSTOMDOMAIN.com to YOURSTATICWEBAPPNAME.azurestaticapps.net.

    For example:

    1. (www.YOURCUSTOMDOMAIN.com) as custom domain to Static Web App. We can then access Static Web App using this custom domain.
    2. We have a ATM which has endpoint. Say weighted.trafficmanager.net
    3. We add www.YOURCUSTOMDOMAIN.com to ATM as External Endpoint
    4. This should allow us to access static webapp using ATM domain weighted.trafficmanager.net.
    5. Accessing using www.YOURCUSTOMDOMAIN.com, it essential means we are directly accessing Static Web App by skipping ATM as their exist no DNS entry which state that www.YOURCUSTOMDOMAIN.com is pointing to ATM.

    To me this looks to be an issue with ATM not adding its own domain to static web app like it do when used with Azure Function. This is important for to be worked on HTTP.

    DNS resolution are fine, please see as below that ATM return both of the custom domain of static web app in round robin but when accessed via HTTP, app is returning 404 as it does not understand weighted.trafficmanager.net

    $ nslookup weighted.trafficmanager.net
    Server: 172.23.195.101
    Address: 172.23.195.101#53

    Non-authoritative answer:
    weighted.trafficmanager.net canonical name = int.azure.yogeshsharma.me.
    int.azure.yogeshsharma.me canonical name = green-hill-0fbbdbf1e.1.azurestaticapps.net.
    green-hill-0fbbdbf1e.1.azurestaticapps.net canonical name = azurestaticapps1.trafficmanager.net.
    azurestaticapps1.trafficmanager.net canonical name = msha-slice-1-dm1-1.msha-slice-1-dm1-1-ase.p.azurewebsites.net.
    msha-slice-1-dm1-1.msha-slice-1-dm1-1-ase.p.azurewebsites.net canonical name = waws-prod-dm1-801cec1c.sip.p.azurewebsites.windows.net.
    Name: waws-prod-dm1-801cec1c.sip.p.azurewebsites.windows.net
    Address: 20.106.29.135

    $ nslookup weighted.trafficmanager.net
    Server: 10.41.42.165
    Address: 10.41.42.165#53

    Non-authoritative answer:
    weighted.trafficmanager.net canonical name = ms.azure.yogeshsharma.me.
    ms.azure.yogeshsharma.me canonical name = jolly-desert-0678baa1e.1.azurestaticapps.net.
    jolly-desert-0678baa1e.1.azurestaticapps.net canonical name = azurestaticapps1.trafficmanager.net.
    azurestaticapps1.trafficmanager.net canonical name = msha-slice-1-dm1-1.msha-slice-1-dm1-1-ase.p.azurewebsites.net.
    msha-slice-1-dm1-1.msha-slice-1-dm1-1-ase.p.azurewebsites.net canonical name = waws-prod-dm1-801cec1c.sip.p.azurewebsites.windows.net.
    Name: waws-prod-dm1-801cec1c.sip.p.azurewebsites.windows.net
    Address: 20.106.29.135

    I tried by setting Host header to curl and it worked, However, Traffic manager need to send this host header to Static Web App for it to work from Browsers and other similar client which can not do header override. To do that, I tried adding Custom Header in ATM Endpoint, but it is not working.

    $ curl -I https://weighted.trafficmanager.net -k -H "host: ms.azure.yogeshsharma.me"
    HTTP/1.1 200 OK
    Cache-Control: public, must-revalidate, max-age=30
    Content-Length: 1114
    Content-Type: text/html
    Last-Modified: Wed, 27 Apr 2022 09:27:13 GMT
    Accept-Ranges: bytes
    ETag: "70002961"
    Strict-Transport-Security: max-age=10886400; includeSubDomains; preload
    Referrer-Policy: same-origin
    X-Content-Type-Options: nosniff
    X-XSS-Protection: 1; mode=block
    X-DNS-Prefetch-Control: off
    Date: Thu, 28 Apr 2022 11:30:12 GMT

    $ curl -I https://weighted.trafficmanager.net -k -H "host: int.azure.yogeshsharma.me"
    HTTP/1.1 200 OK
    Cache-Control: public, must-revalidate, max-age=30
    Content-Length: 1128
    Content-Type: text/html
    Last-Modified: Wed, 27 Apr 2022 09:30:23 GMT
    Accept-Ranges: bytes
    ETag: "89532336"
    Strict-Transport-Security: max-age=10886400; includeSubDomains; preload
    Referrer-Policy: same-origin
    X-Content-Type-Options: nosniff
    X-XSS-Protection: 1; mode=block
    X-DNS-Prefetch-Control: off
    Date: Thu, 28 Apr 2022 11:30:24 GMT

    0 comments No comments

  3. Thomas Gauvin 1 Reputation point Microsoft Employee
    2022-08-23T14:12:42.267+00:00

    Hi Jogesh, Azure Static Web App does not need to be placed behind a DNS load balancer as Static Web Apps are automatically geographically distributed and user traffic is routed to the nearest site. Is there a reason why you wish to place Azure Static Web App behind a traffic manager.

    0 comments No comments