Building a website using AWS S3 and delivering it through AWS cloudfront

Introduction

This is Document will describe how to host a static website using amazon S3 and deliver it through AWS cloud front

Terms used in the document

Amazon simple storage service S3

Amazon cloud front

Amazon Route 53

Note

This document contains screenshots of other documentation replace the buckets names according to your requirement

Creating Bucket In AWS

Steps:

  • Login into the AWS console
  • Navigate S3 service
  • Create a bucket with same name of your Domain name

For example, if you domain is test.com then create a bucket in AWS S3 as test.com

  • In this case we creating bucket as cdn.omniwyse.co.in
  • Select the bucket, navigate to properties and select to static web hosting

s1

  • The console looks like

s2

  • Select Use this bucket to host a website
  • Upload Index.html for home page
  • Upload error.html as error page (optional)
  • Ensure that everything hosted in this must be permitted to use publicly
  • To achieve this, create a bucket policy
  • Click on permissions tab select bucket policy

s3

  • Paste the following replacing with your own bucket name

{

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

“Statement”:[{

“Sid”:”PublicReadGetObject”,

“Effect”:”Allow”,

“Principal”: “*”,

“Action”:[“s3:GetObject”],

“Resource”:[“arn:aws:s3:::cdn.omniwyse.co.in/*”

]

}

]

}

Create a Second bucket as www.cdn.omniwyse.co.in

  • Create a second bucket as cdn.omniwyse.co.in to redirect request from www.cdn.omniwyse.co.in to cdn.omniwyse.co.in
  • Select the create bucket and navigate to the properties and go to static web hosting section

s4

  • Select Redirect request tab
  • Enter target bucket as test.omniwyse.co.in (origin bucket)
  • This will redirect the requests from cdn.omniwyse.co.in to cdn.omniwyse.co.in
  • Click Save
  • Note the endpoint URLs for both buckets you will notice same output

Creating AWS cloud front distribution to improve website performance

  • Navigate to AWS cloudfront service
  • Create a web distribution select origin as your bucket

cdn1.JPG

  • Make Restrict bucket access to yes
  • In Alternate CNAMES tab enter the bucket name
  • Click on create and wait for the distribution to deploy
  • Note the Domain name of Distribution like this

cdn3.JPG

Linking our static website from cloud front to our Domain using AWS route 53 service

  • Navigate to Route53 service in AWS
  • Create a hosted zone as omniwyse.co.in (replace with your domain name)
  • Copy the NS servers provided by AWS into your Domain Provider if your bought domain from vendors like GoDaddy, Digital ocean
  • Leave as defaults if your domain is registered in AWS
  • Create a record set as cdn.omniwyse.co.in (replace with your domain name)
  • Select Alias to Yes
  • Enter the domain of cloud front distribution

cdn2.JPG

Conclusion

Thus we created a static website using AWS S3 ,delivering it through cloud front and linking it to our Custom domain name

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s