Though the engineering aspect has changed, the underlying fact they are static files and better be served closer to the consumer. In this article let’s see how to deliver a SPA with Azure DevOps with the best optimum setup.
Hosting SPA in Blob Storage Static Website
Azure has announced static website (still in preview) – AWS was first in this race with its S3 static website hosting, in fact AWS has been having this for a very long time.
You can create a standard blob storage in Azure. You will get the static website feature and you should enable it.
Static website hosting has a special container named $web, which is the wwwroot of the static website. Blob storage does not allow us to create containers with non alphanumeric characters, but this is a special container created for static website hosting.
Click on the $web and you can upload the files and folders inside the container.
You will get two endpoints primary and secondary. Both will point to the index document.
You can upload the index document. You can can optionally configure the error document. In this case index.html is used for both. For the demo purposes, just upload a simple html file with the name index.html, then browse any of those endpoints you would see the uploaded index.html.
That confirms that blob storage static hosting is working
Setting Azure DevOps Pipelines for CI/CD
Now, we have to setup the DevOps pipeline for CI/CD. Regardless of the framework you use for development (React, Angular, Vue, WebAssembly or anything that came today morning) – end of the day the build artifacts are bundled as static files, that need to be uploaded to the blob storage.
Different frameworks require different build steps and it varies based on the project context as well. Once the build is completed the artifacts should be uploaded to the Blob Storage $web.
In Azure DevOps you can use Azure Blob File Copy build step. This will copy the pointed artifacts to the specified container.
Note, use the version 2* (still in preview) for this as the previous version would complain that a container name cannot be validated with $ character.
Map Custom Domain
Now at, last we need to map the domain in order to make the site works as production. You can use your DNS management or migrate your domain to Azure DNS Zone.
I have used Azure DNS Zone, go to the settings and create a CNAME record with one of the endpoints as below.
You cannot create a A record here as the storage doesn’t provide a IP.
Optimization to the edge with CDN
You can further optimize the delivery by bringing the content files to the CDN. Configure a CDN endpoint to the Azure Blob Storage.