How to Host a Static Website Using Amazon CloudFront

How to Host a Static Website Using Amazon CloudFront

Introduction

Cloudfront is a Content Distribution Network (CDN), a service that allows you to host your content close to the final users worldwide with low latencies. To know more about CloudFront and CDNs check my article.

As an example, suppose that you’re serving an image from a traditional web server, not from CloudFront. For example, you might serve an image, sunsetphoto.png, using the URL http://example.com/sunsetphoto.png.

Your users can easily navigate to this URL and see the image. But they probably don’t know that their request is routed from one network to another — through the complex collection of interconnected networks that comprise the internet — until the image is found.

CloudFront speeds up the distribution of your content by routing each user request through the AWS backbone network to the edge location that can best serve your content. Typically, this is a CloudFront edge server that provides the fastest delivery to the viewer.

Key Benefits of CloudFront

Global Scaled Network for Fast Content Delivery

Amazon CloudFront is massively scaled and globally distributed. The CloudFront network has 225+ 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

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

If you want to learn how to install Nginx then visit this URL :

https://utkarsh80.hashnode.dev/deploying-a-website-on-aws-ec2-instance-using-nginx

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.

Now, need to create a Create a Cache policy

Now use this Cache policy name and click on Create distribution

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"

Click "com.amazonaws.global.cloudfront.origin-facing" under 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 "invalations" for Remove Data From CloudFront Edge

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