Question 103216 in Azure Question posted in
The official documentation to get you started can be found here.

Azure Frontdoor multi path routing not working with storage static web apps

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.

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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"
    />

    I hope this will help someone.


  2. 0

    I have created setup Front Door (standard) endpoint to route two azure storage static websites like below:

    enter image description here

    To resolve this issue add a routing rule like below:

    enter image description here

    Front Door was set up properly for the first static app, but the second app might require some additional configuration.

    • Ensure that the second static app is correctly deployed and has a unique URL for access. You can verify this by clicking directly on the URL for the second app and check the origin path for the second app is set to /client

    • Make sure the second app’s routing rule is properly configured. Confirm that /client/* is the pattern to match, and choose the origin group for the second app.

    • Check if there are any conflicting routing rules that might be causing the 400 error. Other restrictions that have contradictory patterns or origin groups may be preventing traffic from reaching the second app.

    When I try these changes it redirects successfully like below:

    enter image description here

    The URL that Azure Front Door will use to build the request forwarded to the origin is rewritten using this path. This path isn’t offered by default. As a result, when making a request to the origin, Azure Front Door will use the incoming URL path. Moreover, you have the option of specifying a wildcard path, which will replicate all portions of the incoming route that match the request path’s origin. Case distinction applies to the origin path.

    Reference:

    Configure Azure Front Door Route | Microsoft Learn

    Routing rule matching – Azure Front Door | Microsoft Learn

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search