Static websites hosted on storage accounts accessed through Azure Front Door not loaded properly

Question

We're trying to configure Azure Front Door to route traffic between our two identical static websites that are hosted on two different storage accounts. A backend pool has been set up within the Front Door containing the 2 backend host names (links to the storage accounts). With only one of the backend hosts enabled, accessing the website through the Front Door URL works perfectly fine. However, we need to have both of them enabled in order to enable load balancing as well as blue/green deployment.

The way the website is loaded is that the initial request is fetching the index.html file. The index.html file references approx. 20.js-files. It then tries to retrieve all these.js-files through 20 new requests to the front door. As previously mentioned, this works perfectly fine with only one backed host enabled. However, when both of them are enabled some of the requests for loading the.js-files are routed to storage account 1 and some are routed to storage account 2 which results some of them returning a 404, not found. The web app is react-based so the scripts generated when building has hashed file names implying that the names of the files are different on the two storage accounts, explaining the 404.

How I see it, there are 2 solutions to the problem:

1. Can we force react to name the build files identically? If so, it wouldn't matter that all requests are routed through the Front Door.
2. Can we configure the front door to make sure that all the requests for loading the scripts are routed to the same backend host as the initial request for loading the index.html was loaded from? We've tried enabling Session Affinity which didn't work as expected.

Thank you very much!

Answer 1

You can enable session affinity in front door to ensure requests from one client ends up on the same backend all the time, this is configured on the frontend/domain in AFD