Supercharge Your Content Delivery with AWS CloudFront!

AWS CloudFront

What is AWS CloudFront?

Amazon CloudFront is a Content Delivery Network (CDN) service offered by AWS. It accelerates the distribution of content—such as websites, APIs, video streams, or software downloads—by delivering it to users through a worldwide network of edge locations. These are strategically placed data centers designed to reduce latency by serving content closer to the user’s geographical location.

CloudFront integrates seamlessly with other AWS services like S3, EC2, Elastic Load Balancing, and Lambda@Edge, allowing for dynamic content delivery, security, and scalability.

What is a Content Delivery Network (CDN)?

A Content Delivery Network (CDN) is a system of distributed servers (called edge servers) deployed in multiple geographic locations to store (cache) content closer to the users. The primary purpose of a CDN is to improve the performance of content delivery by reducing latency, speeding up load times, and enhancing the user experience.

Key features of a CDN:

Caching: Static content such as images, CSS, or JavaScript files are cached at edge servers close to users, reducing the need to fetch it repeatedly from the origin server.

Geographic Reach: With a global distribution of edge locations, CDNs ensure users from different regions experience faster access to content.

Load Balancing: CDNs distribute traffic across various servers, improving performance and preventing overloading.

Security: CDNs often provide enhanced security by mitigating DDoS attacks and integrating with services like firewalls.

How CloudFront Works as a CDN:

User Request: When a user requests content, CloudFront routes the request to the nearest edge location.

Edge Cache: If the content is cached at the edge location, CloudFront serves it directly from there.

Fetching from Origin: If the content is not available at the edge, CloudFront retrieves it from the origin (e.g., S3, EC2) and caches it for future requests.

Security & Optimization: With built-in features like AWS Shield and AWS WAF, CloudFront ensures secure and optimized content delivery.

Use Cases of CloudFront:

Website Acceleration: Reduces latency and improves the speed of websites by caching static assets.

Video Streaming: Supports on-demand and live streaming of videos with low latency.

API Acceleration: Helps improve the performance of APIs by caching responses.

Security: Integrates with AWS Shield for DDoS protection, ensuring secure delivery of content.

Both CloudFront and CDNs in general are crucial for providing fast, secure, and reliable content delivery to users across the globe.

We will start with practical demonstration to understand more:

We will create the s3 bucket for the static website and will see how the website would be accessible with the help of the CDN.

The S3 is object based storage services which is used to host the static file such as our audio file, video files & Binary large object so anything we can consider as an object we can upload to the S3 bucket.

We can directly host our website to the S3 bucket and users can directly access the bucket and the content would be rendered but that is not a best practice if user has an directly access to the S3 bucket for rendering the content there would be lot of challenges irrespective of the security concerns because they have the direct access for the bucket.

So another challenge would be latency. As everyone could be accessing the bucket so there could be slowness in loading the audio , video file or any static content. Even cost optimization is also kept in mind while using the S3 bucket because it will download and upload in the S3 bucket so there is the cost associated with it. To overcome these challenges (Security, Latency & Cost) there could be many more. So there is a concept called a CDN (Content Delivery Network) so it helps you to catch the content to the nearest edge locations & so the CDN service for the AWS is CloudFront.

These edge locations span across the globe, let's say we have two users one is in India and another one in Canada accessing the website when they are accessing the website through the edge location the content will be cached. If the user who is India trying to access a website doesn't have to go to the S3 bucket, they can directly go to the edge locations and access the data cause content has already cached there. Edge location is not in the bucket hosting location, it's there in the location where the user has accessed the data. As mentioned earlier there are edge locations all over the world that would be cached to the nearest edge location.

It's enhancing the security because now users won't have access to the S3 bucket directly. Even the cost would be reduced now we don't have to pay the upload and download cost because the content is already cached in the CloudFront edge locations & also latency provides the lowest possible latency because content is cached at the nearest edge location to the user.

So for the user it doesn't matter where the website is hosted. Now first we will create the bucket and host a static website. Then will add the CloudFront distribution on the top of it.

Wil start and then create a bucket. Then Click on Create bucket.

The bucket name should be our domain name.

As we have given the name of the example.com though we don't own any custom domain so will see how it works .

So another important thing is that we have to keep in mind that the public access should be restricted for this bucket only CloudFront would have an access. Other users can not directly have access.

The Bucket versioning should be enabled.

With the versioning we can always recover the deleted objects.

Then keep other settings as default.

Then click on the crate bucket.

Once Bucket has been created then click on the bucket.

Then go to the Properties.

In Static website hosting click on Edit.

& Enable it.

Then click Save changes.

Now we will go to the bucket and upload the object i.e. Index.html which is taken from the website.

Click on upload.

Then click on upload.

So our objects have been uploaded.

In the properties tab there is an endpoint URL that has been generated.

The URL has not been accessible. Because we have disabled the public access.

Now we can go ahead and search on the console CloudFront.

Click on CloudFront.

While creating any resources keep in mind that post implementation we should delete the resources otherwise it will occur the charges. 

Click on create a CloudFront distribution.

Then choose Origin domain , Origin which is the source origin where the data will be rendered. So once we click it will listing out all the bucket names:

So there are multiple options listed down like we can put CloudFront in from the API Gateway even as well ELB. But we can choose the S3 bucket which we created.

Name has been auto populated over here.

Next is origin access and it should not be in Public. We can select the Legacy access identities or Origin access control settings.

With selection of the Legacy access identities will be creating an identity (consider this is a user that has access to that particular bucket) This is like a virtual user with the access bucket. Then click on create new OAI

A new identity will be created which has access to this bucket.

Then click in Yes, update the bucket policy.

So with this bucket policy it will create a new rule that this OAI should have an access to the bucket.

We can keep the rest of things as default.

So important part is below:

Edge locations : so let's say our user is expected to access the website all over the world then we can use all edge locations. For the second option let's say we have an e-commerce website and customer based out in north america and europe region. Then I will choose the second option. Though I’m in the Us-east-1 region.

So the other part is the SSL certificate as we did not create any custom domain so we don't have that.

The next is Default root object: if the content in the bucket has multiple subfolders and subdirectories there is an option in which we can specify the root object. So our website used as a home page so we have added an index.html.

So post this we can click on Create distribution.

We got the below error message.

Will go to the setting “Do not enable it now”.

Then click on Create distribution.

Its in the deployment state.

We can see the Distribution domain name. This is endpoint URL which has pointed to the S3 bucket.

Meanwhile if we can see in the Permission tab the bucket which we created we find below policy:

Awesome !! with that endpoint we can access the URL and the website has been accessible. This is just a simple index.html page.

We can see below the status:

Again let's try to access with the S3 bucket endpoint:

Still users are not accessible. As we disabled the public access for this bucket.

We can check the Metrics as well for our CloudFront distributions;

Important Tip : Post implementation kindly delete the distributions and S3 bucket to avoid the charges. 

First we have to disable the distribution and then after some time it will allow us to delete the distribution , So I have deleted the distributions along with the S3 buckets to avoid the charges. 

Happy Learning!!