How to configure a secured custom domain on a Azure Function or website
Tags: webdev, azure, cloud, tutorial
Published: 2020-12-03 16:54:02

---
title: How to configure a secured custom domain on a Azure Function or website
published: true
date: 2020-12-03 16:29:00 UTC
tags: webdev,azure,cloud,tutorial
canonical_url: http://www.frankysnotes.com/2020/12/how-to-configure-secured-custom-domain.html
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7byfbqyzaz862a38py00.png
---

I wanted to create this tutorial for a long time. How to map a naked domain on an Azure resource. It looks so complicated, but once you know what to do it's kind of simple in fact. In this post, I will share the three simple steps to do exactly this.

{% youtube srZv8aj3ZP8 %}   

## Step 1: Add Custom Domain
  
The first step is to map a domain on the application. The method I will explain uses a "www" domain (ex: www.fboucher.dev). To map directly a naked domain (ex: fboucher.dev) you would need to buy a wildcard certificate. However, I will show you in step three how to walk around this issue by using DNS rules.

From the Azure portal, open the Azure Function or App Service. From the left menu search for "custom", click the **Custom domains** option. In this panel click the button Add custom domain, and enter your `www` domain.

[![](https://1.bp.blogspot.com/-9r1qsyeEtGY/X8kPYQe2EOI/AAAAAAABb7U/kEfTU4wLzK0uZil9nkvBhGZAPgTYXAUqQCLcBGAsYHQ/w640-h350/step1-add-domain.png)](https://1.bp.blogspot.com/-9r1qsyeEtGY/X8kPYQe2EOI/AAAAAAABb7U/kEfTU4wLzK0uZil9nkvBhGZAPgTYXAUqQCLcBGAsYHQ/s1920/step1-add-domain.png)
  
Click the validate button and follow the instruction to make the connection between the App Service and your domain provider.

## Step 2: Adding a Certificate
  
Now that your custom domain is mapped, let's fix the "not secure" warning by adding a certificate. From the Azure portal return in the App blade. Repeat the previous search for "custom", and select the option **TLS/SSL settings**. Click the **Private Key Certificates** , and the **Create App Service Managed Certificate** button. Select the domain previously added and saved. It will take a few moments to create the certificate.

[![](https://1.bp.blogspot.com/-jRTbotLV4EI/X8kPe7EzsjI/AAAAAAABb7Y/pQKPSa8bbsAePG44qrlrLSRoXwySQeoywCLcBGAsYHQ/w640-h195/step2_A.png)](https://1.bp.blogspot.com/-jRTbotLV4EI/X8kPe7EzsjI/AAAAAAABb7Y/pQKPSa8bbsAePG44qrlrLSRoXwySQeoywCLcBGAsYHQ/s1920/step2_A.png)
  
Go back in the Custom domains blade and click the **Add binding** button. Select the domain and certificate, don't forget to select the `SNI SSL` option and click the Add Binding button.

[![](https://1.bp.blogspot.com/-Ap-fA6USKcM/X8kPjGn0KUI/AAAAAAABb7c/xk4mYxbpnZc9oN0INV3hoc6UfVKpESZjACLcBGAsYHQ/w640-h360/step2_B.png)](https://1.bp.blogspot.com/-Ap-fA6USKcM/X8kPjGn0KUI/AAAAAAABb7c/xk4mYxbpnZc9oN0INV3hoc6UfVKpESZjACLcBGAsYHQ/s1920/step2_B.png)
  
## Step 3: Create the DNS Rules

Create an account in cloudflare.com and add a site for your domain. We will need to customize the DNS and create some Page Rules.

[![](https://1.bp.blogspot.com/-Vz9s4_wNiM0/X8kPorpyoqI/AAAAAAABb7g/sBKZJIV9y3EraejBdpmMZwsHT_r9u7_ZQCLcBGAsYHQ/w640-h206/cf_DNS_Rules.png)](https://1.bp.blogspot.com/-Vz9s4_wNiM0/X8kPorpyoqI/AAAAAAABb7g/sBKZJIV9y3EraejBdpmMZwsHT_r9u7_ZQCLcBGAsYHQ/s1519/cf_DNS_Rules.png)
  
On the cloudflare.com note the 2 nameservers addresses. Go to the origin name provider (in my case godaddy) and replace the names of the nameservers with the value found on cloudflare.

[![](https://1.bp.blogspot.com/-1yu-Z8pC2H0/X8kPtMs5lFI/AAAAAAABb7k/AYXMaCbK-Sk6EhCTW2oyq9cxKZo2R6VnQCLcBGAsYHQ/w640-h402/cf_rules_details.png)](https://1.bp.blogspot.com/-1yu-Z8pC2H0/X8kPtMs5lFI/AAAAAAABb7k/AYXMaCbK-Sk6EhCTW2oyq9cxKZo2R6VnQCLcBGAsYHQ/s1624/cf_rules_details.png)
  
Create a rule that will redirect all the incoming traffic from the naked-domain to www.domain. On the option on the top, click the **Pages Rules** (B). Then Click the Button **Create Page Rule**

[![](https://1.bp.blogspot.com/-NP_N-KBfApU/X8kPxblBVWI/AAAAAAABb7o/38YCy0Fkrf4XO_FQIBr226ZGpkAU1HFNgCLcBGAsYHQ/w640-h416/Rule1.png)](https://1.bp.blogspot.com/-NP_N-KBfApU/X8kPxblBVWI/AAAAAAABb7o/38YCy0Fkrf4XO_FQIBr226ZGpkAU1HFNgCLcBGAsYHQ/s1193/Rule1.png)
  
In the field for **If the URL matches:** enter the naked-domain follow by `/*`. That will match everything coming from that URL

For the **settings** select `Forwarding URL` and `301- Permanent Redirect`. Then the destination URL should be `https://www.` with your domain and `/$1`.


### References

🔗 Map an existing custom DNS name to Azure App Service: [https://c5m.ca/customDomain](https://c5m.ca/customDomain) 

🔗 Secure a custom DNS name with a TLS/SSL binding in Azure App Service: [https://c5m.ca/tls-ssl](https://c5m.ca/tls-ssl)