Occasional Contributor

Azure on the Cheap posts focus on the architecture, techniques and technology in Azure that add considerable value without breaking the bank. This value is being measured in both the amount of effort taken to develop, provision, and maintain the resources, as well as the monthly charge for the resource.

  

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.

2020-04-10 11_14_35-Architecture.vsdx - Visio Professional.jpg

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).

2020-04-10 15_00_45-cheapstorageus _ Static website - Microsoft Azure.jpg

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

2020-04-10 15_04_31-cheapstorageus _ Storage Explorer (preview) - Microsoft Azure.jpg

 

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:

2020-04-10 15_13_24-AzureOnTheCheapGroup - Microsoft Azure.jpg

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:

2020-04-10 15_25_13-Load test - Test Plans.jpg

 

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:

2020-04-10 16_13_06-Load test - Test Plans.jpg

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:

2020-04-10 15_44_13-AzureOnTheCheap _ Front Door designer - Microsoft Azure.jpg

 

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 equal priority:

2020-04-10 15_47_50-Update backend pool - Microsoft Azure.jpg

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. 

 

2020-04-10 16_14_44-Load test - Test Plans.jpg

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 for Azure Front Door and Azure 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.

2020-04-13 10_34_47-Pricing - Front Door _ Microsoft Azure.jpg2020-04-13 10_35_02-Pricing - Front Door _ Microsoft Azure.jpg

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.

2020-04-13 10_45_30-Pricing - Front Door _ Microsoft Azure.jpg2020-04-13 10_45_49-Pricing - Front Door _ Microsoft Azure.jpg

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.

5 Comments
Senior Member

Its a nice and well explained article with self-explanatory diagrams. Thanks @Jeffrey Chilberto for a great write up. I'm surely going to try this.

Occasional Visitor

@Jeffrey ChilbertoDo you have a git repository for the test scripts you could share?  I would be really interested in seeing how such tests are actually implemented as part of an article like this.

 

Cheers!

Occasional Contributor

Hello @keithyoung, Thanks for reading. Actually, the JMeter test is really basic, as it just navigates to the URL and retrieves some images from the static site. The really interesting thing is using JMeter with DevOps LoadTest. I do think this technique is worthy of another AzureOnTheCheap article because it is incredible to be able to create a basic test and spin it up on servers all over the world.

 

Let me write this up in more detail and post either to Azure Developer Community or as a Technet Wiki article.

 

Take a look at https://docs.microsoft.com/en-us/azure/devops/organizations/billing/buy-load-testing-vs?view=azure-d... for more information.

 

Thanks again for reading. Cheers!

Occasional Visitor

Did you also do a comparison with using a CDN? Is there an advantage to using Azure Front Door over a CDN in this scenario?

Occasional Contributor

Hello @Estyn_Edwards

 

Not directly with Azure CDN or another CDN but I did explore the feature. Even with just the Azure Storage and Azure Front Door services, there are many features and options that it does make this challenging to pick enough features to make an interesting post but not too many to make an epic. 

 

What I have been doing is building out a sample static website that provides an interesting illustration. This comprises of a gallery of images hosted locally as well as table sourced from an Azure Function. This gives more to play with feature-wise including the caching option to Azure Front Door. I should have another post ready within a week (unless the day job gets in the way).

 

Thanks for reading and I appreciate the comment.