HOW TO SET UP A STATIC WEBSITE USING S3 BUCKET & CLOUDFRONT DISTRIBUTION

●    Register a custom domain on Route53
●    Creating S3 buckets
●    Store the contents in S3 bucket
●    Configuring access policy for the S3 buckets
●    Testing the domain endpoint
●    configuring DNS records
●    Testing website
●    Improving performance of the website using Cloudfront

IMPORTANT NOTE

●    As S3 doesn't serve the traffic using an HTTPS connection , we will make use of cloudfront for the domain.
●    Domain be hosted in the Route53

SERVICES USED

The following AWS services will be used for this Implementation.

●    Route 53
●    S3 Buckets
●    Cloudfront
●    AWS Certificate manager

Host a domain using Route 53. Route 53 is a global service.

Go to Route 53, In the left Navigation pane, select Hosted Zones

In the following page , Enter a domain name - For example : zenesys.com and type be Public Hosted zone and press Create

Domain is successfully hosted in the Route53

Make sure the bucket name is the same as the Domain name.

Let's create two S3 buckets as follows.

Bucket 1 : www.zenesys.com

Bucket 2 : zenesys.com

Go to S3 console, Click Create bucket
Enter the Domain name as the Bucket name

and click Create.

Create a bucket for the www.zenesys.com domain as well.

 The required s3 buckets are successfully created.

Uploading static contents to S3 bucket

Upload the website content to the S3 bucket; the bucket named www.zenesys.com will be used as the main S3 bucket.

If the customer/end user types zenesys.com the domain will be automatically redirected to www.zenesys.com

For testing purposes , an index.html file will be uploaded to the main bucket (www.zenesys.com)

To upload the content , click Upload , add the files and then click Upload.

The file is successfully  uploaded to the main S3 bucket.

To configure static website hosting for the s3 bucket. Choose the main bucket and then click Properties,

For Static website hosting, click Edit , and choose to use this bucket to host a website.

 

The index document and the error document will beindex.html, and press Save.
Static web hosting is successfully configured.

 

For the end users to view the contents of the website, the s3 bucket should be public. By adding the S3 bucket policy we can make the s3 bucket public. For that we should let the s3 bucket accept the bucket policy.

Click Permissions tab.

 

All public access to the s3 bucket is blocked by default.

 

Click Edit, and Uncheck ACL’s and click Save.

 

Next step is to add the bucket policy to make the S3 bucket public. Select the main bucket and click permissions and choose Bucket policy. Add the s3 bucket policy provided below, make sure the domain name is replaced.
{

       "Version": "2012-10-17",
       "Statement":
[
          {
             "Sid": "AddPerm",
             "Effect": "Allow",
             "Principal": "*",
             "Action": "s3:GetObject",
             "Resource": "arn:aws:s3:::www.zenesys.com/*"
          }
      ]
}

                           Read Also: Creating EC2 Instances using Terraform

The policy will grant read-only access to all the contents in the s3 bucket to the end users.

We need to set up a redirection from zenesys.com to www.zenesys.com.

For which the 2nd bucket (zenesys.com) will be used. Open the zenesys.com S3 bucket and click Properties and choose Static web hosting. Choose Redirect requests and for the target bucket or domain , Enter www.zenesys.com and the Protocol be https, and then click Save.

 

The following bucket will be used for redirection from the non-www domain to the www domain.
 

Setup a SSL certificate using ACM so that the website will be served using https.

 

To generate free SSL certificates, Go to ACM Console, Request a public certificate, select Request a certificate

Under Add domain names, Enter the FQDN (Fully Qualified Domain Name) of a domain.

For example : www.zenesys.com

Enter the domain name with the prefix *. To generate SSL certificate for all the subdomains of zenesys.com

 

Click Next, using one of the below methods the certificate request should be validated.
 ●    DNS Validation
 ●    Email Validation

 

Add tags to the certificate, Click Review
Click Confirm and request

If DNS Validation is selected, a CNAME record will be provided which should be added to the Route53 console.

If Email Validation is selected, ACM sends the validation email to the Domain registrant, technical contact and Administrative contact.

One of the above should reply to confirm the certification request.

Once the validation process is completed, The certificate will be Issued.

 
This certificate can be used with the cloudfront distribution.

SETUP CLOUDFRONT DISTRIBUTION

Go to the Cloudfront console. 2 cloudfront distributions will be created. Click Create Distribution

 

And select Web as the delivery method.
Under Origin Settings , enter the endpoint of the S3 bucket's static web hosting of the main S3 bucket i.e www.zenesys.com.

Go to S3 console , Click the bucket and choose Properties
Under Static website hosting , You can get the static website hosting endpoint. Copy the endpoint without http.

 
Go to the cloudfront console and paste the copied endpoint for origin domain name
For the Viewer protocol policy , Choose Redirect HTTP to HTTPS

 

For Alternate Domain name (CNAMEs) , Enter the domain name which is www.zenesys.com.
For an SSL Certificate , Choose the SSL certificate that was created before. Make sure the certificate is generated in the N.Virginia region.

 

And at last Click Create distribution.

Following the same procedure create a distribution for zenesys.com.
The static website hosting should look like zenesys.com.s3-website.ap-south-1.amazonaws.com (without www)
Make sure the Viewer Protocol policy is Redirect HTTP to HTTPS

 

For Alternate Domain name (CNAMEs), type zenesys.com

Choose the SSL certificate from ACM and Click Create distribution

Go to the Route53 console.

The DNS records should be created as follows.
●    Create A record pointing www.zenesys.com to the cloudfront distribution of www.zenesys.com

 

●    Create A record for zenesys.com pointing to the cloudfront distribution of zenesys.com

 

Alternate Method of Above Implementation

With the help of one s3 bucket , We can host the static website hosting using S3 bucket and cloudfront distribution.

1.    Create a S3 bucket and upload the website contents
2.    Create free ssl certificate using ACM
3.    Create cloudfront distribution with the s3 origin
4.    Restrict bucket access should be Yes
5.    Grant Read Permissions on Bucket : Yes, Update Bucket Policy
6.    Viewer Protocol Policy- Redirect HTTP to HTTPS
7.    Alternate domain names (CNAMES) – zenesys.com www.zenesys.com
8.    Apply the SSL certificate
9.    The Default Root object be index.html
10.   After the deployment of cloudfront distribution , Add the DNS A records pointing to cloudfront distribution alias to zenesys.com
11.    Add CNAME record for www.zenesys.com pointing to zenesys.com

We have implemented static website hosting using AWS services such as S3 bucket , cloudfront , ACM.
We have also configured https secure connection with the redirection from non-www domain to www domains.