Azure Frontdoor multi path routing not working

Question

I've been trying to setup Front Door (standard) endpoint to route two azure storage static websites. But thats is not working as expected.I need both static apps under same domain name but different path of URL like this.

www.something.com  ->   static app 1 
www.something.com/client  ->  static app 2

The pattern to match I have added for the static app 1 is --> /* and the origin path is --> /

Same way I have added the pattern to match for the static app 2 is --> /client/* and the origin path is --> /

The first app is working as expected. But the second app route is not working as expected and I am getting 400 error.

For the second app the forst request returning 200. but rest of the all requests for the css and the js are failing with 400.

Both of the static apps created using nextjs and exported as a staticapp. For each apps I have created separate origin groups and pointed to route rules. I am not sure what configuration I am missing here. Can someone help me on this?

Answer 1

Hello @Niroechkumar Sugumar | BSITEC Global

The problem occurs if you didn't configure a routing rule for the custom domain that was added as the frontend host. A routing rule needs to be explicitly added for that frontend host. That's true even if a routing rule was already configured for the frontend host under the Azure Front Door subdomain, which is *.azurefd.net.

It is highly recommended to disable Azure Storage public access and multiple storage accounts in the back-end that are configured to be static web sites under Azure Front Door.

Ensure that your configuration and setup are correct by cross-checking Azure Storage Static Website and Azure Front Door

---

If this answers your query, do click Accept Answer and Up-Vote for the same. And, if you have any further query do let us know.

Answer 2

Hello @Niroechkumar Sugumar | BSITEC Global ,

Welcome to Microsoft Q&A Platform. Thank you for reaching out & hope you are doing well.

I understand that you've setup an Azure Front Door Standard endpoint to route traffic to two Azure storage static websites and need both the apps under the same domain but different URL path, but the setup is not working as expected.

On checking your configuration, I could see that the origin path is set to "/" in both the associated routes.

Please find the below document for more information on origin path usage:

https://learn.microsoft.com/en-us/azure/frontdoor/standard-premium/how-to-configure-route#create-a-new-azure-front-door-standardpremium-route

Origin path: This path is used to rewrite the URL that Azure Front Door will use when constructing the request forwarded to the origin. By default, this path isn't provided. As such, Azure Front Door will use the incoming URL path in the request to the origin. You can also specify a wildcard path, which will copy any matching part of the incoming path to the request path to the origin. Origin path is case sensitive.

Usage example:

Pattern to match: /foo/*

Origin path: /fwd/

Incoming URL path: /foo/a/b/c/

URL from Azure Front Door to origin: fwd/a/b/c

So, in your case, if we see the 2nd route named "afd-client", below is happening:

Domain: abc.com (taking this as example)

Patterns to match: /client/*

Origin path: /

Incoming URL path: abc.com/client/abc

URL from Azure Front Door to origin: abc.com/abc

The path "/client" is getting stripped due to the origin path.

Hence, I would request you to keep the origin path empty for the 2nd route "afd-client" and update the route configuration.

Wait for 5-10mins, and then kindly browse the url and check if the 2nd path url is working as expected.

Kindly let us know if the above helps or you need further assistance on this issue.

---

Please "Accept the answer" if the information helped you. This will help us and others in the community as well.

Answer 3

I have fixed this issue by adding basepath in our nextjs application. So then that will load the scripts from that path.

const nextConfig = {
  basePath:'/client'
};

Then the scrips specified in the index.html will load as below

<link
      rel="preload"
      href="/client/_next/static/css/5650791e71b69c72.css"
      as="style"
    />