Azure Storage Static Website and Azure Front Door

This Azure on the Cheap post highlights a technique that is gaining in popularity that uses Azure Front Door to globally distribute static websites hosted in Azure Storage. In this technique, we use Azure Front Door as a global HTTP load balancer to distribute web requests to the closest, re., lowest latency, static website to the requester.

Take a scenario where you want to host a public facing website for a global company. You could host the website out of a single location but you want to ensure a good experience for visitors across the

globe.

For example, visitors in New York and Los Angeles should be directed to the website hosted out of the Central US region while visitors from Berlin should be directed to the website hosted out of the UK South region. The latency between the visitor and the datacenter in the region is minimized in this way.

Let's take a look at the technology involved in this technique in a bit more detail.

Azure Storage - Static website

Enabling static websites on an Azure Storage Blob service allows you to host static content. This may include static content and client-side scripts but server-side scripting is not supported. When enabled you get a primary endpoint and to designate a page that is served up when the root of the primary endpoint is called as well a document to supply for document not found errors (404).

The files are hosted in a blob container named $web:

For more information on hosting static websites from Azure Storage, please see Static website hosting in Azure Storage .

For the demo, I used GitHub Actions to deploy a website to multiple regions including Southeast Asia, UK South and Central US. These are shown below:

Using JMeter and Azure DevOps, my plan is to perform load tests against the websites hosted in these regions to get a gauge of the performance with and without using Azure Front Door.

JMeter and Azure DevOps Load Tests

Using JMeter , I created a simple script that hits the website. In an Azure DevOps project, I setup some Load tests using the script. You can find Load tests in the Test Plans section:

My first two tests were to run against the website hosted in the Central US region. The first run was in Singapore while the second was in Iowa. Though this is not an exhaustive test, we can see a clear difference between the two locations:

Iowa, being in the same region shows an average response time of 4.4ms while Singapore shows an average of 361.4ms.

Now, let's setup Azure Front Door for these regions.

Azure Front Door

Setting up Azure Front Door was simple. Let's look at the visual designer to show how simple it was:

The Frontend describes the public url and in this example it is AzureOnTheCheap.azurefd.net. This directs to a backend pool, StorageAccounts. In the accounts, I have three defined all with equalpriority:

Azure Front Door will monitor the health of the backends. If a backend becomes unavailable, then traffic will be routed to the next closest endpoint.

The routing rule, ToStorage, defined simply forwards the request from the front end to the backend pool. In this example, I just set up the route to send any HTTP or HTTPS traffic to the backend pool. For more detail on routing, please see How Front Door matches requests to a routing rule .

Back to Azure DevOps Load Tests

Now that we have Azure Front Door setup, let's run the same tests but instead of using a single region, the traffic is distributed by Azure Front Door.

In this run, Iowa's performance still looks pretty good at 7.4ms but Singapore, now that it is routing to the Southeast Asia region shows a considerable improvement from 361.4ms to 31.5ms.

Cost

Please see Azure pricing forAzure Front Door andAzure Storage for specifics but the following is a general guide. Azure Storage for a static website will be insignificant compared to Azure Front Door especially when you add features like caching (makes sense especially as the content will be static).

The pricing of Azure Front Door has several components. The number of routing rules, domains and Web Application Firewall have  a per hour or per month pricing. In my implementation I had one routing rule and one domain which cost me about .70 USD a day.

Azure Front Door will use health probes to determine the state of the backend hosts so there will always be a level of bandwidth usage. In my implementation this resulted in about .05 USD a day and my testing, between 1000 - 3000 requests a day generated less than .01 USD a day.

So for less than a dollar a day, I was able to implement a static website with global routing and high availability.

Summary

Azure Front Door and Azure Storage Blob provide a global, highly available solution for hosting static websites. This can be achieved with a small amount of setup and a low monthly charge.

What are your thoughts on this Azure on the Cheap highlight? What architecture, techniques, or technologies would you highlight in Azure on the Cheap?

Please let the Azure Development Community know by adding a comment.