Deploying static website to Azure Blob Storage with Azure DevOps and Cache Control JAM Stack

So I’ve found articles about deploying a React or Vue.js static site to Azure storage and deploying with Azure DevOps, but I haven’t seen any articles about setting the cache control which is needed so your users don’t have to hard refresh your website on updates.

Every article I see is about setting the cache-control manually on Azure storage explorer, this needs to be automated.

Now here I’m skipping a few tasks you can see in other Medium articles. I assume that you have created and deployed a static website on blob storage and that say your index.html files references javascript files that are named after the build or release. This way you only have to set the cache control to expire on your browser for 1 file.

For those that just want the Azure DevOps Powershell command here it is:

az storage blob update — account-name <storageAccount> — account-key xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxQ== — container-name “`$web” — name “index.html” — content-cache-control “max-age=100”

https://gist.github.com/danparker276/5575b5d7307cae4e607497dc17046a00

You can set the max-age to what ever you want and add more options if needed.

Note that the blob directory $web has to be escaped with a `

I put this after the AzureBlob File Copy

The previous steps you can look at other articles, but essentially, you’re doing an npm build into a /dist directory and then moving that directory with AzureBlob File copy to the $web directory

Also, don’t forget to route the correct way so you don’t get 404 errors on the responses. Many places say to just use the Azure storage redirect, but you really need to use the CDN re-write rules. This below is a good article that has that information.
https://antbutcher.medium.com/hosting-a-react-js-app-on-azure-blob-storage-azure-cdn-for-ssl-and-routing-8fdf4a48feeb

Make those 2 rewrite rules, the http->https and the SpaRewriteRules and it will reroute if you’re doing real paths in your url routing.