Saturday, October 12, 2019

Redirecting a custom domain to a website hosted at AWS S3 with CloudFront

One of my friend was having a bit hard time in redircting a custom domain to website hosted hosted at AWS S3 with CloudFront. Then I was helping him with possible options and decided to write an article with my suggestions.

If you are new to webhosting with S3, you may refer the URLs given as references.

To stard with possible DNS records to be configured to direct your URL to web hosting server at the Domain Name service provider i.e. GoDaddy, 123-Reg

A Records:

A Records are the most basic type of DNS record and are used to point a domain or subdomain to an IP address. Assigning a value to an A record is as simple as providing your DNS management panel with an IP address to where the domain or subdomain should point and a TTL.

CNAME:

CNAME records can be used to alias one name to another. CNAME stands for Canonical Name. A common example is when you have both example.com and www.example.com pointing to the same application and hosted by the same server. In this case, to avoid maintaining two different records, it’s common to create:

    An A record for example.com pointing to the server IP address
    A CNAME record for www.example.com pointing to example.com

As a result, example.com points to the server IP address, and www.example.com points to the same address via example.com. Should the IP address change, you only need to update it in one place: just edit the A record for example.com, and www.example.com automatically inherits the changes.

What is CloudFront?

Amazon CloudFront is a web service that speeds up distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users. CloudFront delivers your content through a worldwide network of data centers called edge locations. When a user requests content that you're serving with CloudFront, the user is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance.

My friend had purchased a custom domain (Let's assume "www.example.com") from 123-Reg and he wanted to redirect www.example.com and example.com both to a website hosted at AWS S3. He had already configured CloudFront and let's assume his clourd front URL is as d4k69jpeqpexyz.cloudfront.net.

In CloudFront, an alternate domain name, also known as a CNAME, lets use the custom domain name (www.example.com) for links to files instead of using the domain name that CloudFront assigns to the distribution (d4k69jpeqpexyz.cloudfront.net
). Both web and RTMP distributions support alternate domain names.

When you use the CloudFront domain name for your files, the URL for a file called /images/image.jpg is:

http://d4k69jpeqpexyz.cloudfront.net/images/image.jpg

If you want to use your own domain name www.example.com, instead of the cloudfront.net domain name, you can add an alternate domain name to your distribution, like www.example.com. You can then use the following URL to view /images/image.jpg:

http://www.example.com/images/image.jpg

However you will not be able to configure alternative domain name as example.com. You can only configure it as www.example.com. Then you will face the same problem as my friend did.

Once the cloudfront configuration is ready, we need to configure the DNS record at DNS provider.  In our case 123-reg.

Using the DNS provider's tools, (123-reg in our case) we created a CNAME record to map www.example.com to d4k69jpeqpexyz.cloudfront.net

The CNAME is the only thing we needed if we wanted www.example.com. Unfortunately as most people do, we wanted "example.com" to work so we need another step.

example.com is often referred to as a naked domain or the apex record of the domain. The reason it's a problem is that it can't be a CNAME. CNAMEs only work on subdomains like "www." This makes it is difficult to point as a subdomain.

The remaining approach was to use a service to automatically redirect any request going to example.com to point to www.example.com. This picks up the CNAME record and the site will be served from CloudFront.

The automatic redirect is not possible with plain old DNS so we used another service. Some DNS providers offer this service along with their DNS (godaddy does, 123-reg does not.)

When the DNS provider doesn't do it, there are a few free services. One that We've used is http://wwwizer.com/naked-domain-redirect - it doesn't require any registration or payment.

To use this type of service, we need to create a DNS "A" record for the naked domain "example.com". For the wwwizer.com service, we needed to create an A record to point example.com to 174.129.25.170. That's all!

So, with this setup, if a user types example.com into their browser, the following would happen:

    DNS query: example.com -> 174.129.25.170 (wwwizer.com's service)
    HTTP request to 174.129.25.170 for example.com
    174.129.25.170 redirects example.com -> www.example.com
    DNS query: www.example.com -> CNAME to d4k69jpeqpexyz.cloudfront.net
    DNS query: d4k69jpeqpexyz.cloudfront.net -> points to Amazon S3
    HTTP request for www.example.com is now served by Amazon S3

Reference:
Web hosting with S3: https://medium.com/@kyle.galbraith/how-to-host-a-website-on-s3-without-getting-lost-in-the-sea-e2b82aa6cd38
Record Types: https://kb.pressable.com/article/dns-record-types-explained/
Configure DNS with GoDaddy: https://www.godaddy.com/garage/configuring-and-working-with-domains-dns/
CloudFront: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html
Configure CloudFront: https://medium.com/@kyle.galbraith/how-to-make-use-of-cloudfront-for-secure-delivery-of-static-websites-to-the-world-d2f54e8b096