Problem
Azure storage accounts and Azure CDNs are a cost-effective option for hosting a SPA (Single Page Application).
I know Azure Static Web Apps are the latest and greatest, but they are still in preview and only available in limited regions, so in my opinion not fully production ready.
This combination of Azure resources works well and in combination with Azure DevOps pipelines, however there is no standard task to delete but Azure CLI has an option for it. You will run into this problem if your build adds a hash to your files and so over time there will be hundreds of old versions of files in the container.
This article assumes some familiarity with the Azure Portal and Azure DevOps.
Solution
- In Azure Portal, under the Access Keys blade for the relevant Storage account, create a connection string. You can use an existing one or generate new keys. It is a good idea to refresh these often
Generate Storage Account Connection string - Add the connection string to your Azure Key Vault or as a hidden variable in the Pipeline. Important add double quotes around the value before you save it, e.g., “DefaultEndPointsProtocol=……”
- In the relevant Azure DevOps Pipeline add a new task “Azure CLI”. If you used the Key Vault make sure you have “Azure Key Vault” secret task before this one.
Search for Azure CLI task - Give it a Display name, script type is “powerShell” and location is “Inline script”
Enter script details - Add the following code to the script, replace the values in square brackets with your own variables.
$account = "[Name of your Storage Account]"
$container = '$web'
az storage blob delete-batch --account-name $account --source $container --connection-string $([Connection String Variable Name])