DNS Record Crash Course for Web Developers

This was originally posted as a twitter thread: https://twitter.com/chrisachard/status/1188870256971915265

Confused by DNS Records? A, CNAME, ALIAS...

Me too 😬

Let's change that! (cheatsheet at the end)

🔥 DNS Record crash course for web developers 👇

1.

To get to www.example.com, your computer needs to know where on the Internet that server is

That means: it has to know what IP address to talk to

The way it finds out is the Domain Name System (DNS)

2.

When you register a domain, you can set many types of DNS Records

Each record has a Type, a Host, and a Value

• "Types" are predefined
• "Host" represents the root (@) or a subdomain (www)
• "Value" is an IP or web address, or other value

3.

The A record maps a subdomain to an IPv4 address

This is most commonly used at the root, so it tells your browser where example.com lives

The AAAA record does the same for IPv6

4.

CNAME maps a subdomain to another domain name

This can be another subdomain on the same site (like forwarding www to the root)

or another domain like heroku - where your app lives

5.

But there's a problem with CNAME!

Once you define a CNAME record for a subdomain (host), you CAN'T DEFINE another record for that same subdomain

Because of this, you can't use CNAME at the root level (where you need other records to exist)

6.

To fix that, ALIAS is used (sometimes ANAME)

ALIAS is like CNAME, but it's a non-standard dns type

So you can use ALIAS to forward your root domain (example.com) to your app's server (example.herokudns.com)

7.

That lets you put other records at the root, like:

TXT records, which provide extra info to any computer reading the DNS record

TXT records are often used to prove you own a domain - because only the domain owner can set a DNS record.

8.

Or:

MX records (Mail eXchange), which you use to specify another server that handles your email (like google)

MX records are unique because you can set multiple servers that are each given a "priority"

9.

There are many other record types, but those are the ones you'll most often set yourself.

For each record, you also specify a Time To Live (TTL)

This tells DNS servers how long to cache your DNS values

10.

TTL is why it can take some time for your new domain records to "propagate"

DNS servers, your ISP, and even your own computer can cache DNS records, serving up the "old" values until the TTL runs out

Cheatsheet

Hopefully that made DNS a bit less confusing for when you set up your next domain!

To put it all together, here's a PDF cheatsheet of this crash course: https://chrisachard.com/cheatsheets/dns-cheatsheet.pdf

🎉

 

Like this Post?

You can find more on twitter: @chrisachard
Or join the newsletter 📬 https://chrisachard.com/newsletter/

Thanks for reading!

Comments

[David Paine20]

Chris, awesome post. Thanks for sharing. There is a tool that I want to suggest here
dnschecker.org/all-dns-records-of-...
The reader, who wants to check the DNS record. they can check it here, from the above mention link.

[Giuseppe Caruso]

Chris, awesome post, straight to the point. 🙌🏼

Can I suggest an edit?
It would be great, by using different colors, or just pointing it out, what is shown in your browser, and what is served.

E.G if I use a CNAME (does C stand for Canonical? 🤔) redirecting www.example.com to example.com, you can make it clearer with colors that the host www typed into the address bar will be shown in place of the domain without it, which, in turn, will show the actual content on the server.

TYPE            HOST    URL (in browser)         DOMAIN (served)
======================================================================
A Record        @       example.com        ->    104.198.14.52
----------------------------------------------------------------------
CNAME Record    www     www.example.com    ->    example.com
----------------------------------------------------------------------
CNAME Record    blog    blog.example.com   ->    example.herokudns.com
======================================================================

That way, it's easier to understand that:

URL IN BROWSER                                ACTUAL CONTENT SERVED
======================================================================
www.example.com    ->    example.com    ->    104.198.14.52
======================================================================

And, again, thanks for the super useful wrap-up!

[Chris Achard]

This is a great way to visualize/explain it. Thanks!

[Nhlanhla Hasane]

Hi Chris, i recently finished developing my portfolio using Angular8, and then yesterday i did register for a domain with netlify which costed about $16.99
after registration it did gave me those option to setup the A , CNAME, AAA records but i was still busy with some functionality of my portfolio. So i'd just brushed it off that i will do all that set up once i am done fixing the error on the IDE. So now i've deployed my site, the site is live but got an error when i clicked on its link' error : "Page not found, Looks like you've followed a broken link or entered a URL that doesn't exist on this site. " '

I have reached to out to support, its been almost 5 hours without any response

[Ben Halpern]

Maybe a post in the help tag could help get you to the bottom of this?

#help

A place to ask questions and provide answers. We're here to work things out together.

[Nhlanhla Hasane]

Thank you will do so. Ben

[Chris Achard]

Hm; I haven't actually bought a domain through netlify before (I buy them outside of netlify and setup DNS separately), so I'm not 100% sure what might be happening, but I have a few ideas:

1. Can you access the site directly with the "your-app.netlify.com" address? (if not, then it's not deployed correctly, so changing DNS stuff won't do anything)

2. Can you access the domain part of netlify and check to see if the domain is "Verified"? (it turns green with no warning symbol)

3. If the dns records are there and the site is working directly, it's possible it's a DNS cache issue - though 5 hours is usually enough in my experience for it to clear and fix itself, so that doesn't sound like it...

Does that help at all?

[Nhlanhla Hasane]

The thing is i developed the site using vscode and then push my commits to its repo on github, and i fetched from github to netlify. Which deployed without any error. "My-app.netflify.com" is the one that's giving me the "Page Not Found Looks like you've followed a broken link or entered a URL that doesn't exist on this site." error and when i used my registered domain it want to DNS configuration. " to set up https. It's rollcoaster ride to be honest/

[Chris Achard]

ah, if the direct netlify link doesn't work, then it's not a DNS issue - something went wrong with deploying your site. Under "deploys", make sure there is at least one successful build, and then click that link directly to see if it's working.

Hope you can figure it out! (sorry, can't help much if it's a deploy issue... keep trying/waiting for netlify support I suppose).

[Nhlanhla Hasane]

Here's a repo for the site github.com/NhlanhlaHasane/Nhlanhla...

[Talz Cloning]

Hi Chris,

Thanks for this. Actually for #5 you can do this at root level without breaking DNS specification dates from 1987. Cloudflare introduced CNAME Flattening feature, very useful if you’ve looking for a way to make your root domain work on a hosted service like AWS and Heroku.

[Chris Achard]

Is that what they call a "virtual" CNAME, or something else? I think I read about that, but thought it was a different option (on Cloudflare) than just a normal CNAME? (could be wrong though - I haven't setup Cloudflare before)

[Talz Cloning]

a CNAME as an A record, explanation over here CNAME Flattening

[Steeve]

Thanks for this article, I didn't know about the CNAME limitation and the use of ALIAS to solve the problem. Good post Chris 🥂

[ادريس م]

Just ensure that your DNS provider supports ALIAS as a resource record type, as it isn't defined by the official RFCs which govern the behaviour of the DNS.

[Chris Achard]

Yes, definitely - different DNS providers have different workarounds.

[Chris Achard]

Thanks!

[Peter Tyldesley]

Amazing thanks. DNS has always been a pretty mysterious topic for me, so this was very helpful!

[Bernardo Gomes]

Cool crash course ! Thanks for shared this!

[Nick Spinazze]

This is really interesting! Thanks for sharing. I think a cool follow up post might be digging into the history of DNS and why it was created in this fashion.