What you will need

  • An Azure account
  • An Azure web app
  • A domain name to associate with the web app
  • A cloudflare free account (or you can create during the tutorial
  • I'm using a Windows 10 laptop - so to follow along exactly, you'll need the same - though I'm sure most steps will work just about the same on a Mac or a Linux desktop, albeit using different desktop apps/tools.

In my last post, Grav in Azure part 3 - Creating an Azure Web App with code deployed from Git, I demonstrated how to setup a webapp in Azure and deploy code to it from a Bitbucket repo with the Grav Blog Site skeleton code.

In this post, we'll take a domain name and pass the management of the DNS to Cloudflare then link the domain name to the Azure origin address and url so we can take advantage of Cloudflare features (the subject of a future post in this series).

Cloudflare logo

If you don’t already have a Cloudflare account, you can signup here. CF Signup

Once logged in, any sites you’ve already added to your account will be listed:

CF Dashboard

Click on Add a Site Pic 2

Enter the domain name you want to associate with the website and with Cloudflare - in this example, cirriustech.co.uk Click on Add Site

You should now see a screen showing that your DNS records are being queried. Click Next Pic 4

You will see a number of plans available as show below: Pic 5

For our purposes, click on FREE then click on Confirm Plan Pic 6

Click on Confirm Pic 7

You will now see your DNS records as queried by Cloudflare - ensure the domain is correct in the CNAME record and also the IP address for your azure web app is correct in the A record (you can access the IP information on the Settings > Custom Domains page of your Webapp in the Azure portal). Also ensure both the A and CNAME records have an orange cloud beside them showing that cloudflare is active for them. Pic 8 Pic 9

Click on Continue Pic 10

You will now see a prompt to change your name servers via your domain name registrar. I'll show how you do it with Namecheap.com which is who I use - for other registrars, login to your account and perhaps check out their help/support information if it is not entirely clear how.

You can either click Continue, or wait until you have changed your name servers. Pic 11

In a new browser window/tab, login to namecheap (substitute your own registrar from here on in): Click on MANAGE beside the domain you want to manage Pic 12

Click on Advanced DNS Pic 13

Beside NAMESERVERS, click on the dropdown box and select Custom DNS Pic 14

Enter the name server details provided by cloudflare and click on the tick icon when complete: Pic 15

You should see a screen advising that DNS server updates may take up to 48 hours (often it can be much less): Pic 16

While you wait for that, login to the Azure portal at https://portal.azure.com and navigate to your webapp.

Then, under the Settings heading, click on Custom Domains then click on Add hostname: Pic 17

Enter the domain name you added to cloudflare and click on Validate

Pic 18

Azure will need to validate (as you would hope and expect they would), that you own the domain name you are trying to link to your webapp.

Pic 19

Change the Hostname record type from CNAME record to A record Pic 20

You will now be advise what records to add to your DNS - as you've already kicked off the nameserver change to cloudflare, wait until that completes before then making the DNS changes in Cloudflare. Pic 21

Back on cloudflare, you will see a screen like below - periodically click on Recheck Nameservers to check if the name server change has propagated. Pic 23

Once the name server change has propagated, you should see something similar to the following: Pic 26

At the top of the dashboard, click on DNS Pic 27

Add the A and TXT records required by Azure Pic 28

Azure should recognise the change reasonably quickly as shown below (green is good!). Click on Add Hostname Pic 29

You should now see the following whilst the change is being made:

Pic 30

And when completed:

Pic 31

And now you see confirmation the domain name is bound to the webapp: Pic 32

If you are still seeing the screen below when you try to access the domain, check the settings in the steps above - it's very easy to miss something small but important. Pic 33

Here's how my DNS looked in cloudflare at this point: Pic 34

You now have cloudflare managing your DNS and providing DNSSEC and other enhancements, but there are many more things you may want to configure to optimise both performance and security.

I'll cover that in the next post in this Grav in Azure series.

Blog Comments powered by Disqus.

Previous Post Next Post