For today’s post, let’s take a look at an architecture example where you want to provide a geographic deployment of your webapp by using a cloudbased WAF (like Cloudflare, or Akamai, …).
High Level Setup
So what will we be setting up & testing today?
The user will receive a url that is powered by “Azure Traffic Manager”. That will have three endpoints ; one in Europe, one in the US and one in Asia. These endpoints will be powered Cloudflare and back by an Azure Webapp. You’re question will probably be ; “Why use that sequence?” Because the Traffic Manager is DNS based and will do a “basic” HTTP check. If you would setup the Traffic Manager behind Cloudflare/Akamai/…, then you would see the source IPs of that service. Thus you would be unable to route the clients to the nearest location.
Let’s get ready to RUMBLE!!!! 😉 We’ll first start of by creating the resources in Azure;
Basically three webapps, where each is located in a different region, and a traffic manager to serve as the primary ingestion point. For this demo, I’ve used the wordpress deployment from our marketplace and finished it off with a very basic “next-next-finish” deployment. Though I did change one thing, the website title reflects the location of the webapp.
Next up, I’ll create the DNS entries on Cloudflare and point them to the Azure Webapp ;
Once that has been done, I’ll be adding those names as custom domains to the webapps.
Why is that important? If you don’t do that, then the webapp will ignore the request and return a 404 (Page not Found). All requests are hostname based as the IPs can be shared across multiple webapps.
Let’s do a quick test… Whiiii! That went smooth!
Now we are going to add the cloudflare dns entries as endpoints to our Traffic Manager.
And here we can see that they have been added, where the last one was still in a “checking endpoint”-state ;
In regards to the traffic manager configuration; Here we’ll be choosing the “Performance” routing method. What does that one do? It will check the latency between the user and the endpoints. Afterwards it will redirect the user to the nearest location.
Do you recall what I said about the custom domain names and the domain name based checks? Let’s not forget to add the dns entry of our traffic manager!
Now we are all ready to go!
I’ll be using “webpagetest.org” to test the results from different regions ;
- Test from “Dulles” in the US ;
- Test from “Tokyo” in Japan (Asia) ;
- Test from “Dublin” in Ireland (EU) ;
Here we can see that the client was served by a local service! So our setup worked nicely.
- Bear in mind that each url within the chain is still individually accessible. So you probably want to harden up the link between Cloudflare and the Webapp.
- As mentioned, use the Traffic Manager as your first ingestion method. As otherwise you’ll need to be very creative yourself in terms of traffic routing. And trust me on this one, that isn’t going to end well.
- Also be aware that Azure can provide WAF, CDN & DDOS protections too. Though if you want to rely on Cloudflare / Akamai / …, you can do this by using the above pattern.
12 thoughts on “Combining Azure Traffic Manager, CloudFlare & Azure App Service for Geographic Scale!”
Hi, This is a great article. Thank you for the write up. I have a question regarding how CloudFlare is configured. I have a scenario where i too need to configure CloudFlare for my Azure App Service apps which has a Traffic Manager in front. I have to decide on if i need to setup CloudFlare in front of the Traffic Manager or should I configure CloudFlare behind the Traffic Manager (like you have described in your article). What are the pros and cons of these 2 approaches?
If I’m correct, if you put Traffic Manager behind Cloudflare, then you will have less control over the geographic distribution. Because the TM will see the ip traffic coming from CF, and then deciding on a region based on that. That’s why I did my setup with TM in front of CF. Though do test both setups out and see what works best. Then you’re sure what happens… 😉
One problem with this setup would be using certificates. At least in Azure CDN you would not be allowed to apply http://www.contoso.com as a custom domain to multiple CDN endpoints, even when using cdnverify.
The cert issued by Azure CDN (verizon) is not wildcard, so the endpoint would identity as e.g. www-eu.contoso.com. (a custom wildcard cert might fix this though, but that is not always the desired solution).
@Jesper ; Frontend SSL is handled by CloudFlare in this setup… You have various options in terms of how it handles SSL flows => https://support.cloudflare.com/hc/en-us/articles/200170416-What-do-the-SSL-options-mean-
HI Kvaes, I’m not sure I’ve got this right. Please help. I’m trying the example above, but just with one web app to start. I’ve created an azure web app, traffic manager and I have a public domain (let’s say contoso.com).
I have added
– the azurewebsites address to my domain as a cname (webapp1-northeu.contoso.com)
– that cname to the azurewebsite as a custom name (webapp1-northeu.contoso.com)
– the cname address as an endpoint to my traffic manager (webapp-contoso.trafficmanager.net)
– the traffic manager to the azurewebsite as a custom name (webapp-contoso.trafficmanager.net. The weird thing here is that it doesn’t show up in the portal). However, when i query with (Get-AzureRmWebApp -ResourceGroup Xperters-DEV -Name ‘webapp-name’).HostNames, i can see it
– a public domain name mapped to as a CNAME pointing to the traffic manager. I.e. something like: http://www.contoso.com –> webapp-contoso.trafficmanager.net
However, i’m getting a problem where I’m still getting a 404 when i navigate to this public address. http://www.contoso.com. It’s almost as if azure wants a custom name entry to http://www.contoso.com to be added to the webapp. However, I can’t add this public address as a custom name to the webapp, because no direct entry of course exists on my domain linking http://www.contoso.com –> webapp1-northeu.contoso.com. It is only linked via the traffic manager.
I’ve probably gone wrong something. Any idea how I can fix it?
You are correct. You need to set the http://www.contoso.com as custom name on your “backend” app service too. 😉
As a sidenote ; As an optimization, check out Azure Front Door as an alternative to both cloudflare & traffic manager. => https://kvaes.wordpress.com/2018/10/25/putting-azure-frontdoor-in-front-of-your-webapp/
thanks Kvaes. Will do.
Hi Kvaes, Thanks for this post very easy to follow. What I have found while setting this up is that if cloudflare CDN/Reverse Proxy features are enabled then this setup doesn’t work and returns an error (Error 1000) when navigating to the URL. Only when Cloudflare are providing DNS services only does this setup work, however I require the WAF features of cloudflare which would not be enabled in this configuration.
Are you aware of anyway to configure full Cloudflare services while using Traffic Manager + Web Apps?
I did not test it with the CDN/RP functionality of CloudFlare.
Would Azure FrontDoor match your requirements?
Azure Front Door would cover my requirements for sure but unfortunately while it is in preview with no SLA I am unable to use this infra due to government contractual requirements.
I’ll get in touch with our MS contact to see if they have any idea when it will be released to GA.
Hello Matt and kvaes,
I am facing the same issue once i configure endpoints in TM and then try to proxy those endpoints in Cloudflare CDN.
Here is what I am doing:
1. In my DNS server, I added a CNAME entry of my domain as below:
mydomain.domain.com is an alias of my-tm.trafficmanager.net
2. I have two endpoints as below and their entries in Cloudflare DNS which are configured in Azure TM:
endpoint1.mydomain.domain.com is an alias of
endpoint2.mydomain.domain.com is an alias of
3. Both endpoints work perfectly fine when directly opened.
4. When I open mydomain.domain.com, it gives me 1000 error from Cloudflare. It says it is not able to resolve mydomain.domain.com in DNS. Cloudflare support says that I need to add this entry in their internal DNS. If I add it in the internal DNS, Cloudflare would sit before the TM and it would run into the issue of incorrect geo-location resolution, as mentioned in the article.
Please share your thoughts.
I was struggling with similar problem with cloudflare cdn & traffic manager where end server was not able to resolve request. I got it solved by specifying host header under custom headers in endpoint configuration (under traffic manager)