Recommendations how to improve availability of Static Web Apps in combination with Azure Front Door

[plamber]

Hello,
we are using Azure Front Door with WAF to serve the Azure Static Web Apps contents. Currently we are just serving static content with our Static Web App.

We are wondering if you have some recommendations on how to improve the security and availability of these static web apps with front door as a global load balancer?

Thank you for your feedback,
Patrick

[miwebst]

Hi @plamber, is there a particular aspect of the integration that you are looking for? I.e. caching or security or just general setup?

[plamber]

We are primarily using front door for the security capabilities such as WAF. We are covered from that perspective.

I am looking for recommendations how to setup static web apps to achieve following goals:

• increase availability (in case the static web app of one region is not available). What is the best way of implementing health checks?
• Any suggestions on how to handle 503 error messages? We had some issues 2 weeks ago with files not being served and the server throwing 503 error messages. After a couple of minutes it worked again. This falls also in the availability topic
• push static contents to edge nodes using caching. Is this required at all or are all static contents already on azure edge nodes?
• any techniques how to reduce the traffic between front door and the static web app instance considering caching. How do we handle caching of the same files but served by different instances on different regions? (considering the availability topic)

Thank you for your input

[miwebst]

Content is pushed to globally distributed endpoints, so your health checks would need to also visit these global endpoints. Luckily enough AFD has this functionality built into their health check. A HEAD probe on the index is probably the best way to do these health pings: https://docs.microsoft.com/en-us/azure/frontdoor/front-door-health-probes

As for the 503's, there was an incident a couple of weeks ago on one of our nodes that was causing transient 503's. It has since been fixed. The AFD health pings may not have caught this as they were transient, but the caching done by AFD could have prevented end users from ever seeing this.

For caching, you have to define how AFD caches your site. It is recommended for both speed and reliability to send back custom cache headers when using AFD to ensure they cache your content for some amount of time that you determine. This amount of time will effectively serve as the propagation time from when you update your files to when they are live for your customers. Using caching will also reduce the amount of bandwidth between AFD and the backend SWA, which is important if you are using the Free tier of SWA. For an example of how to set these headers in SWA, check out the /images/* route in the example file here: https://docs.microsoft.com/en-us/azure/static-web-apps/configuration#example-configuration-file With the SWA config file, you can choose what you want cached or what you don't via global headers or route specific headers.

Finally, from a security standpoint, you may want to configure the SWA so it only allows traffic to come from AFD. This is something that we are working on and should ship in the next few months.

[plamber]

Hi @miwebst ,
Thank you for your feedback.

Does it mean that there is no need of having multiple static web app instances if we agressively cache the files using front door?

This would also remove the need of performing health checks.

Thank you, your feedback is highly appreciated