Automating the Deployment of a Static Website using S3 bucket and hosting it through Route 53 using Cloud Formation

What is S3 Bucket ?

S3 is an object storage service that offers industry-leading scalability, data availability, security, and performance. This means customers of all sizes and industries can use it to store and protect any amount of data for a range of use cases, such as data lakes, websites, mobile applications, backup and restore, archive, enterprise applications, IoT devices, and big data analytics.

What is Route 53 ?

Route 53 is a highly available and scalable cloud Domain Name System (DNS) web service. It is designed to give developers and businesses an extremely reliable and cost effective way to route end users to Internet applications by translating names like www.example.com into the numeric IP addresses like 192.0.2.1 that computers use to connect to each other. Amazon Route 53 is fully compliant with IPv6 as well.

What is Cloud Formation (CFT)?

AWS Cloud Formation(CFT) gives you an easy way to model a collection of related AWS and third-party resources, provision them quickly and consistently, and manage them throughout their lifecycles, by treating infrastructure as code. A CloudFormation template describes your desired resources and their dependencies so you can launch and configure them together as a stack.

Steps Required to Accomplish this

1. Have a Domain Name setup.

2. Create a Public Hosted Zone in Route 53 Service

3. Create an S3 Bucket with the same name as the Domain Name and enable Static Website Hosting.

4. Create an A Type Record with an Alias to point to the S3 Bucket

5. Upload 2 files (Index.html/Error.html) for the same inside the bucket.

The first step is to have a domain name setup:

You can purchase your domain name with Route 53 which will cost around 18$ per month or you can purchase one through Freenom where can get a domain name free for an entire year.

I have created a sample Domain name via Freenom for the same.

This is a manual step and needs to be done to provide inputs to Cloud Formation.

After you have got the Domain name you can add the same in the CFT.

You can find the CFT template here

Go to the console and create a new stack in Cloud Formation Service.

1. Give the Stack name
2. Provide parameter values for S3 Bucket, make sure it is the same as that of domain name For example if the domain is- abc.tk the bucket name should be the same abc.tk
3. Provide parameter values for S3 Hosted zone Id:
   Specify the hosted zone ID for the region that you created the bucket in
   This hosted Zone id can be found from this list, the values vary from region to region.

Since I am deploying the bucket in us-west-2(oregon) , I have given the hosted zone id for the same here.

After you have provided the values for the same , you can go ahead and proceed with the stack creation.

Stack Definition

Stack Definition

Resources Key defines what all services you would want in your stack.

An S3 Bucket is created along with a Route 53 Hosted Zone and a Record name to route traffic from the DNS to the Static Website hosted via S3.

The following are then created by the Cloud Formation Stack

Route 53 Public Hosted Zone with an A-Type record having an Alias to S3 Bucket

S3 Bucket with Public access having 2 objects (Index.html and Error.html)

Note: you would have to upload the static files manually on your, based on what content you would want to display, give the objects public access (updating the object ACL in the Permissions tab).

And now you have your Static Website setup.

You can see the same via the domain name that you provided.

Sample example of the files that I uploaded.

Index.html

Error.html

Note: If you have got the domain name via Freenom and if you are not able to see the website via the registered domain, you can add the name servers present in your Route 53 public hosted zone to the Freenom’s name servers.

Thanks for reading, do give a clap if you like it :)