Map an existing Custom Domain to an Azure Web App



Custom Domain


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.

Static HTML Azure Web App

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://solutionmandi.blogspot.com, but I mapped it with a registered custom domain www.solutionmandi.com.

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 – kumarrajendra.online.

Custom Domain


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. 

DNS Management

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. 

DNS configuration

STEP – 2: 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.

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 – 3: 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.

A Record

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

Add A Record

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

Submission A Record

STEP – 4: 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.

Custom Hostnames blade

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

TXT Record

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.

Add TXT Record


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

Submission  TXT Record

STEP – 5: 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.

CNAME Record

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.

Submitting CNAME record - www

Submitting CNAME record - *


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.

Submission CNAME Records

STEP – 6: 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.

Custom Hostnames blade


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

Add hostname blade

Submit the custom domain name and click the Validate button, in my case I submitted both hostname – 
  • kumarrajendra.online
  • www.kumarrajendra.online


Adding hostname

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

Added hostname

Added hostname

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.

Custom Hostnames added

Congratulation, mapping at Azure end done!! 😊

STEP – 7: 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.kumarrajendra.online
  • http://kumarrajendra.online


First case - http://www.kumarrajendra.online

Custom domain - www

Second case - http://kumarrajendra.online

Custom domain - naked domain

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


1 comment: