How to configure Route53 with our DomainName to access a static website from S3 on AWS

This article will help you with the steps to host a static website on S3 and redirect traffic from your subdomain to the static website on the S3 bucket. For this, you will need a domain purchased on AWS. Once you have the domain on AWS, you can create a subdomain and redirect requests from it to the S3 bucket. 

A static website is the basic type of website that contains webpages with the fixed content. Each page is coded with HTML and delivers content that is there in it, whereas dynamic websites depend on server-side processing, including server-side scripts such as PHP, JSP, or ASP.NET. S3 supports only static websites and not dynamic ones.

Before proceeding with this article, it is assumed that you have a basic understanding of S3 Bucket and Route53.

Also, make a note that purchasing a domain on AWS is not free and you will be charged for it. Once you purchase the domain, even if you cancel it in between, the amount deducted will not be refunded, creating a HostedZone is also not free, click here to know its pricing.

S3 bucket also incurs a cost, very less though. To know about the pricing of S3, click here.

Pre-requisites

1. AWS Account(Create if you don’t have one).
2. Domain Name(Purchased on AWS)
3. S3 Bucket(Click here to learn to create an S3 Bucket on AWS)

What will we do?

1. Login to AWS
2. Configure S3 Bucket
3. Create a Record Set

Login to AWS

Click here to go to the login page where you can enter your credentials to get into the account.

Once you successfully login into your account you will see the main AWS management console as follows.

Configure the S3 Bucket

Search for S3 in the search box at the top of the screen.

You will see all your S3 buckets listed on the S3 Bucket dashboard under your account. S3 buckets are not filtered on the basis of regions, buckets from all the regions are listed altogether.

I will be using the "kops.devopslee.com" bucket to host a static page. If you do not have an S3 Bucket, create it before you proceed. Note that the name of the bucket must match the subdomain/domain name.

So, if I am using a subdomain "kops.devopslee.com", my bucket name must also be the same i.e. "kops.devopslee.com".

Check if public access is allowed on the bucket, if not then edit the public access and allow it. To edit the public access, go to the Permissions tab and click on "Edit" under "Block public access" and untick all 4 options.

Also, add the following bucket policy to your S3 bucket. You can also download this policy from my Github Repository

{
    "Version": "2012-10-17",
    "Id": "Policy1548223592786",
    "Statement": [
        {
            "Sid": "Stmt1548223591553",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-s3-bucket-name-here/*"
        }
    ]
}

Edit the bucket policy, add the above policy and change the "arn" in it with the "arn" of your bucket.

In the properties tab, scroll down at the bottom of the page and see if the static website hosting is enabled if not then enable it.

Now, you are ready with the required configuration for the S3 Bucket and can upload your static website. 

If you want you can download my sample index.html from my Github Repository and upload it to the bucket.

Create a RecordSet

Search for Route53 in the search box at the top of the screen.

Create a subdomain/hosted zone of your choice which will look as follows.

Create a record set in the subdomain/hosted zone, toggle to alias, select "A record type --> Alias to S3 website endpoint" and select the s3 bucket.

Your subdomain/hosted zone should look as follows now.

See if you have an entry in your main hosted zone for the subdomain of type NS.

You are done with the required configuration and now your static website should be accessible on the subdomain you used for routing purposes.

Hit the subdomain URL in the web browser.

Following is the index.html which we used in the static website.

Conclusion

In this article, we saw the steps to route traffic from the subdomain to the S3 bucket. The same steps you can follow to use your main domain. Now, we know that the name of the S3 bucket must match the subdomain/domain name.