Routing Rules That Work Link to heading
Azure Front Door Standard/Premium (as opposed to Azure Front Door (classic), because that’s not confusing at all) is a fusion of Azure’s Application Gateway, Traffic Manager and CDN into a single resource. A Front Door Standard/Premium comes very close to having the kind of proxying abilities that nginx had a decade ago. Progress!
Snark aside, a Front Door is certainly easier than rolling your own geographically distributed fleet of caching reverse-proxy nginx nodes, so here we are.
In this post I’m going to show you how to configure an Azure Front Door to properly route requests to a static-file Single Page App, of the sort React or Angular produces. This is an extremely common use case for a reverse proxy server, but there’s virtually no information on how to make it work with the new Standard/Premium SKU of Front Door.
If you’ve worked with the standalone Azure CDN resource, you know that there are three different SKUs with completely different routing capabilities and syntax. The CDN incorporated into Front Door Standard/Premium has routing syntax that is similar but not identical to those SKUs, making most Stack Overflow answers useless. And Microsoft adamantly refuses to document the common use cases for their Azure resources.
The following routing rules have been tested and work for the most typical SPA design: all paths that don’t end in a file
extension are rewritten to point to index.html. This means URLS to your fonts, images and other static assets route
correctly, while paths like /organization/users/ will route back to index.html and be handled by your React or
Angular app. If you have more complicated path routing than that - well, you really shouldn’t. You’ll have to figure it
out on your own.
The first rule is just a typical “redirect everything to HTTPS” rule. Easy enough.
The second I’ll break down a bit:
IF Request file extension Less Than 1 is a weird way of saying “no file extension”. The Any and Not Any match
conditions do not do what you would expect.
THEN URL Rewrite / to /index.html, do not preserve unmatched path is what does the actual routing. / by itself
means “any path”; the tooltip will tell you this if you click on the (i). You need Preserve unmatched path
un-checked to make browser-based refreshes work (that is, if the user hits refresh on a page sitting at https://foo.bar.com/organization/users/)
And that’s it. Tested and working as of Friday August 4th, 2023 with React and Angular apps. Hope it helps.