How I setup the DNS for bolet.io

#App Service#DNS#SSL#Certificate
Share on:

I recently deployed this website (Bolet.io) to an Azure App Service and needed to configure the DNS. My domain is registered with GoDaddy, and this post details the steps I took to set everything up.

Step 1: Registering the Domain

The first step was ensuring that I had a registered domain. For Bolet.io, I had already registered the domain through GoDaddy. If I hadn’t, I would have needed to register a new domain, either through GoDaddy or another registrar.

Step 2: Creating an Azure DNS Zone

To manage the DNS records for Bolet.io, I decided to use Azure DNS. Here’s how I set up the DNS zone:

  1. Accessing the Azure Portal: I logged into my Azure account and navigated to the Azure portal.

  2. Setting Up a New DNS Zone:

    • I searched for "DNS Zone" in the Azure portal search bar.
    • After clicking "Create," I began setting up a new DNS zone.
    • I selected the relevant subscription and chose an existing resource group, though I could have created a new one if necessary.
    • I entered "bolet.io" as the DNS zone name.
    • After reviewing the details, I clicked "Create" to finalize the DNS zone.

  3. Copying Name Servers: Once the DNS zone was created, Azure provided a set of name servers (NS records). I took note of these because I would need them to update the DNS settings in GoDaddy.

Step 3: Updating GoDaddy’s DNS Settings

Next, I needed to point my domain to Azure DNS by updating the NS records in GoDaddy:

  1. Logging into GoDaddy: I accessed my account at GoDaddy, where Bolet.io is registered.

  2. Navigating to DNS Settings:

    • Once logged in, I went to the "My Products" section and clicked on "DNS" next to the Bolet.io domain.
    • This took me to the DNS Management page for the domain.

  3. Updating NS Records:

    • In the DNS Management section, I scrolled down to the "Nameservers" section.
    • I clicked on "Change" and selected "Enter my own nameservers (advanced)" from the options provided.
    • I replaced the existing name servers with the Azure DNS name servers I had copied earlier.
    • After entering the Azure name servers, I clicked "Save."
    • DNS propagation might take a few hours, so I allowed some time for the changes to take effect.

Step 4: Linking My Azure App Service to the Custom Domain

With the domain now pointing to Azure DNS, the next step was to link my Next.js application running on Azure App Service to the custom domain.

  1. Accessing the Azure App Service:

    • In the Azure portal, I went to "App Services" and selected the app service associated with Bolet.io.

  2. Adding the Custom Domain:

    • Under the app service settings, I found the "Custom domains" section.
    • I clicked "Add custom domain" and entered "bolet.io."
    • Azure prompted me to verify ownership of the domain by adding a TXT record to my Azure DNS zone.

  3. Adding a TXT Record:

    • I returned to the Azure DNS zone for Bolet.io.
    • I added a new record set by clicking on "+ Record set."
    • I set the record type to "TXT" and entered the verification code provided by the Azure App Service.
    • After saving the record, I went back to the App Service to complete the domain verification.

  4. Binding the Domain:

    • Once the domain was verified, I proceeded to bind it to the Azure App Service.
    • I also set up a CNAME or A record in the Azure DNS zone to point to the Azure App Service's IP address or default domain name.

Step 5: Configuring SSL (Optional but Recommended)

To ensure secure connections, I set up SSL for my custom domain:

  1. Using Free SSL via App Service:

    • Azure App Service offers a free SSL certificate through App Service Managed Certificates.
    • In the "Custom domains" section of the App Service, I added an SSL binding for the custom domain.

  2. Uploading a Custom SSL Certificate (If Necessary):

    • If I had wanted to use my own SSL certificate, I could have uploaded it to the Azure App Service and bound it to the custom domain.

  3. Enforcing HTTPS:

    • To make sure my site always used HTTPS, I enabled the HTTPS-only setting in the App Service.

Step 6: Testing the Setup

Finally, I tested the DNS setup by navigating to "https://bolet.io" in a browser. The domain resolved to my Next.js application hosted on Azure App Service. To verify the global propagation of the DNS records, I used a tool like What's My DNS.