May 30, 2020 6 min read Azure

Cheap website hosting Azure Blob Storage + Azure CDN + Custom domain on HTTPS

There is a lot of posts already on how to host a simple single page application or static website using Azure Blob Storage and Azure CDN network for SSL however some of these posts are outdated and in some cases I found the posts not to be detailed enough on the steps needed to set it all up so here is my attempt on the same currently in May 2020 in detail.

Prerequisites

You already have an Azure Tenant and Subscription

First navigate to https://portal.azure.com and login to your tenant and your subscription
Search for Storage Accounts

3. Select Add

4. Select your Subscription and create/select and existing resource group to associate the storage account with

5. Enter your chosen storage account name, select a location, performance etc.

To keep cost down it is here recommended to choose Standard performance, LRS replication and host access tier. Although you might think "cool" would be cheaper as an access tier it actually might generate larger cost due to the pricing of retrieving objects from a storage account of that tier.

Which tier to choose depends on the "size" of your website and its objects and you need to make a sound decision here yourself, but if you have a lot of images or similar the cost can become larger on a cool tier than on a hot tier.

5. In the networking section select Public endpoint as you will be hosting the website publicly (I imagine). Obviously if you want to host a website within your own network and you have integrated Azure networks with it you can select between all the options.

6. Keep the default configuration of the storage account unless you have strong opinions not to follow Azure standard best practice. There is good explanation on each of the options by holding the (i) buttons.

7. For tags you can tag the storage account if you require (for measuring cost for example by department, cost center etc.) or let it be and click next.

8. Click create on the review and create step if you are happy with your configurations.

9. When the deployment is succeeded navigate to the storage account.

10. Navigate to the section static website in the left menu and select to enable static website.

Here you need to enter a default index document name, usually index.html but if you are using another default html document you can specify that here.
The 404.html can also be set if you have a other default error html document

11. After you have saved Azure will generate a public available url which you need to store handy for later in the guide

It will looke like this:

https://myhostedpersonalwebsite.z6.web.core.windows.net/

12. Now if you navigate to Overview in menu and select the Containers section

13. In the containers you will now see two created $logs and $web

$logs container is for the Storage Accounts logging log data if enabled
$web container will be holding the website files to be published

14. To upload your website into the $web container you can use multiple methods, here are three, a quick google search "Upload files to Azure storage" will give you a lot of additional guides:

Click the container $web click upload and manually upload your files

Or you can generate a SaaS key and use AzCopy to upload a folder of files (https://docs.microsoft.com/en-us/azure/storage/common/storage-use-azcopy-v10)
Or you can use Visual Studio Code and add extension for Azure Storage (https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestorage)

15. When you have uploaded index.html and other files with chosen method you should see the files in the container $web.

16. Now you can test and validate your website available in the storage account if you go to the url kept earlier in the guide

https://myhostedpersonalwebsite.z6.web.core.windows.net/

Now at this point quite a few guides I have seen ends, or some go about explaining that you can configure a custom domain for the website on the Storage Account level. This can be done if you go to the menu and select custom domain. The thing currently is that if you use this functionality it will only be available on HTTP and not HTTPS. Microsoft is working on supporting HTTPS as well as per their documentation but interim we are required to use Azure CDN to get the wanted HTTPS.

17. So to setup the Azure CDN in the https://portal.azure.com search for CDN and select CDN Profiles.

18. Select Add and enter a name, resource group, select region and select pricing tier Standard Microsoft

Here as well there are different pricing tiers and previously Standard Microsoft tier did not support rewrite rules so we can redirect a HTTP request to HTTPS. However this support has come recently so it is no longer needed to use the more expensive offering Standard Version which many guides references.

19. After creation navigate to the CDN profile and select + Endpoint

20. Add your custom domain name for the CDN endpoint

Take the url noted down earlier and remove https:// and set as origin hostname and origin host header for the storage account to accept the CND profiles request to the storage account.
Check both HTTP and HTTPS to listen on so we can redirect HTTP to HTTPS

21. After creating the endpoint navigate into it and go to custom domains in the menu and select + Custom domain

22. Now to setup the custom domain you will need to add a CNAME record for your custom domain with your domain registrar pointing to your endpoint name.

23. Until Azure sees your CNAME it will show read in the validation, give it a few minutes to become green after updating your DNS.

If you want to redirect your root domain mypersonalhostedwebsite.com to www.mypersonalhostedwebsite.com as well you will also need to add an URL redirect record either with @ or mypersonalhostedwebsite.com going to http://www.mypersonalhostedwebsite.com
Some DNS providers allow @ and some required mypersonalhostedwebsite.com

24. When Azure recognises your domain click save to add the endpoint. When the endpoint is created it will be disabled, to enable it click the endpoint and you should see this.

25. Here you can select if you want Microsoft to generate a CDN managed certificate or you can use your own if you already have one.

26. After saving you should see you endpoint becoming enabled and certificate successfully deployed

27. Now go to Rules engine in the menu and click add rule

Here we are configuring HTTP to HTTPS redirect for all requests to the endpoint

Enter a name
Add a condition if request protocol equals HTTP
Add action -> then URL redirect (found 302) to HTTPS

And thats it! If you now navigate to

http://www.mypersonalhostedwebsite.com

if you have configured URL redirect for root domain as well mypersonalhostedwebsite.com to http://www.mypersonalhostedwebsite.com both the two should work: