Part 2: Azure Storage Static Websites with CloudFlare

In part one we covered the basic set up for Azure static websites. In part two we’re going to cover configuring the Storage Account for a custom domain and the CloudFlare set up to act as the CDN (proxy)for the Azure static website.

The first step is to create a free CloudFlare account. I’m not going to cover this details since the steps are going to vary based on your domain registrar. In my case I changed my domain’s nameservers to CloudFlare’s. It may take a while for this step to fully complete.

Here’s what we want to accomplish:

  • Create/change a CNAME for www that points to the static website endpoint URL
  • Tell the Azure Storage Account about our custom domain
  • Set up a Page Rule in CloudFlare to redirect domainname.com to www.domainname.com
  • Require SSL

If you recall in part one you were given a new static website endpoint URL when you enabled the feature, which you’ll need when creating the CloudFlare DNS CNAME.

From the CloudFlare DNS page, create, or modify if you already have one, a new CNAME pointed to the Azure static website endpoint URL.

Important: One thing I failed to capture in the screenshot, click the orange cloud icon and turn it gray when adding the CNAME. You can also click it after adding the CNAME. We will turn this back on later but we’ll need it gray in order to add the custom domain to the Azure Storage Account. Essentially this tells CloudFlare we’re just interested in using it for DNS, not as a CDN. We can get around this another way, but this is the simplest.

At this point go get a cup of coffee and then we’ll set up the Storage Account custom domain.

Head over to the Azure Portal and the Custom domain blade of your Storage Account.

Enter your custom domain you set up  in CloudFlare – in my case www.domainname.com and click Save. You will receive a confirmation message the save was successful. If you receive an error, double check your spelling – if it all looks good, wait another 10 minutes or so and try again.

Assuming you were able to successfully save your custom domain, head back over to the CloudFlare portal and the DNS page. Click the gray cloud icon next to your www CNAME and turn it orange. This will tell CloudFlare you want to use it as a CDN (proxy).

Next, click Page Rules.

Click the Create Page Rule and add a new rule that matches the URL domainname.com/*. Next, add a setting that uses the Forwarding URL action with a 301 Status Code. The URL you want to forward to is https://www.domainname.com/$1.

This rule will forward requests for http://domainname.com/ and https://domainname.com/ to https://www.domainname.com/ which will be served by your Azure static website.

OK, one last step: SSL! Head over to the Crypto section of CloudFlare. Ensure SSL is set to Full (strict) and Always Use HTTPS is On.

If you made it this far your static website should be accessible at https://www.domainname.com/. If not, wait 20 minutes and try again. In some cases CloudFlare takes a lot longer to create the SSL certificate for your site. They advertise it can take up to 24 hours but it usually takes less than 30 minutes.

Part 1: Azure Storage Static Websites with CloudFlare

Azure Storage is a great multipurpose storage solution and is utilized by many Azure services to store everything from log files to VM disks. It also offers many services on its own, the latest fresh out of preview is Azure Storage Static Websites.

AWS has long offered static website hosting in S3 buckets, so it’s nice to see Azure catch up on this front.

For the heck of it I decided to take this new feature for a spin, with one catch – use CloudFlare as the CDN. CloudFlare offers tons of features, even with the free account, such as DDoS protection and free SSL. Now it’s possible to use an Azure CDN to do something similar, but sometimes it’s nice to see how everything can play together.

If you’re following along at home, you’ll need an Azure subscription, a domain name and a free CloudFlare account.

First step, create a new new Azure Gen 2 Storage Account:

Once created, head over to the Static website blade for the Storage Account. Enable the Static website feature and click Save. Once saved, you will be presented wit ha new Primary endpoint URL specifically for the static website.

While you’re here, go ahead and provide an Index document name and Error document name.

Now that the feature is enabled, head over to the Blobs blade. Notice a new container has been created named $web. Azure has already set the permissions so that it’s accessible by everyone.

At this point go ahead and use the Azure Portal to upload a sample index.html file to the $web container. I highly recommend downloading  Azure Storage Explorer if you plan to interact with Storage Accounts on a regular basis.

At this point fire up a web browser and navigate to the endpoint URL. You should be presented with your index.html document.

OK, if that worked it’s time to to move on to configuring CloudFlare and the Storage Account for a custom domain. I’ll cover this in part two.