How to Add a Custom Domain
Of course, the beauty of a URL shortener is to have short links and this is done best by a naked domain (ex: 07f.ca). To realize this you would need to buy an expensive certificate with a wild card, and this doesn't fit in with the goals of this project.
We will achieve it nevertheless by having a secure www domain and doing a dynamic forward from a naked domain to www. (ex: 07f.ca to www.07f.ca)
Let's start by Adding a domain to the App Service.
From the Azure portal (portal.azure.com), open the ShortnerTools App Service (Azure Function). From the left panel select Custom domains. Then Click the Add custom domain button in the middle of the screen.
This will open a tab where you will need to enter your domain with the www sub-domain. In our case it was www.07f.ca.
You will now need to validate the domain with your provider (in our case it's GoDaddy.com). Navigate to the domain provider and create two new DNS records (TXT + CNAME) as explained in the bottom of the panel in the Azure portal.
Here is an exemple from GoDaddy where:
- The CNAME was created with the URL of the Azure function.
- The TXT was created with the Custom Domain Verification ID provided on the Azure portal page.
Once all that is entered. Click the validate button on the Azure portal. If you don't have the green check beside Hostname availability and Domain ownership, be patient as it can take up to 48 hours. (You can always double-check that you didn't do any typo anywhere ;P )
When you have it green, you are ready for the next step.
We now have a www domain mapped to the Azure function. At this state, only HTTP is configured. To try it, make sure you have at least one short URL created (learn how to create one here).
In a browser type: HTTP://www.[yourDomainName]/{vanity}. As an example, a complete URL would look like this: http://www.07f.ca/test2
The custom domain has been added, we now first need to create a certificate before we can add the binding
Create a free App Service managed certificate as described in the documentation Secure a custom DNS name with a TLS/SSL binding in Azure App Service
From the left navigation of your Azure Function (same page as before), select TLS/SSL settings. Then from the top of the new panel, click on Private Key Certificates (.pfx) and then Create App Service Managed Certificate.
Select the custom domain to create a free certificate and select Create. You can create only one certificate for each supported custom domain.
When the operation completes, you see the certificate in the Private Key Certificates list.
Go back to the Custom domain panel. Click the Add binding link beside the big red "Not Secure" label.
Select your custom domain, the created certificate thumbprint which has been created in step 5, and "SNI SSL" as the SSL Binding
Voila! You can now call your azURLShortener from your secured custom domain! ✔
Now that the certificate is bound you should be able to call the same URL as before but using HTTPS.
In a browser type: HTTPS://www.[yourDomainName]/{vanity}. As an example, a complete URL would look like this: https://www.07f.ca/test2
The URL shortener is now completely configured, and your users will be pleased. There is only one last step to make YOUR experience more enjoyable.
The last step is to update the src\settings.json. This is the setting file for the Azure Function. Add (or edit if already present) customDomain and set it to your new domain.
"customDomain":"https://c5m.ca"
Congratulations, you are all set!