Map an existing Custom Domain to an Azure Web App

Azure Web App

In my previous post already we have been talking about the deployment of HTML web app to Azure App Service, henceforth narrating now the brief only. 

Azure App Services is a fully managed Platform-as-a-Service (PaaS) that provides a rich set of App Services. It is  designed for developers and offers them with the ability to develop web, mobile and diverse integrated scenarios in their preferred language, framework, and IDE etc. 

Along with the Azure App Services takes care of the security, scalability, and staging infrastructure and offers a fast and easy deployment.

If I talk about web specific applications, then Azure Web Apps facilitates you to build and host web applications in your favored programming language without bothering and managing infrastructure chunk. It provides a highly scalable, self-patching web hosting service.

The deployed web app is used to suffixed by the .azurewebsites.net at all times. For example, in my previous activity I deployed an HTML web app to Azure Cloud using the Azure Web App and got the final URL something like -

https://clouddemoweb.azurewebsites.net. 

If I execute the URL over the browser it loads the HTML website and looks like something as shown below.

Custom Domain

As I stated, you can notice the above URL is suffixed with keyword ‘azurewebsites.net’, which by some means resemble existence of Azure Cloud. Here you can play with custom domain/DNS to beautify the URL and hide any sign of the deployment’s Eco system.

A custom domain or a vanity URL is a unique trademarked name that identifies a website, a way to create branded links to navigate around the web.

For example, my blog’s original URL is something like - http://talkgrid.blogspot.com, but I mapped it with a registered custom domain www.talkgrid.in.

Similarly, you can map your any web app applications which has been deployed on Azure Cloud and currently  running on production slots with your preferred domains.

Pre-requisites

Before moving ahead, we need some pre-requisites to accomplish this task on top of Azure Cloud using an FTP client, though there another ways, but I’ll prefer FTP option.

1. Azure subscription, if you don't have an account then sign up for a free Azure account - https://azure.microsoft.com/en-gb/free/
2. Running Web App where a website deployed.
3. Custom domain.
4. Access privileges to domain provider’s portal. 

STEP – 1: Register a Custom Domain

Presently there are several providers who offer to register your preferred domain, like – GoDaddy and BigRock and many others. Before registering you need to confirm with them that the name you want is available. 

Here I am not going to talk about how to procure a custom domain, will focus only how to map the existing domain with an Azure Web App.

I am going with one of my existing domain which I had procured a long time ago through BigRock and sooner will expire, but can achieve the demo task – demodomain.com.

STEP – 2: Access DNS Management Portal

Domain Name Servers (DNS) are equivalent to a phonebook of the Internet, which maintain a directory of domain names and translate them to Internet Protocol (IP) addresses. In fact, people access information online through domain names, like google.com or gmail.com but in the other side the DNS translate these domain names to IP addresses therefore browsers can load the Internet resources.

Same here, need to configure the DNS settings also, access the DNS records with domain provider, log in the control panel. No doubt, the placement and availability of this feature might differ from provider to provider, contact their support team if face further hurdles.

Once you have logged on the control panel, you can find the DNS Management section by viewing your account information, as I logged on BigRock’s control panel for my account. 

Go to that DNS configuration page as I was selecting the Manage DNS link and it will load my account record page and configuration details. 

STEP – 3: Login to Azure Portal

To configure the DNS records, we need the Web App’s external IP address, that can be accessed in the app's Custom Hostnames blade under Custom domains category in the Azure App Service.

Login to the Azure portal https://portal.azure.com/

Select the earlier created Azure App Service and click Custom domains under the Settings category, will load the Custom Hostnames blade.

In the Custom Hostnames page, copy the app's IP address, as here mine is – 104.45.152.60, it will be required to further setup with domain settings.

STEP – 4: Map an A Record 

An A record is a database record used to map a URL to an IP address of the computing hosting the domain. In brief, an A record is used to find the IP address of a computer connected to the internet from a DNS name.

Go to A record section under DNS management section, and map/enter the IP herewith, click the Add A Record button as in my case - BigRock.

Essential to submit the same IP which you have been copied from the Custom Hostnames blade of Azure App Service.

You can leave the Host Name, click the Add Record, sooner post submission you will get an acknowledgement as well submitted entry.

STEP – 5: Map a TXT Record 

A TXT record is an informational type of DNS entry that contains additional information about the named service.  You can use a TXT record to provide the ability to associate random text with a host or other name, such as human readable information about a server, network, data center, or other accounting information.

Here we will use the TXT record to map the Azure Web App’s default hostname, which used to something like – app_name.azurewebsites.net. 

In my case it is - clouddemoweb.azurewebsites.net.

Even you can do verify the same using Custom Hostnames blade of Azure App Service.

Once you have copied the hostname, move to DNS management portal and click the TXT Records button, it will load the TXT dashboard.

Since there are no TXT records, so click the Add TXT Record button to map/enter a new one. Need to submit the same hostname which you have been copied from the Custom Hostnames blade of Azure App Service.

Here you can leave the Host Name also, click the Add Record, sooner you will get an acknowledgement as well submitted entry.

STEP – 6: Map a CNAME Record 

CNAME stands for Canonical name, it is a type of DNS record that can be used to alias one name to a true or canonical domain name. 

For example, kumarrajendra.online and www.kumarrajendra.online will point to the same application and hosted by the same server.

Next, move to DNS management portal and click the CNAME Records button, it will load the CNAME dashboard.

Meanwhile, there are no CNAME records, so click the Add CNAME Record button to map/enter a new one. Need to map the custom domain as well wildcard domain with the same hostname which you have been copied from the Custom Hostnames blade of Azure App Service.

You noticed, the Host Name is required here, need to make two entries with two hostnames as ‘www’ and ‘*’ respectively, with same value and save the record, sooner you will get an acknowledgement as well submitted entry.

STEP – 7: Enable the CNAME record mapping in the Azure Web App

DNS configuration part done, time to enable the same CNAME record mapping with your deployed Azure Web App, move to the Custom Hostnames blade of Azure App Service.

Click the + icon next to Add hostname under the Custom Hostnames section, it will load the Add hostname blade.

Submit the custom domain name and click the Validate button, in my case I submitted both hostname – 

• demodomain.com
• www.demodomain.com

Sooner, Azure will validate and display all related information about the custom hostname and you can notice that the Add hostname button is activated.

Next, post successful validation must to click the Add hostname button but make sure that Hostname record type is set to CNAME record (www.example.com or any subdomain).

It might take some time for the new hostname to be reflected in the Azure Web App's Custom domains page. If not getting reflect then try to refresh the browser to update the data, in my case it reflected promptly.

Congratulation, mapping at Azure end done!! 😊

STEP – 8: Verify the Custom DNS name 

Finally, the custom hostname has been mapped with the Azure Web App, time to do verify the application.

Go to any browser and execute both custom hostname, for example in my case – 

• http://www.demodomain.com
• http://demodomain.com

First case - http://www.demodomain.com

Second case - http://demodomain.com

Congratulations, the Azure Web App mapped to Custom Domain!!