Cheap website hosting Azure Blob Storage + Azure CDN + Custom domain on HTTPS
Reading Time:
Reading Time:
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
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.
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
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:
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/
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
19. After creation navigate to the CDN profile and select + Endpoint
20. Add your custom domain name for the CDN endpoint
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.
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
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:
http://www.mypersonalhostedwebsite.com
http://mypersonalhostedwebsite.com
you should get redirected to HTTPS and get a lock chain for valid certificate as well as see your website! :)