How to setup a web app with Cloudflare CDN

I had a live web app in Azure that I wanted to hook up with a CDN using Cloudflare. Good news – Cloudflare has a free Global CDN offering and so I didn’t have to pay anything to use it. For more details about what other features you can have with a free account, see here.

These are the steps I took to bring my site over to Cloudflare:

  • Create an account over at Cloudflare
  • Enter site details. Cloudflare will then query the DNS records of your site
  • Verify all the DNS records are correct
    • The A record should be your Azure web app’s IP address
    • If you have subdomains, verify the CNAME records are also imported, pointing to yoursitename.azurewebsites.net
  • Navigate to your DNS control panel (i.e. Namecheap, GoDaddy, CrazyDomains) and change your nameservers. The name servers will be provided by Cloudflare. In my case, they were:
    • adam.ns.cloudflare.com
    • nina.ns.cloudflare.com
  • If your site is on HTTPS, make sure the following are set
    • Crypto tab – SSL settings should be set to “Full” if your SSL cert is configured in Azure (or at the origin). Your site may go down if you have a certificate in Azure and the setting is set to “Flexible”. This happened in my case. More details here.
    • Crypto tab – Set “Always use HTTPS” to ON
    • Crypto tab – Set “Automatic HTTPS rewrites” to ON
  • Wait for about 24 hours for it to completely ported over.
  • To test, navigate to your website and “Inspect” / open developer tools on a browser. There should be a script added to your HTML that looks like the below:
    https://ajax.cloudflare.com/cdn-cgi/scripts/b7ef205d/cloudflare-static/rocket.min.js

Enjoy the added speed of CDN-loaded static files 🙂

%d bloggers like this: