How to Host a Static Website Using Amazon CloudFront

How to Host a Static Website Using Amazon CloudFront

CloudFront is a Content Delivery Network (CDN) that helps deliver content like images, videos, and websites faster to users around the world by bringing it closer to them.

For example, if you’re serving an image, let’s say naturephoto.png, from a regular web server (e.g., using the link http://example.com/naturephoto.png), users might have to wait longer because their request travels across various networks on the internet to reach your server and get the image.

With CloudFront, the content is stored on servers (called edge locations) closer to the users. When someone requests the image, CloudFront uses Amazon’s fast and reliable network to quickly deliver it from the nearest edge server, reducing delays and improving their experience.

Key Benefits of CloudFront

Global Scaled Network for Fast Content Delivery

Amazon CloudFront is massively scaled and globally distributed. The CloudFront network has 400+ points of presence (PoPs) that are interconnected via the AWS backbone delivering ultra-low latency performance and high availability to your end users.

Task 1:Create a EC2 instance (ubuntu 24.04)

Task 2: Install the nginx in Ec2 instance

Task 3: Create a aws CloudFront

Task 4: How to make EC2/ALB Instance Accessible from CloudFront Only

Created a EC2 instance is in running state

Install the nginx in Ec2 instance

sudo apt update

sudo apt install nginx -y

check the status of nginx service by using systemctl status nginx command

Deploy your website on nginx in /var/www/html path

See the Website running through Public IP address-

Create a aws CloudFront

Go to the AWS console , search "cloudfront"

Create CloudFront resources

Let's create now our CloudFront distribution and let's select our EC2 instance Public IP DNS , using the console make this process really simple.

To secure the connection between CloudFront and the EC2 instance we need to create or use an existing Origin Access Control Settings.

Before creating distribution , need to create a Create a Cache policy

we have the confirmation. The distribution needs some time to be ready (~10min) so have some patience here.

Check if it's working

Let's now go back to the CloudFront console and retrieve the distribution domain name to check our website online:

If we use the browser to open that link, we can see our website:

How to make EC2/ALB Instance Accessible from CloudFront Only

We can see that user can access the your website from both URL EC2 and CloudFront

For that we need to create a security group to ensure that user can only access through CloudFront URL

Search VPC in console and click "Managed prefix lists"

Copy the "Prefix list ID"

In EC2 instance "security group" add the Prefix list ID in HTTP type

For Testing :

Stopped the EC2 instances

And you can see that we are unable to access through Ec2 instance Public IP

Then, Go to the CloudFront distribution

Create a "invalidations" for Remove Data From CloudFront Edge

Now you can see that we can access the website only through CloudFront

Thanks !!