In the ever-evolving landscape of web development and hosting, the Amazon Web Services (AWS) cloud platform continues to reign supreme. Its robust suite of services empowers businesses and developers to create, deploy, and manage websites and applications with unparalleled scalability, security, and reliability. One such gem in AWS’s arsenal is the combination of Amazon S3 (Simple Storage Service) and Amazon CloudFront, which together form an unbeatable duo for hosting Static websites.

In this blog post, we embark on a journey to unravel the world of AWS static website hosting using S3 and CloudFront. Whether you’re a seasoned AWS pro or just taking your first steps into the realm of cloud computing, this guide will walk you through the process of setting up a high-performance, cost-effective, and globally accessible static website.

Services Used : 

1. S3 Bucket
2. AWS Certificate Manager
3. Route 53
4. CloudFront

The entire blog can be divided into steps.

Step 1 : Create S3 Bucket ready to host the static website. (5 mins)

Step 2 : Create Route 53 Domain (10 mins)

Step 3 : SSL certificate request in ACM. (5 mins)

Step 4 : Create CloudFront Distribution. (5mins)

At the end of the blog, we will also furnish an estimated expense for the services employed in this tutorial.

Let’s start.

Step 1. : Create S3 Bucket ready to host the static website. (5 mins)

First we will create a S3 bucket which will host the website pages.
Create a S3 bucket with the naming conventions as per AWS. 

Here are the details for S3 bucket I have created.

It is a good practice to name the S3 bucket with the domain name. It helps us identify the bucket easily for respective domain.

Name : tre****static.com

AWS Region : us-east-1

Object Ownership : ACLs disabled

Block all public access : disabled

Bucket versioning : Enabled

Create Bucket.

Once the bucket is created, under “Properties” tab, scroll down to the bottom of the page and enable static website hosting.

Static Website Hosting : Enabled

Hosting type : Hosta static website

Index Document : index.html

Error Document : error.html

“Save Changes”.

Here the website html file is supposed to be named “index.html”. If you are having any other name, then enter the same in the “Index Document” field.

Next navigate to “Permission” tab, and enter the policy as mentioned below. 

{

    “Version”: “2012-10-17”,

    “Statement”: [

        {

            “Sid”: “AddPerm”,

            “Effect”: “Allow”,

            “Principal”: “*”,

            “Action”: “s3:GetObject”,

            “Resource”: “arn:aws:s3:::tre****static.com/*”

        }

    ]

}

My S3 bucket name is “tre****static.com”. If you have any other name of the bucket replace the same in the policy mentioned above. 

Then upload the html files in the bucket. If your website has some images, then upload them too.

We can save the images at root level of the bucket. But as a DevOps engineer, conventionally it is a good practice to save the images by making a folder “img” and saving all the images in it. Since we have enabled versioning of the bucket, each image will get a URL generated, we can copy the URL and replace it in the index.html file of website where we define the image.

You will be receiving the website URL in the “Static Website Hosting” under “Properties” tab.  

We will get the website up and running but it will be unsecured.

To get a “https” secured URL, we need to have SSL certificate from AWS ACM. 

But first we will create a Hosted Zone in Route 53.

Step 2 : Create Route 53 Domain (10 mins)

Navigate to Route 53 Console and create a Hosted Zone.

Domain Name : tre****.com

Type : Public Hosted Zone

Create Zone.

In this tutorial I am using tre****.com as I am having admin access of this domain. If you do not have any domain, you need to register one in Route 53 in the “Domains” sections.

Additional Cost to register domain : $12 + taxes (.com extension)

Once a domain is created you will have NS and SOA records generated automatically. 

I am having domain outside AWS, so need to route the traffic from AWS to the Domain registrar of “tre****.com”. 

For that we need to copy all the NS records from Route 53 Hosted Zone and paste them in the “Name Servers” of the respective Domain Registrar.

Note : Copy and Paste the records without the dot after each record.

In next blog we will create SSL certificate and CloudFront Distribution.

The post Unleash the Power of AWS : Static Website Hosting with S3 and CloudFront in 30 minutes (1) appeared first on Addend Analytics.