Putting Azure FrontDoor in front of your webapp

Introduction

Today we’ll be going through the process of putting Azure FrontDoor in front (pun intended!) of a web app.

 

Step One) Adding the custom domain

The first step  is to add a new custom domain to your Frontend hosts ;

Now if you go through this, you’ll see that AFD expects you to link the custom domain to the azurefd.net domain in order to proceed.

 

Though be aware that you can also verify a domain by using the “afdverify”-method ;

So in my case, create CNAME “afdverify.www” that points to “afdverify.vmchooser.azurefd.net” ;  

And now magic happens! Where I’ll be able to add my custom domain, without immediately sending all my production traffic to it…

 

Step Two) Enabling SSL on the custom domain

Click on the custom domain again, and browse to “Custom Domain HTTPS” ;

Now you can either use your own certificates, or let Front Door manage it for me. I’m going to let Front Door manage it, and press “Update”.

Now we’ll see that our domain needs to be validated (by DigiCert, who is providing the certificates). Once this has completed, and be aware that this can tak several hours!, you’ll see that everything has been set up.

 

Step Three) Updating the routing rules

This one had me looking for a while… Actually for way too long that I would care to admit. 😉 Anyhow, browse to your routing rules… And click on the “Frontend hosts”. Whilst it may look like it is a single select field, it’s actually multi select. The new custom domains aren’t selected by default. So until you add it to the selection, the requests for that domain will be ignored (and thus cause an error for your visitors!).

 

Step Four) Move your actual cname

And as the last step… Now move your production cname (after all your validation tests have run!).

 

Optional) Update your backend

Initially, I had FrontDoor setup in front of the domain that it would take over… So I switched the backend to point to the App Service behind it. Though be aware to change the “Backend host header” whilst doing so!

 

 

Optional) Change to Azure Storage (Static Website feature)

In my case, I was leveraging Azure App Service to host my Single Page Application. The main feature for which I used App Service was SSL Termination & Custom domains. As you can already notice, those capabilities are covered by Azure FrontDoor. So by now I’ve also migrated my backend to Azure Storage.

Here I first added the new backend pool to the list. And gradually shifted the weight from one till the other. Until I finally disabled the Azure App Service.

 

Closing Thoughts

The two main things to know when putting AFD in front of an existing workload is that ;

• there is an afdverify method which will allow you to prep everything without a downtime
• you need to change the routing rules to include the newly added domain(s)