Azure Front Door is a great Azure product to provide extra security, traffic management and monitoring services in front of web services. Azure Front Door also supports CDN style of caching for static files like images and CSS files. One part of caching is the ability to purge the cache. Remove the non-valid and old items from cache.
One common problem with cache is, that when the changes are deployed into test / production, it is really hard to know when files are served from cache. When something breaks after the deployment, we usually blame the cache and try to do some rain dance tricks to get rid of it. One way to improve the situation is to add version number into CSS and JavaScript filenames. This forces the browser to download the deployed files, because the URL of the static files has changed. For images this can be a bit trickier and that’s why we need to sometimes purge the CDN cache.
Cached or not?
First let’s investigate how the Front Door caching is working and how we know if the file is coming from cache or not. In this example I have created a simple web page, that has CSS file which is served from Front Door cache. When working with cache issues we first need to be sure, that our browser is not using it’s own cache. Chrome developer tools has checkbox under Network tab which disables the browser cache.
Now when we are sure that browser is always fetching fresh files we can investigate the source of the file. When the file is served from cache the response has few additional headers. One that we want to look for is x-cache. This header indicates the source of the file. If the x-cache says TCP_HIT, then the Front Door cache is used. Microsoft’s CDN documentation contains all the cache headers and their definitions: https://docs.microsoft.com/en-us/azure/cdn/cdn-msft-http-debug-headers
When cache is not used the response headers should look like something like this, if the app is hosted in the Azure App Service.
Purge cache with AZ CLI
Azure DevOps does not have ready build task to handle cache purge, so we need to use Azure CLI. Azure CLI has new in-preview command called afd that can be used to interact with Front Door. To purge the cache we use az afd endpoint purge command.
The purge command in full with minimum set of parameters:
az afd endpoint purge -g (resource group name) --profile-name (profile name from endpoint designer) --endpoint-name (endpoint name) --content-paths '/styles.css'
Resource group and profile name name can be found from Front Door overview page.
Endpoint name can be found from Endpoint manager tab > edit endpoint > endpoint properties > Endpoint name
Content lists the folder or files that should be purged. For example ‘style/*’.
After the run the cache is purged in approx. 10 seconds. Without using the purge my sample CSS file was updated in 4 minutes, but I think the TTL can be configured to be longer or shorter. Just remember, that the purge does not happen immediately after the AZ CLI command is run.