Configure a domain for an Azure App Service using Cloudflare

This blog shows how to create an Azure App Service with a custom domain using Cloudflare to configure the domain name servers. The post used the following blog from Matteo for the original setup: Serving your Azure App Service under your custom domain

To create a custom domain for an Azure App Service, you require three things:

  • A domain which maps to a domain name server
  • TXT, A records for the root domain, CNAME records for sub domains
  • A hosting service to host the application which maps to the A, TXT, CNAME records.

Switchplus was used to get the domain, Cloudflare to define the A, TXT and CNAME records, and Azure App Service Custom domain bindings to map to Cloudflare. Then the site can be run in a custom domain. Any or all three of these products can be replaced to achieve the same outcome. You can also do all three of these steps in Azure as a standalone.

Registering the Records:

Root domains should use A, Txt records (example: IP , something.com)

Sub domains use CNAME records (example: www)

You can register with Cloudflare for free and register a website. Once you have entered the Name server, you can enter the A, TXT and CNAME records as required.

Before you can register an A record, you need the Azure IP. This can be done by deploying the Azure App service, and clicking the custom domain.

When you click validate, Azure will display the Domain ownership records which need to be added to Cloudflare.

When you have entered to correct values, then make sure you bypass the Cloudflare. This is required to add the custom domains to the Azure App service. The proxy status must be grey.

Now the custom domain can be added.

The Cloudflare proxy can now be enabled and you are ready to go.

Automate this process

The whole Azure part can be automated in an Azure CLI script.

To use Cloudflare, ensure your authoritative DNS servers, or name servers have been changed. These are your assigned Cloudflare name servers. Then run the following scripts with Cloudflare bypassed and your domain configuration:

# Before this script will work, the A, Txt for the root 
# domain needs to be configured
# and the CNAME for the www

$domain = "dottilotti.ch"
$wwwDomain = "www.dottilotti.ch"
$resourceGroup = "private-websites-damienbod-rg"
$appServiceName = "dottilotti"

# https-only
az webapp update `
	--name $appServiceName `
	--resource-group $resourceGroup `
	--https-only true

# config hostname
az webapp config hostname add `
	--webapp-name $appServiceName `
	--resource-group $resourceGroup `
	--hostname $domain
	
# config www
az webapp config hostname add `
	--webapp-name $appServiceName `
	--resource-group $resourceGroup `
	--hostname $wwwDomain

# tls 1.2 or higher
az webapp config set `
	--name $appServiceName `
	--resource-group $resourceGroup `
	--min-tls-version 1.2

You can use Full strict mode by following the this blog:

https://swimburger.net/blog/azure/setting-up-cloudflare-full-universal-ssl-with-an-azure-app-services

This script could be used to add your pfx certificate to Azure using the CLI and powershell.

# Before this script will work, the A, Txt for the 
# root domain needs to be configured
# and the CNAME for the www

$domain = "dottilotti.ch"
$wwwDomain = "www.dottilotti.ch"
$pfxPath = 
$pfxPassword = 
$resourceGroup = "private-websites-damienbod-rg"
$appServiceName = "dottilotti"

# Upload the SSL certificate and get the thumbprint.
$thumbprint = (az webapp config ssl upload `
	--certificate-file $pfxPath `
	--certificate-password $pfxPassword `
	--name $appServiceName `
	--resource-group $resourceGroup `
	--query thumbprint --output tsv)

# https-only
az webapp update `
	--name $appServiceName `
	--resource-group $resourceGroup `
	--https-only true

# config hostname
az webapp config hostname add `
	--webapp-name $appServiceName `
	--resource-group $resourceGroup `
	--hostname $domain
	
# config www
az webapp config hostname add `
	--webapp-name $appServiceName `
	--resource-group $resourceGroup `
	--hostname $wwwDomain
	
# config custom domain bind
az webapp config ssl bind `
	--name $appServiceName `
	--resource-group $resourceGroup `
	--certificate-thumbprint $thumbprint `
	--ssl-type IP

# tls 1.2 or higher
az webapp config set `
	--name $appServiceName `
	--resource-group $resourceGroup `
	--min-tls-version 1.2

When finished you would have to enable Cloudflare for you domain.

Links:

https://ml-software.ch/posts/serving-your-azure-app-service-under-your-custom-domain

https://www.troyhunt.com/cloudflare-ssl-and-unhealthy-security-absolutism/

https://docs.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-custom-domain#step-2-create-the-dns-records

https://docs.microsoft.com/en-us/azure/app-service/scripts/cli-configure-custom-domain

https://docs.microsoft.com/en-us/Azure/app-service/app-service-web-tutorial-custom-domain

https://swimburger.net/blog/azure/setting-up-cloudflare-full-universal-ssl-with-an-azure-app-services

https://offering.solutions/blog/articles/2019/06/07/hosting-hugo-on-azure-with-cloudflare-azure-web-service-and-azure-blob-storage/

6 comments

  1. […] Configure a domain for an Azure App Service using Cloudflare (Damien Bowden) […]

  2. […] Configure a domain for an Azure App Service using Cloudflare – Damien Bowden […]

  3. Just tried this tutorial and it works. Thanks

  4. Hi

    Just a heads up – I would not recommend configuring your DNS TXT record like this – you should try to avoid exposing your origin domain.

    As an example, look up your domain using this tool:
    https://www.ultratools.com/tools/dnsLookupResult

    It will show you the TXT records that have been configured – you won’t however see the origin domain for the CNAME.

    Rather use the identifier method as documented here:
    https://docs.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-custom-domain

    1. Hi Gary

      Thanks for the info. Will read up on this.

      Greetings Damien

  5. Thanks for the reference 🙏
    Great blogpost!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: