Hosting Static website using AWS S3 and CloudFront

Prerequisites

1. AWS account

2. index.html file (You can any use example file on web)

Two parts of hosting

1. Static website using S3 only

2. Host website using both S3 and Cloudfront (CDN)

Static website hosting using just S3

1. Login to ASW Console and search for S3

2. Click on create bucket and give it a unique name(This should be unique across globe)

3. Use General Purpose bucket type under General config.

4. Use ACL Disabled under Object Ownership

5. Uncheck Block all public access under Block Public Access settings for this bucket and acknowledge.

6. Let versioning be disabled and by default Encryption type will be 'Server-side encryption with Amazon S3 managed keys (SSE-S3)'

7. Create a bucket.

   

8. Upload a index.html file and save.

9. Go to properties and under Static website hosting enable static website hosting, set hosting type to Host a static website, index doc to "index.html" and save.

10. Go to permissions and under Bucket Policy paste the below code and replace <bucketname> with your bucket name.

    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow",
                "Principal": "*",
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::<bucketname>/*"
            }
        ]
    }
    

11. Now under Permissions> Static website hosting URL will be present, access it to see your website.

Host website using both S3 and Cloudfront (CDN)

This is similar to above with some changes, instead of using S3 URL directly, CDN will be configured to access website which will be useful to deliver the content of the website across world with low latency.

1. In this case while creating S3 bucket, check to disable all public access (because we are using S3 as a backend and it should be accessed for all except CDN itself)

2. And under properties> Static website hosting, disable static website hosting.

3. Now search for CloudFront and create Distribution.

4. Under origin domain, select S3 bucket with above configured.

5. Under origin access create a new OAC and select as below.

   

6. Under cache behaviour> Viewer protocol policy> select redirect HTTP to HTTPS.

7. Disable WAF and set default root object to index.html and create distribution.

8. Copy the policy immediately after CDN is created(may take upto 5min to deploy)

9. Paste the copied policy json and paste it under S3> Permission> Bucket policy.

   

10. Now look for a "Distribution domain name" under CDN you just created under general. (Usually it will be like d1u4wdfgdf2wtaj4.cloudfront.net)

11. Browse it and you will get you static website hosted in AWS.