Static Web Site in Azure Storage and Cloudflare
Hopefully, this will be a simple step-by-step tutorial on how to deploy a static website to Azure Storage, provide a custom hostname for it and add TLS in for good measure. How you generate your static site is up to you (use Hugo, Jekyll, Wyam, etc.).
The end goal will be the following infrastructure: Visitor –HTTPS-(Internet)-> Cloudflare –HTTPS-(Internet)-> Azure Static Site.
Overview
Prerequisites
- An Azure Subscription in which to create a storage account
- A Cloudflare account (free account is fine) and using Cloudflare’s DNS for your domain
- Static website content
Part 0: Create a static site
I’m not going to go over the details here. It’s up to you how you want to generate your static site.
Part 1: Create a Storage Account in Azure
- Create a GPv2 storage account in your subscription. Docs: Create a storage account
- From the new storage account’s blade, click Static website (preview)
- Enable the static website and configure the Index document name and Error document name. These are used when a request is made to your website without a filename at all (Index document) or a file isn’t found (Error document). Note that the filenames ARE case sensitive.
- While on this page, make note of the primary endpoint URL. This will be required later.
- Now, upload your static web site into this storage account using your favourite utility, (I use Azure Storage Explorer) and place the uploaded files in the $web container. This container is automatically configured for anonymous blob access (regardless of the container setting).
Once your content has been uploaded, you should be able to visit the URL noted earler (the “Primary Endpoint” URL) and view your site.
Part 2: Configure Custom Domains
Docs: Configure a custom domain name for your Azure Storage account
In your storage account’s blade, click “Custom domain”. On this page, you will be given the info required to create a CNAME record in your DNS in Cloudflare in order to “bind” the custom domain to your storage account. This CNAME takes the form of your FQDN (e.g. www.example.com) and points to your storage account (accountname.blob.core.windows.net).
We will try the “Direct CNAME validation” option first.
- Log into your domain’s DNS configuration in Cloudflare
- Add a CNAME record (e.g. www) and point it’s value to your blob storage account’s name (accountname.blob.core.windows.net).
- IMPORTANT: “Grey Cloud” this entry by clicking the orange cloud to turn it grey. At this point, we do not want Cloudflare to interfere with the process and start hiding your storage account.
- Wait a couple of minutes and verify on your local computer (dig, nslookup, etc.) that your FQDN (www.example.com) resolves to your storage account’s FQDN (accountname.blob.core.windows.net).
- Now, enter your site’s name (www.example.com) into the text box and click Save. Azure should verify that your FQDN points at the storage account and then allows you to use that domain when accessing the account.
You may need to wait a little while before the validation will succeed due to DNS caching, etc.
If you still cannot get it to validate, then the “Indirect CNAME validation” can be used. This is normally used when the CNAME already exists and is in use so you need an alternative way to verify domain ownership.
Follow the steps in the “Direct CNAME validation” process above but instead of a CNAME record of www.example.com pointing to accountname.blob.core.windows.net, you will need to create a “different” CNAME record called asverify.www.example.com pointing to asverify.accountname.blob.core.windows.net. (note the asverify prefix on both source and destination). It is also important to greycloud this entry so as not to have Cloudflare hide the true destination of the CNAME, foiling your plans to bind the domain to your storage account (as it won’t validate). Once the DNS entry is set up, check the “Use indirect CNAME validation” checkbox and click Save to bind the domain to your storage account.
Part 3: Configure Cloudflare
This part’s simple. If you used the “Direct CNAME validiation” method above, (or if it didn’t work and you left the entry there and moved onto the “Indirect CNAME validation” method), then simply update your main CNAME record (www.example.com) to point to the “Primary Endpoint” URL as noted in Part 1.
Verify that visiting www.example.com in your browser shows your static site just as it does with the “Primary Endpoint” URL. The only step left is to “Orange Cloud” the CNAME so that it gets the full benefit of Cloudflare and enable http->https redirection for the domain. This will require the domain be set to “Full”. Although there is a cert on the other end, it’s not going to match the hostname.