How to Set Up AWS CloudFront with S3 for Content Delivery

ByAkrur Neupane Hours Updated on Categories Networking, System Administration

In today’s online world, it’s crucial to make sure your website loads quickly and reliably for a smooth experience. Amazon Web Services (AWS) provides a powerful tool called AWS CloudFront, to help you achieve this. AWS CloudFront is a Content Delivery Network (CDN) service designed to distribute content globally with low latency and high data transfer speeds. 

In this article, I will show you how to use this distribution service to make your website faster and more available when you’re serving a website through an S3 bucket. By following these steps, you can significantly enhance your website’s performance and availability.

The architecture diagram of our article

Let’s dive into each step and explore basics and advanced configurations to further optimize your content delivery.

Prerequisites

Before you start the setup process, ensure you have the following:

An AWS account with the necessary permissions to create and manage cloud resources.

A registered domain name or access to DNS settings.

Web content stored in an S3 bucket.

Step 1: Creating an S3 Bucket and Hosting a static website on S3 

Log in to your AWS Management Console.

Navigate to the S3 (Simple Storage Service) section.

Accessing S3 

Click on the “Create bucket” button.

Creating a S3 bucket

Provide a unique and descriptive bucket name following S3 naming conventions. (The bucket name must be unique, so I would suggest you start with your full name/company name so it can be unique.)

Choose a region for your S3 bucket, ideally one closest to your target audience.

Giving a bucket name and selecting a region

Leave all the things as default. (Don’t make it public as we are using CloudFront distribution to access these buckets.)

Click “Create bucket”.

Finishing creating a bucket

Step 2: Uploading Content to Your S3 Bucket

Select your S3 bucket from the dashboard.

Click on the “Upload” button to add your static web assets (e.g., HTML files, and images).

Uploading objects in S3 bucket 

Click on “Add files” if you have only files (just HTML and CSS) but if you have build files (e.g. React or Next) you can click on “Add folder” and upload the files or folder. 

Adding files in the S3 bucket

Click on the “Upload” button.

Step 3: Creating an AWS CloudFront Distribution for the S3 bucket

Go to the AWS CloudFront console.

Accessing the CloudFront page

Click on the “Create a CloudFront distribution” button.

On the Origin domain select the S3 bucket that we have created. 

Selecting the S3 bucket that we have created. 

In the Origin access select “Origin access control settings.”

Now click on “Create control setting.”

Creating Origin Access Control

It’s recommended to configure the S3 bucket to restrict access to only CloudFront. In this setup, CloudFront acts as a security layer in front of the S3 bucket, and direct access to the S3 bucket is blocked.

Give the name and description. I am leaving it as default.

Click on “Create.”

Creating control setting

Leave all the things as default for now.

In the Web Application Firewall (WAF), disable the security protection. (You can enable it if you need.) 

Choosing not to enable security protections

In the default root object, add your default root object file name. In my case it’s index.html. 

Adding default root object

Click on “Create distribution.” 

You can see the notification that our S3 bucket policy needs to be updated.