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.
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”
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.
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.