Host a static site in Azure Blob Storage

Introduction

After the creation of a website or a web application, the question of hosting arises. Azure Blob storage is an economical and easy to set up solution that allows you to store any type of static website. By static, I mean any application that consists of HTML, CSS, JS, images, etc... Angular applications are therefore part of it!

Throughout this article I will assume that you have a Microsoft Azure subscription, if you don't, you can get started for free by going to: https://azure.microsoft.com/free

Azure Blob Storage overview

Azure Blob Storage is the solution offered by Microsoft in its Azure global offering to store binaries in the cloud in an unstructured form. Only a virtual folder tree can be set up to organize the files stored there. For those to whom this speaks, this is the equivalent of Amazon S3.

Blob storage is part of a larger set of services, grouped under the name "Azure Storage Account" in which you have access to Table Storage (a very simple NoSQL basic service, doomed to be replaced by CosmosDB), Azure Files (allowing SMB type file sharing) and Azure Queue Storage (a queuing system also very easy to use).

Basically, Azure Blob Storage is not intended to host websites but via a specific configuration provided and supported by Microsoft that we will see together, it is possible to activate this feature very simply and to map a custom domain to it. to access.

Enabling content distribution in Azure Blob Storage

Creation of the blob storage

From the azure portal (portal.azure.com), you will need a new resource "Storage account" as explained above.

You will then have to enter the following information to create the storage account:

• Resource Group: The resource group in which to store the storage account that will be created. As a reminder, a resource group is used to bring together resources which have the same life cycle (creation / update / deletion).
• Storage account name: The name of your storage account. Must only contain lowercase letters or numbers and must be globally unique in Azure as a DNS will be created from this name.
• Location: The physical storage location of your Blob. To be put closer to your end users. We will discuss the possibility of making available on multi-region thanks to a CDN.
• Account kind: Keep StorageV2 because it is the one that contains the possibility to switch to website "mode".
• Replication: To choose the number of replicas you want to have in the data center and / or in other data centers than the one chosen above. Since a static website is not subject to a high risk of information loss (the source code should be hosted on a git), you can take the cheapest LRS option.
• Access Tier: The hot is to be preferred to reduce the cost of access (downloading of static files from the user) in return for a slightly more expensive cost per GB. This parameter can be modified on each container and even on each blob.

For the rest of the configuration pages, you can keep the default settings.

Activation of the web hosting service

In the detail page of your new Storage Account, look in the left side menu for the item 'Static Website'.

This will redirect you to the configuration page of the option allowing you to define the default page (usually index.html) as well as the page for the 404 NOT FOUND error (optional).

After activating this option, a new container named $web is created in the Blob storage as well as a new URL. You can directly try this web URL (in my case https://absandboxstorage.z6.web.core.windows.net) and find that you get... a 404 error! I assure you it's a good sign ;)

In the same Blob storage, you can create one or more containers to organize your Blobs. You can set the visibility of your blobs at the container level or at the individual blob level. In the case of the $web container, the blobs it contains do not need to be upgraded to a public level because they will be served through the HTTP address specially provided for this purpose.

The web address points to our $web container, but since we didn't put anything in it, we get this famous 404 NOT FOUND. To fill the container with your static site, you can directly use the Azure portal or use the "Azure Storage Explorer" Desktop application, which I strongly recommend.

To keep things simple, I am using the Azure portal here, which is integrating more and more features of the Storage Explorer. Click on the "Storage Explorer (Preview)" option on the left side menu, you can upload your HTML / CSS and JS files from here. For my part, I upload the static site made with Angular's pre-render, as I demonstrated in this blog post.

Once the upload is done, you can return to the web link given by the Storage Account and admire your site!

One last thing...

Last thing that will be almost essential for the configuration of your site is the setup of a custom domain name! I won't go into too much detail, but you need to first add a CNAME that points to the address of the static website generated by the Blob Storage through your DNS provider. Once this CNAME is created, go to the Azure portal, on the Storage Account and find the option "Custom Domain". From there you can add the domain name in such a way that the Storage Account allows connections from this domain name.

Please note, this configuration remains very basic, for example you will not be able to activate HTTPS directly with this method, you will have to go to the creation of a CDN. Likewise if you want to host a SPA that has not been pre-rendered, URL rewriting is not natively supported by Blob Storage, again the CDN will come to the rescue!

How much will it cost ?

Regarding the price, 2 elements must be taken into account:

• The cost of raw storage (the more data you store, the more you pay each month).
• Read operations on the blob storage.

For this estimate, I started with an overall weight for the site of 2MB divided into ten files. I then do the estimate for 1,000 users, 50,000 users and 1 million users per month. To carry out these calculations I use the Azure calculator provided by Microsoft and the appropriate pricing page.

The monthly storage cost of our 2MB site will not change regardless of the number of daily visitors. It is equal to 0.002GB * 0.0166 € per GB per month, or 0.0000332 €. In other words, more than negligible.

Let's see the cost of reading the data for a defined number of monthly users (the price is divided by 10,000 because it is the price for 10,000 write operations):

• For 1000 users: 1000 users * 10 files * € 0.0037 / 10,000 equals € 0.0037 per month. Not even 1 cent!
• For 50,000 users: 50,000 * 10 * € 0.0037 / 10,000, or € 0.185 / month.
• For 1,000,000 users: 1,000,000 * 10 * € 0.0037 / 10,000, i.e. € 3.7 / month

With this hosting model, it will therefore cost you € 3.7 per month to serve 1,000,000 users, with no configuration and peak traffic absorption built in.

It is advisable to set up an upfront CDN, in this case it will of course be necessary to add the price of the CDN, which will be more expensive than the Blob Storage alone.

For further knowledge

As mentioned previously, the Storage Account in static website mode has certain limitations natively:

• Cannot enable HTTPS on a custom domain name.
• Unable to set up URL rewriting for proper functioning of SPAs.
• Access to your site is not globalized (you have chosen a region for hosting your Storage Account), which means that users on the other side of the world will have fairly significant latency.
• No cache management.

To solve all these elements with a single additional brick, you will have to turn to Azure CDN, which integrates perfectly.

If you are interested in the topic, let me know and I will write an article to complement this one as well :)

Do not hesitate to follow me on twitter @Chinouchi, to be kept informed of my next articles or videos on technological subjects.

Appendices

• Microsoft documentation for hosting a static website on an Azure Storage Account: https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website
• The entry point for Azure CDN: https://azure.microsoft.com/en-us/services/cdn/
• The Azure calculator: https://azure.microsoft.com/en-us/pricing/calculator/