Hosting a Static Website with CloudFront and AWS S3

Overview

Create a static website on Amazon S3 bucket(private bucket) but with public read policy assigned, using cloud front for Content Delivery Network.

Introduction

If I were to get married again, I'd probably host our wedding invite and love story on an AWS S3 bucket and use an OAI (Origin Access Identity) in CloudFront to restrict access to the AWS S3 bucket if I wanted to invite you strictly by invitation.😉 Well, let us host a wedding invite in this project whose template I got here. You can use any of the templates from here too.

Amazon S3

Amazon Web Services (AWS) provides scalable, high-performance object storage with its Amazon S3 (Simple Storage Service) offering. A key element of Amazon S3 is an S3 bucket, which serves as a container for objects (files and the metadata that goes with them) in a flat namespace.

Static Website

Without any dynamic server-side processing, a static website is one that is made up of fixed, pre-built HTML, CSS, and JavaScript files that are sent straight to the user's web browser. This indicates that during a user's session, the content on the website remains unchanged regardless of user interactions or input from outside sources. Businesses and individuals looking for a quick, safe, and simple way to maintain an online presence for informative content, including landing pages, blogs, or portfolios, should consider using static websites.

Amazon CloudFront

A service offered by Amazon Web Services (AWS) is Amazon CloudFront, a content delivery network (CDN). Its goal is to provide high transfer speeds and minimal latency in content delivery to end consumers globally. Application data and both static and dynamic content can be delivered more quickly to users in various geographical locations when using CloudFront.
Employing Amazon CloudFront enables businesses to deliver their apps and content closer to end users, improving speed and availability and resulting in quicker load times and an improved user experience.

You can also set up Access Control with OAI (Origin Access Identity) to restrict direct access to the S3 bucket, allowing access only through CloudFront, which we are going to be using for this project.

Prerequisite

An AWS account
The files to upload for your static website.

Steps

Step 1: Create a Bucket on Amazon S3

i. Log into your AWS console and use the search bar to search for S3 and click on it.

ii. Click on create bucket so as to input your bucket name.

iii. Input a bucket name in the Bucket name with a unique name which has not been used before. Go ahead and untick Block all public access

iv. Scroll down and click the acknowledgment box.

iv. Leave every other thing as default and scroll down and click create bucket.

Step 2: Upload Website files to S3 Bucket

i. Click on the bucket name so you can upload your website files into the bucket.

ii. Click on upload and select the files from your local file storage. Do well not to upload the overall folder carrying the other folders. Upload the folders one after the other so it opens on your browser along the line. Make sure that index.html resides in the root directory of the bucket.

iii. Click on upload folders and upload your folders from there. You can upload a file if that is what you have.

iv. After uploading the folders from your local file storage, click on Upload.

v. Give it some time to populate and upload. You will eventually see a small green banner after a while to indicate that it was successful.

Step 3:Enable Static Website Hosting on S3 Bucket Created

i. Click on the close button and see all your files or folders. Click on the Properties tabs and scroll down to Static website hosting

ii. Click on Edit on Static website hosting

iii. Click on the radio button Enable. Under hosting type, click on Host a static website. Under Index document, type index.html in it.

iv. Leave every other thing as default and scroll down and click on save changes

Step 4 - Attach a Bucket Policy

i. Click on Permissions tab and scroll down to Bucket policy

ii. Click on Edit under Bucket policy to input your bucket poilicy to allow access the website on the S3 bucket.

iii. Attach the policy below and replace bucket name with your bucket name. Scroll down and click on save changes.

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

iv. Click on the Properties tabs and scroll down to Static website hosting and copy the link there to open on your browser.

v. When you open it if you everything right, you should see the static website here. This is what mine looks like.

https://www.loom.com/share/752de16b21684e0aa3d04fbcbfa3a5d4?sid=3dacffd6-399b-4813-a268-e8d52a8bb145

Step 5 - Create a CloudFront Distribution to make your AWS S3 bucket private

i.Search for Cloudfront in your AWS console and click on it.

ii. Click on Create a CloudFront distribution and populate it.

iii. There is no existing Origin Access Control (OAC) so we need to create one. Click on Create new OAC

iii. Under Origin domain, input the url you used in opening the your website which is found in your created S3 bucket under Properties >> Static website hosting. If you see the use website endpoint in yours, do not click on it. If you do,you will not see the Origin access control settings which you need to set to make your bucket private.

iv. You should get a page like this. Leave everything as default especially the origin type as S3. Then click create

v. Under Web Application Firewall (WAF), click on the radio button Do not enable security protections. We just want to keep it simple.

vi Leave everything as default and click create distribution

vii. Click on create policy and click on the circled url to paste the policy.

viii. Navigate to permissions under your bucket and scroll to bucket policy and click edit. Delete the policy you pasted before which you used to see if your bucket was publicy accessible before we used cloudfront to make it private.Paste the copied policy in here. Scroll down and click on save changes. The policy can be found below also.

{
        "Version": "2008-10-17",
        "Id": "PolicyForCloudFrontPrivateContent",
        "Statement": [
            {
                "Sid": "AllowCloudFrontServicePrincipal",
                "Effect": "Allow",
                "Principal": {
                    "Service": "cloudfront.amazonaws.com"
                },
                "Action": "s3:GetObject",
                "Resource": "arn:aws:s3:::my-wedding-invitation/*",
                "Condition": {
                    "StringEquals": {
                      "AWS:SourceArn": "arn:aws:cloudfront::154334184944:distribution/E22OCAT2YCY14Z"
                    }
                }
            }
        ]
      }

ix. Navigate back to your cloudfront tab and copy the Distribution domain name. Paste it on your browser and add /index.html to it. i.e https://d3fvr8swd8au27.cloudfront.net/index.html Make sure to use your own Distribution domain name.

x. It would bring out your website page for you just like mine.

Conclusion

Based on the steps we have taken to achieve this, it can be implied that the tutorial describes how to set up a private static website with Amazon S3 and CloudFront. Enabling static website hosting with a public read policy and setting up an S3 bucket to store website files are among the procedures. For global access, fast transfer rates and minimal latency are therefore guaranteed by creating a CloudFront distribution for content delivery.

For the CloudFront distribution to control access to the S3 bucket, establishing an Origin Access Control (OAC) is an essential step in the procedure. To further make the S3 bucket private, the guide outlines how to remove the existing public read policy and change the bucket policy to limit access to only the CloudFront service.

The documentation concludes by showing you how to use CloudFront to enhance the security and performance of your static website hosted on S3, all the while keeping it private and only available via the CloudFront distribution.

PS: Please remember to disable and then delete your Cloudfront and also empty and delete your AWS S3 bucket so you avoid incurring costs.

Blog