AWS S3 Static Website Hosting

Anand Srivastava
Posted by Anand Srivastava March 14, 2022

AWS S3 Bucket

3-11-2021

Pawan Rai

How To Host Static Website on AWS S3 Bucket

AWS S3 Provides The Facility to use S3 Buckets as The Container and Host a Static Website inside the Bucket

If We want the Bucket to connect to the Domain and have a GATEWAY through the user can access the bucket Website

we can easily access the bucket the Through the Name of Domain Below Structure help you how this will Going to Work

Requirements

  1. AWS Account
  2. Domain Access (To Update Nameserver)

For Testing and Documentation Purpose using Free Domain and Free Tier Account

Domain Name is used is : hellobucket.tk

Part 1 : AWS S3 Static Website Deployment Bucket and Making Bucket Public for Access.

  1. Step 1: Login to AWS Console
  2. Go to S3 Bucket
  3. Step 2: Create a S3 Bucket & My Bucket Name is: MyStaticBucket

  1. Upload Website to the bucket and we have two options
  2. We have to make the File or index file Public
  3. We can make the Bucket Public (It will work)
  4. Create IAM Role and Attach the bucket to make in Public
  5. Make the Object inside the bucket Public
  6. Making the bucket Public is most Used Method For Static Website Hosting
  7. Go to Permission and Edit the Public access
  8. Clear Block all public access, and choose Save changes.

  1. Click Save Changes and Confirm
  2. Go to Bucket Policy and Edit the Policy

Use This Bucket Policy

  1. {
  2. “Version”: “2012-10-17”,
  3. “Statement”: [
  4. {
  5. “Sid”: “PublicReadGetObject”,
  6. “Effect”: “Allow”,
  7. “Principal”: “*”,
  8. “Action”: “s3:GetObject”,
  9. “Resource”: “arn:aws:s3:::hellostaticbucket/*”
  10. }
  11. ]
  12. }
  13. It will make Your Bucket Publicly Accessible and Through Link of the object You are able to access Website Easily.

  1. Website Which I Created and Uploaded to S3 and Acccess through the object link From S3.
  2. Last Step >> Go To Bucket Properties and At the Bottom of Page You will Find

  1. Edit the Session
  2. Make Following Changes

  1. Save Changes and Its Good to Go.
Bucket Link Can be Directed To Route 53 For The Domain Name Access.

Part 2.

Going To Connect the Bucket to the Domain Name From Which User Reach out to Domain name to Reach Bucket Hosted Website

Step: 1

Make Route 53 Ready Through which user can access website

  1. Go to Route 53 in AWS Console
  2. Create a Hosted Zone
  3. Enter the Domain name and Click create the Hosted Zone

  1. Click on First Record and Copy NameServer Values and Upload inside the domain nameserver

  1. Copy Here and Paste it at Domain Provider Domain name

  1. Click on Change Nameservers
  2. Route 53 Completed

Part 3: Go To Certificated for SSL Certificates in AWS

  1. Request a Certificate >> Select Public Certificate

  1. Enter the Domain Name and Select the DNS Verification

  1. Click Request the Certificate
  2. Go inside the Certificate and Click on Create a record in Route 53

  1. Wait until the status goes Successful

Part 4:

Go To CloudFront and Attach Everything which we Created in Previous Step

  1. Go to CloudFront
  2. Click on create a Distribution
  3. Provide the Bucket URL without http://
  4. Like Image Below

  1. Change Default Cache Behavior from (Like This)

  1. Go to Setting and Alternate Domain name as Below

  1. Under SSL Click on custom SSL

  1. Select Certificate which we Created
  2. Leave every option as same it was and click on create

  1. Wait for Deployent status change

Last Step:

Connecting the Route 53 and CloudFront

    1. Copy the link which Distribution domain name
      1. Verify first the link is Reachable to You S3 Bucket website.

    1. Go to Route 53 and Add a Record

    1. Check the Domain Working or not by visiting

Note:

Every Resource which we create are only for testing Purpose and Delete As same After the Documentation

Used a Free Tier Account for AWS and https://my.freenom.com/ for Free Domain for Testing.

Cookie Value: