How can we speed up content delivery using Amazon CloudFront?

With the boom in resource availability via multiple digital platforms, there are tons of applications and websites available to perform the same task. A major concern then becomes faster response time and how to direct clients to your website. Having multiple competitors in the market to perform the same task, the one that attracts the audience is the one that provides a fast, responsive, and secure usage of the website. This is where Amazon Web Services — AWS jumps in with a service called Amazon CloudFront. This blog focuses on how you can utilize this AWS service with some hands-on experience to get started.

What is Amazon CloudFront?

Building a distribution network for your objects is a must when it comes to delivering content at a faster pace to multiple users at different locations. Amazon Web Services — AWS provides us with an amazing service i.e. Amazon CloudFront also known as a Content Delivery Network. It basically retrieves objects from the Amazon S3 bucket and distributes them to multiple datacenter locations. Amazon CloudFront makes use of a network of data centers called edge locations to deliver the objects at a faster pace. When a user requests for data, the nearest edge location routes the data to the user resulting in the lowest latency, faster access, and many more flexibilities. CloudFront caches copies of the content close to the end-users which makes it possible to deliver the content to the user quickly as and when the user places a request for the same. It is designed in such a way that it can be easily integrated with other AWS Services and adding a cherry to the cake, you pay only for the content you deliver through the network. CloudFront gives you the flexibility to customize your content delivery using the secure and programmable edge computing feature AWS Lambda@Edge.

Hands-on:

In this hands-on, we will see how to configure Amazon CloudFront to speed up the content delivery via creating a distribution network to retrieve data from an Amazon S3 bucket and distribute the same to multiple edge locations to decrease the response time for loading contents on your web application and attract more audience.

To implement this, we will do the following:

• Sign in to your AWS account.
• Navigate to the Amazon S3 console to create a new bucket.
• Upload an object to your S3 bucket.
• Make the uploaded objects public.
• Navigate to the Amazon CloudFront console to create a new distribution network.
• Select an S3 bucket as the origin for the CloudFront distribution network.
• Use any text editor to create a new HTML file with some code in it and add the domain name of your CloudFront distribution network.
• Open the file in a browser to test the implementation.

Steps To Follow:

Sign in to your AWS console and search for S3 in the search bar.

You will be navigated to the S3 dashboard. Click on Create bucket to create a new bucket wherein you will store your object.

Give a name to your bucket and select your preferred AWS region.

Uncheck the Block Public Access setting since we need to make the objects public for Amazon CloudFront to fetch them.

Enter a tag for your bucket as shown below if you wish to specify a tag. Once done, click on the Create bucket.

On successful creation, you will see the newly created bucket in the list. Now click on the newly created bucket to enter its dashboard.

Select Upload to upload a new object for Amazon CloudFront to cache it and deliver it quickly.

On the Upload dashboard, click on Add files and select the object you wish to upload.

Once done, scroll down to the bottom of the dashboard and click on Upload.

On success, you will be able to see the object in the bucket.

Now select the checkout for the newly uploaded object and click on Actions. Scroll down to the last action and select Make Public.

On the same actions dashboard, click on Make Public to confirm your action.

Now navigate back to your buckets dashboard and select the image. Under the Object URL, you will find a link that can be accessed to access your newly uploaded object. You can click on it to check it out.

You will be navigated to a new tab that will display your object.

Now navigate back to the AWS console and search for CloudFront in the search bar. Select the service from the dropdown to navigate to the CloudFront’s dashboard.

On the dashboard, click on Create Distribution to build a new distribution network.

In Step 1: Select your delivery method, click on Get Started to create a new distribution network.

In Step 2: Create distribution, for the Origin Domain Name, select the Amazon S3 bucket you created above in which you uploaded a new object.

Scroll to the bottom of the form and click on ‘Create Distribution’.

A new distribution will be created and will be displayed under the Distributions dashboard on Amazon CloudFront. Before proceeding make sure that the status shows Deployed since the distribution takes a few minutes to be deployed. Once deployed, note down the domain name under the Domain Name column of your newly created distribution.

In case you uploaded an image file as a new object in the bucket, you can use the below code for testing purposes. Make sure to change the domain name to the name you noted down from your distributions dashboard above and the object name to the name of the object you uploaded in your S3 bucket. Paste the below code in a text editor and make the required changes. Once done, save it with a .html extension.

<html>
<title>Title</title>
<h4>AWS CloudFront</h4>
<body>
<p>Hi user,</p>
<img src="http://domain_name/object_name" alt="cloudfront_image">
</body>
</html>

I have altered the above code based on my preferences to be displayed on the browser. Once done, open the .html file in your browser. You will see the image you uploaded in your S3 bucket. Since you added the bucket as an origin in your distribution network, you can view the image stored in your bucket. On the first request, CloudFront caches the object so the next time you load the same file, CloudFront delivers the content at a faster pace loading the object from the cache storage.

In case you added some other object (instead of an image file) in your S3 bucket, you can follow the same procedure to view the object quickly on your website.

To recap, in this blog we explored how easy it is to set up an Amazon CloudFront distribution network to speed up content delivery and reduce the response time for your websites.

TIP: Make sure to delete everything you created if you are just practicing.

Keep Learning :)

See you next time!