Deployment to Azure static websites utilizing VSTS
Microsoft recently announced that Azure static websites — hosted in storage accounts — is in public preview.
I thought it would be fun to try and set up a deployment pipeline in VSTS. My self imposed requirements was that everything should run through VSTS e.g. provisioning of resources, deployment etc.. A good guideline for the Azure Portal is to treat it like a read-only portal.
Provisioning
The first challenge was how to handle the provisioning. Azure offers the resources templates to handle this. The end result can seen below in the template.json file.
Similar I have created a parameter.json file to make it possible to specify another website name for the website e.g. production vs test.
Making it a static website
While the above can help me provisioning the resources — it will not make the storage account a static website. This is as far as I can tell not possible through the ARM template — but maybe this will be added in a future version.
I therefore looked into the REST API provided by Microsoft and found that it can be done using a HTTP call.
In the below code snippet — I use powershell to activate the static website on the storage account.
Authentication is done using Azure Active Directory.
Deployment
The last step is deploying the binaries unto the storage account. For this I use AZ Copy task provided by VSTS (please note that the task need to be at least v2.0.6 — otherwise it won’t work). The key here is to use the container name $web as that is where you need to deploy the binaries.
After all this is done my release definition contains three different tasks.
Making it all run
Now I only need something to deploy to the website. For this I turn to create-react-app as it can provide me with a boilerplate solution ready to deploy. In this case I setup the build using a yml file. Which is possible for builds in VSTS (unfortunately this is not possible for release definitions yet — but it is on the roadmap — so stay tuned!).
I divide my build output into two different artifacts — one for the infrastructure and another for the binaries. This makes it cleaner to me as I don’t have to do any splitting in the release part.
Conclusion
Azure static website is a good fit for deployment of single page applications. If you also couple it with a CDN you get a very scalable solution.
You can find all the code used in this post on my Github account.
Hope this helps!