How To : Assign Custom URL to Azure Website on App Service

I have created a free Azure website with domain.azurewebsites.net URL using Azure App Service.
Here is the URL https://vijayamalla.azurewebsites.net
I am not an avid blogger but I try to throw in a few every now and then. Today I wanted to use a custom URL so I could use https://vijayamalla.com instead of the Azure websites URL.

I followed these steps :

Step 1 : Logged into Azure Portal to check the valid pricing tier I have created a free website on Azure (TIP : With every Azure subscription we get 10 free websites) as shown below

The URL and the App Service Plan is highlighted.
Because its a free plan we don't have access to set/enable Custom Domains on this App Service. We have to Scale UP this plan to enable Custom Domain Feature

Step 2 : Scale UP Azure App service Plan

Scroll to find the following Scale Up setting under the App Service in Azure. Click on it to see more options on how we can scale up. There is an option for Custom Domains, but if you click on it, we will see message to upgrade our App Service Plan (Since, I am on the free plan)

Clicked on "Scale up (App Service Plan) " option and selected the next UP tier from Free F1 plan, which is D1 (estimated about $10/month, in my range. You can scale up more to B1 for better resource menu but higher price)

Main difference between F1 and D1 is the Custom Domains, which we want right now. I have picked D1 and "Apply" my changes. Azure Portal will show a notification on the upper right corner
and once DONE as below right under the Bell icon

Step 3 : Map Your Domain

This is where the real mapping begins. We have to add CNAME and A record entries in Azure to map the custom Domain name to the Azure website.

Under the website settings in Azure, click on "Custom Domains" and it will show more options than earlier since we have scaled up our pricing tier.

(I have make my website HTTPS Only.)

1. Click on "Add Hostname" and it will show more options to the right. Follow along and provide necessary information.

Add your hostname. In my case its "www.vijayamalla.com" and click on Validate.

2. It will show more information now, with CNAME and A-Record (Click on Hostname record type Drop down)setting that are required to be done on Azure and as well as the Domain hosting provider (in my case its GoDaddy). Below are the CNAME and A Record settings (you might see different information as per your custom domain name and azure website)

scroll down more to reveal the following changes that are required to be done at the domain hosting provider website portal (in my case its GoDaddy)

3. Update the DNS changes as shown above in GoDaddy DNS portal. Go to GoDaddy Domain Names page and click on DNS to show the settings page.

ADD or Updated a CNAME Entry for WWW Key to vijayamalla.azurewebsites.net (it will change in your case)
The Propagation takes about 30-60 min.

Add/Updated A Record and TXT DNS entry as shown earlier in Go Daddy DNS settings Page as below
The black covered part is the IP Address

Propagation might take 30-60 min

Click on "Validate" to see if the changes made in Go Daddy has been Propagated. if not try refreshing the page or try after some time. Validation takes couple more seconds than earlier as shown below.

After successful validation it is shown Green as below, Unlike earlier it was RED.

4. Now click on "Add Hostname" button in the same Validation screen.
This will add "Vijayamalla.com" to the App Service Custom Domains page.

And DONE.

Please now you can navigate to vijayamalla.com and you can see the blog. (FYI : I Used Azure pre-configured ghost blogging website).

* Only Challenge I have is the SSL is gone. Azure provides a free SSL to all the .azurewebsites.net websites. Since we are using our custom Domain, Azure SSL is not valid anymore. *

There are couple of options here.

we can either purchase a SSL cert and add it to the Azure under "Custom Domain" page, click SSL binding.

OR

Scale up Azure App service from D1 to B1 for SSL. The main difference here is that we can purchase SSL cert from Azure portal.

OR

Follow the steps here by Troy Hunt's Complete Guide To Loading Free SSL

UPDATE: I have successfully configured Cloud Flare shared SSL on my website vijayamalla.com as shown in the above mentioned blog. HUGE THANKS TO TROY HUNT

Thank you
Vijaya Malla
@vijayamalla