Recently I needed to setup a scenario where Azure Frontdoor sits in front of a website and we needed to ensure the domain is setup correctly for a few scenarios and I felt the documentation is a bit spread out about how to do this so I thought id write a couple of posts about the ways you can do this. There are 2 ways depending if you want to keep your nameservers at the DNS provider or bring them inside Azure. In this post I will keep the DNS config with Godaddy.
In this example I want to use the domain testmike.com for my website and to simulate a backend ill just stick Frontdoor in front of my blog.
The requirements are:
- I want to keep my DNS config with godaddy as much as possible
- I want requests to testmike.com to be redirected to www.testmike.com
- I want all requests over HTTP to be redirected to HTTPS
My Azure front door instance is setup and is called mikesblogfrontdoor with the address mikesblogfrontdoor.azurefd.net.
Go Daddy Configuration
At godaddy I needed to setup a couple of things on my dns configuration after id bought the domain. I did the following:
1. Configure CNAME
In my CNAME record I made sure the name of the subdomain is www and the value is the address for my front door.
This will map www.testmike.com to my frontdoor address.
2. Root Domain
I now need to handle the scenario for the root domain so that if someone used testmike.com it will be redirected to https://www.testmike.com. To do this go to the domain forwarding section and add the domain forwarding rule like below.
Thats it pretty simple and go daddy is now configured to support the scenarios I want.
FrontDoor Configuration
Next we need to look at the steps to configure frontdoor.
1. Configure your backend
In front door in the middle panel you can add your backend site. The backend doesnt really make that much difference to this post and as I mentioned earlier I would use my blog for this demo so I have added my blog address www.mikestephenson.me as the backend as shown below.
2. Configure Frontend Domain
In front door I will add the front end host name www.testmike.com to my front door configurations and add a front door managed HTTPs support like below.
3. Create HTTP to HTTPS rule
I will now use a routing rule which will redirect all traffic coming in over HTTP to HTTPS instead. I will add the following rule called 00-Redirect-Http-to-Https to my rules as shown below
This rule is configured as shown by the 2 pictures below
Note you want to pick all of your front end domains in here. A point to note is I have a couple of other demos in this frontdoor instance so there is 6 shown for now but so far you would just use the www.testmike.com domain and its probably a good idea to also use the raw frontdoor address so id add mikesblogfrontdoor.azurefd.net too. If you noticed above this is picking up the HTTP traffic only and not the HTTPs traffic.
The routing rule below will use the redirect type to HTTPs and preserve everything else.
4. Forward to Backend
Next we will add the routing rule to forward traffic to the backend. The rule we will add is called 02-Forward-To-Backend.
Note the other rules you might have noticed in the picture are for my next post and arent needed here.
This rule is looking for all traffic coming in on HTTPs
It will match all of the front door domains you want to forward to your backend. You should probably not put a rule for mikesblogfrontdoor.azurefd.net unless you also want to forward traffic from that domain. I would guess not since you want your custom domain now.
Next in the lower section of the rule configuration you can see I have set a forward route type to my blog backend which we configured earlier. Note I am also only configuring the rule to forward on HTTPs.
Testing
Next up I want to test what happens. I will use chrome and the developer rules to see what is happening when I access these url’s
Test 1 – using https://www.testmike.com
The aim of this test is to check out default scenario works. If this doesnt work then none of the other tests will work. I pop the url in the browser and get the below in the network trace
You can see we get a 200 response from www.testmike.com and then content is immediately served. This means my request is hitting the frontdoor over
Test 2 – using http://www.testmike.com
Next up I hit up the non https url and get the below result which shows frontdoor redirected my to the https url and then I was served the content from my blog
Test 3 – using https://testmike.com
This time I will use the root domain name without the www subdomain but will use https. You can see I will get redirected to the https address on the www subdomain by go daddy and then it will serve me content from frontdoor.
Test 4 – using http://testmike.com
Finally I will use the root domain without https and you will notice that godaddy has redirected us to the https www endpoint straight from the raw domain and there wasnt a need for frontdoor to to the https redirect in this scenario.
Test 5 – using https://mikesblogfrontdoor.azurefd.net/
I wanted to double check that the default frontdoor address had been removed so I use this url in the browser and I get the response below
Points to Note
A couple of points to note are:
- The mapping from root domain to www is handled by the DNS configuration in go daddy with the domain forwarding. Frontdoor doesnt care about this.
- HTTP to HTTPs is managed by the routing rule as described above.
- When I set this up the DNS changes were pretty quick to take effect. You will notice a comment in my up coming blog post about the other way being a bit more painful
Hopefully someone will find this useful. There are a bunch of good docs in the microsoft documentation but I felt that a walk through of setting this up covering the dns provider and frontdoor together is useful. Note that there is also another approach using Azure DNS zones which ill cover in my next post.
Read More
There is also a post about another approach to doing this if you want to manage the DNS with Azure DNS zones on this link:
