When it comes to websites, the traditional way of hosting them into Azure is by just creating an Azure Web App (which resides on an Azure App Service Plan) and deploying your application there. This is a really powerful service offered by Azure, as Azure App Services is a stable and reliable PaaS service nowadays, with lots of integrated features that you can use, so that you can only worry about your data and your applications, the rest being managed by Azure. I'm not going to get into the details of Azure App Services (and specifically Azure Web Apps), as I am presuming you already have the basic knowledge about this.
When it comes to cost, as you may know, hosting web applications implies paying for the instances of the App Service Plan that they reside on. And this cost may vary from as little as $ 13 / month (for a dedicated B1 instance on Linux), and may go up to $ 584 / month (for a dedicated P3v2 instance on Windows).
While Web Apps hosted on ASPs have lots of PROs why you should use them, hosting just one static website this way may prove to not be very cost-effective. Paying for a dedicated instance and also assuring an SSL certificate may cost at least $ 20 / month - that meaning at least $ 240 / year.
Today I am going to show you how you can host your static website in a cost-effective manner - you will be able to have an up & running secure website with just a few $ per year (the cost really depends on the traffic your site will get and on how big are the files of your website).
The solution relies on Azure Storage and Azure CDN and at a High Level Design, it looks like this:
In short, we will host our static website in an Azure Storage Blob Container and we will map that blob container as origin to an Azure CDN endpoint. Then we will add a custom domain and we will enable the HTTPS feature on the CDN endpoint to assure HTTPS on our static website.
In terms of costs, this is how it will look like:
- Hosting 1 GB of data into a Blob Storage with LRS is $ 0.02 / month. That means $ 0.24 / year. As you probably know, static websites are not that big and only go for a few MB. For a 10 MB website, the cost will be around $ 0.002 / year.
- The price for CDN traffic really differs from zone to zone, but for Zone 1 (North America & Europe) it costs $ 0.08 / GB.
Having these numbers in mind, I think is pretty safe to say that hosting a static website this way is definetely more cost-effective than the traditional way, on Azure Web Apps.
From a technical perspective, this is how it's done:
1) Create an Azure Storage Account.
2) Enable static websites from the "Static website" blade in the Azure Storage account:
3) Upload your website files into the newly created storage container named $web. You can do this in various ways, the most common ways of doing it being directly through the portal or using the Azure Storage Explorer tool.
4) Create an Azure CDN profile.
5) Create an endpoint on the CDN.
6) On the "Origin" blade located on the CDN endpoint, setup the path of your static website (it can be found on the "Static website" blade in the Azure Storage account).
Up until now, you should have a working environment and your site should be up and running. It will respond to the default FQDN that Azure CDN provides: <cdnendpointname>.azureedge.net
To map a custom domain to your website and also assure SSL for it, you will need to execute the following steps:
1) Access the "Custom Domains" blade located on the CDN endpoint and add a custom domain. Make sure to add DNS entries on your custom domain so that Azure will be able to verify it. Usually you just need to add a CNAME record pointing to the CDN hostname.
2) Once the custom domain is added, access it and enable "Custom domain HTTPS":
If you have correctly configured your DNS entries, Azure should be able to automatically verify your custom domain and it will automatically issue and setup an SSL certificate for your website and will automatically manage the renewall of the certificate from this point on. This feature of Azure CDN is free of charge, being included in the service.
After this step, you can access your website through your custom domain, on 443 port (https). You'll see that the connection will be secure, using a DigiCert certificate.
