DEV Community

Cover image for DNS Record Crash Course for Web Developers
Chris Achard
Chris Achard

Posted on • Originally published at twitter.com

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)

DNS diagram

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

DNS records type, host and 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

DNS A records

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

CNAME DNS Record

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)

Don't use CNAME at the root

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)

Use ALIAS at the root of the domain

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.

TXT Record information

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"

MX Records

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

TTL determines cache

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

DNS Cache

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!

Top comments (20)

Collapse
 
dpaine20 profile image
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.

Collapse
 
caruso profile image
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
======================================================================
Enter fullscreen mode Exit fullscreen mode

That way, it's easier to understand that:

URL IN BROWSER                                ACTUAL CONTENT SERVED
======================================================================
www.example.com    ->    example.com    ->    104.198.14.52
======================================================================
Enter fullscreen mode Exit fullscreen mode

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

Collapse
 
chrisachard profile image
Chris Achard

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

Collapse
 
nhlanhla_illot profile image
Nhlanhla Hasane • Edited

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

Collapse
 
ben profile image
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.
Collapse
 
nhlanhla_illot profile image
Nhlanhla Hasane

Thank you will do so. Ben

Collapse
 
chrisachard profile image
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?

Collapse
 
nhlanhla_illot profile image
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/

Thread Thread
 
chrisachard profile image
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).

Collapse
 
nhlanhla_illot profile image
Nhlanhla Hasane

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

Collapse
 
talzcloning profile image
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.

Collapse
 
chrisachard profile image
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)

Collapse
 
talzcloning profile image
Talz Cloning

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

Collapse
 
steeve profile image
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 πŸ₯‚

Collapse
 
digdugprophetie profile image
ادريس Ω…

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.

Collapse
 
chrisachard profile image
Chris Achard

Yes, definitely - different DNS providers have different workarounds.

Collapse
 
chrisachard profile image
Chris Achard

Thanks!

Collapse
 
p12y profile image
Peter Tyldesley

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

Collapse
 
bernardoow profile image
Bernardo Gomes

Cool crash course ! Thanks for shared this!

Collapse
 
nspinazz89 profile image
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.