Introduction Last updated: 2020-08-03

The following type of websites are possible to host in Amazon S3


Static Website
Angular single page application
React single page application

Create Buckets

A bucket is a container or a web accessible folder for objects stored in Amazon S3. And this bucket names are unique globally. So, any object URL in an S3 bucket is accessible over the internet with a unique URL, generally structured like this: 

https://[region].s3.amazonaws.com/[bucket]

Create two S3 bucket with your domain name (www and non-www)

example.com  
www.example.com

Re-direct non-www bucket to www bucket

Upload static files to bucket

Upload all your web content files to www bucket

Make WWW bucket public

To make bucket public Go to -> Permission -> Un-check "Block All" public access




Next, add the policy to the bucket in Bucket policy

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

Create AWS route53 public hosted zone

Create hosted Zone

Create AWS route53 public hosted zone with the same name as the domain name (Non-WWW).

Add Nameserver

Copy the name server from AWS and Update it in GoDaddy NS [without ending dot(.)].

Create "A" Record

Create A Type recordset for the non-www domain

  1. Click on "Create Record" -> "Simple Routing" -> "Define simple record"
  2. Alias to S3 website endpoint,
  3. Select the region of your bucket
  4. Select your S3 main bucket (i.e non-www domain)

Create A Type recordset for www subdomain

  1. Alias to S3 website endpoint,
  2. Select the region of your bucket
  3. Select your S3 www bucket (i.e www domain)

Go to your browser and access the website

Create Manager

Generate free TLS using Let's Encrypt & add (Let's Encrypt) TLS certificates in the AWS Certificate Manager

Create Certificate in N-Virginia

Import certificates in N-Virginia region

Import Certificate

  • Go to AWS Certificate Manager Import a certificate
  • Add the content of cert.pem to Certificate body. Use cat cert.pem in terminal to print the content of pem file
  • Add the content of privkey.pem to Certificate private key
  • Add the content of chain.pem to Certificate chain

Set up Cloud Front

Set up Cloud Front for S3 static web site

Create Distribution

  1. Go to Cloud Front and select Create distribution and again select Get Started under Web.
  2. Copy the end point from www domain nameS3 bucket (Caution: Don't select the auto-select option) and add toOrigin Domain name

Add Origin Domain Name

Paste the S3 WWW bucket end point in Origin Domain Name

Re-direct HTTPS to HTTP

In Default Cache Behavior Settings -> Viewer Protocol policy select Redirect HTTP to HTTPS

Select SSL Certificate

  • In Distribution Settings add Alternate Domain Names (CNAMEs) ==> www.example.com
  • In SSL Certificate select Custom SSL Certificate (example.com) and select the imported certificate from the Certificate Manager


Leave everything with default configuration & create

Add C-Name in Route 53

Point Domain to CloudFront

  1. Copy the Domain Name that is displayed in the row after create
  2. Add that as CNAME in Route53

Sub-Domain

  1. Create new distribution similar to www
  2. Add CNAME to route53

Re-Deploy [Clear Cache]

Re deployment requires clear cache

CloudFront Distributions	-> "YOUR DISTRIBUTION ID" -> Invalidating -> CREATE -> Enter  "/*"

FAQs

Expected error

Key is not found will be in the origin path. Solution Clear/remove origin path