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.