Search code examples
azureazure-blob-storagesingle-page-applicationazure-front-door

How to fix 404 error when accessing a SPA (Storage Account) using Azure Front Door Premium?

I am using Azure Front Door Premium to serve two applications under the same domain - an Azure App Service and a Single Page Application (SPA) stored in Azure Storage Account. I want to serve the App Service using the root URL (mydomain.com) and the SPA using a path (mydomain.com/spa).

I have already configured routes for both applications in Azure Front Door. For the App Service, I have used "/*" in the "Patterns to match" option, and for the SPA, I have used "/spa" and "/spa/*" in the same option. However, I am getting 404 errors when trying to access the SPA using the path (mydomain.com/spa).

I have tried to configure a rule to fix this issue, but it is not working. The rule I used is:

enter image description here

How to fix this issue and serve the SPA from the desired path using Azure Front Door Premium?

Solution

  • The Azure storage account fails to recognize the configured patterns to match in the route, causing the SPA to be unable to route mydomain.com/spa to <storage_account_container>/$web/index.html.

    Front Door Service - URL rewrite

    The solution required two changes.

    • For URL rewrite source pattern, only the path after the route configuration “patterns to match” is considered. For example, you have the following incoming URL format <Frontend-domain>/<route-patterns-to-match-path>/<Rule-URL-Rewrite-Source-pattern>, only /<Rule-URL-Rewrite-Source-pattern> will be considered by the rule engine as the source pattern to be rewritten. enter image description here

    • For scenarios, where /<route-patterns-to-match-path segment of the URL path must be removed, set the Origin path of the Origin group in route configuration to /. enter image description here

    as a result:

    **Azure App Service** 
URL: mydomain.com 
(Route) Pattern to Match: "/*"
(Route) Origin Path: ""

**SPA Storage Account**
URL: mydomain.com/spa
(Route) Pattern to Match: "/spa, /spa/*"
(Route) Origin Path: "/"
Rule: / -> index.html