Use Azure Front Door to serve a SPA

Question

I want to to be able to serve a SPA using just the Azure Front Door / and not Azure CDN. Looks like the Front Door provides the caching that the CDN would provide and I can add multiple regional storage accounts to it, making it global at scale.

The problem is, I can't match the path to index.html files. Found this feedback and it looks like this can be solved using the URL rewrite and redirect but couldn't figure out how.

I have /test/ and /test to match with the route below, so it should be matching /test and pointing the request to /test/index.html but this is not working. Can we not do file-based forwards?

Answer 1

This took some time to figure out but here's the solution.

Create Blob Storage(s)

To host the SPA you'll need blob storage accounts in Azure and these storage accounts should be configured to receive static webpage traffic. Navigate to Settings and then Static website in the blob storage settings.

To add content here - navigate to your blob storage again and you should see a container named $web.

Now the $web container is the one that you should put all your static files in, just make sure it's publicly accessible (depending on how you created it, it might not be)

More documentation on how to make a static website using blob storage is here: https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website

Get the static website endpoint

Once you enabled the static website and click on the static website blade, it should give you a different endpoint than the regular blob access endpoint - one that supports the static website. Something that looks like: https://somerandomstorageaccount.z8.web.core.windows.net/

Add the static website endpoint(s) to Azure Front Door as back-end

Navigate to your Front Door designer

Navigate to your Back-end pool and add a new entry if you don't have anything. You should now add this new website endpoint as a back-end to your Azure Front Door. Picture below is the update configuration, but adding it is equally simple, you just add it as a Custom Host back-end type and point it to your blob static website location.

To enable better performance, use multiple storage accounts (from different regions) and add all of those to back-end in your Front Door configuration and turn-on the caching in Front Door.