How to set up an AWS CloudFront distribution to speed up content delivery?

Reading Time: 11 minutes

Do you know which of the world’s largest live events and leading online video platforms (OVPs) use which services for their industry-leading security, performance, reliability, and full AWS stack integration? The answer is AWS CloudFront. Yes, you read it right! AWS CloudFront is the  Content Delivery Network that has been highly optimized for Media & Entertainment industry workloads. AWS CloudFront is the major player in delivering massive video-on-demand catalogs or live-stream content to millions,  no matter where the audience is! In this blog, we will discuss everything about this amazing service followed by hands-on to create a distribution network via AWS CloudFront to cache the images stored in the Amazon S3 bucket and thus speed up the content delivery for your web application.

In this blog, we will cover:

  • Companies using AWS CloudFront
  • What is a Content Delivery Network (CDN)?
  • How CDN works?
  • What is the AWS CloudFront?
  • AWS CloudFront and AWS S3 match made in heaven
  • How does the AWS CloudFront work?
  • Use cases of the AWS CloudFront
  • Benefits of the AWS CloudFront
  • Uses of the AWS CloudFront
  • What is the solution available for processing video-on-demand content on AWS?
  • Pricing Estimation
  • Hands-On
  • Conclusion

Companies using AWS CloudFront

What is common between all these companies which are listed in the image below? The answer is – These all are media and entertainment companies using AWS Cloudfront service to optimize the workload and provide the fastest services!

Companies using AWS CloudFront
  • Amazon Prime Video – Amazon prime video provides video-on-demand, streaming, and rental services. Once they got the rights to NFL Thursday night football games. Integrating with AWS services they reached 18 million customers across 200 countries. The platform uses AWS services, including CloudFront combined with other 3rd party CDNs to provide low latency during live streaming across the Globe.
  • Sky News – During the Royal Wedding in the UK, Sky News used the Amazon CloudFront content delivery network to unify the content for faster distribution to viewers.
  • JioSaavn – JioSaavn relies on Amazon CloudFront to securely deliver 15 petabytes of music and video to global customers every day. It is not only the largest audio and video service provider in India, but they have digital Bollywood listeners and subscribers all over the world.
  • M6 – M6 French media company on AWS services – “After testing a selection of CDNs for our video-on-demand needs, we selected Amazon CloudFront for the superior performances in terms of the video start time, throughput, and the lower rebuffering rate. We love how easy it is to set up distribution, having full control over the features, as well as the seamless integration with other AWS services such as Amazon S3. On top of that, we like the security features in CloudFront such as the signed URL we use to secure the distribution of our content.”
  • HULU – Hulu is an American subscription video-on-demand service owned by Hulu LLC, a joint venture with The Walt Disney Company, 21st Century Fox, Comcast, and Time Warner. Hulu provides a great viewing experience on Live tv with a combination of AWS infrastructure.
  • PBS – It is a private, non-profit corporation, that provides content through television, the Web, and mobile applications. Their internet and mobile presence improved once they integrated with AWS and utilized the content delivery service Amazon CloudFront and increased its existing usage of Amazon S3.
  • Discovery Communications – Discovery Channel, TLC, Animal Planet, Science and Investigation Discovery, as well as US joint venture networks OWN: Oprah Winfrey Network, The Hub, and 3net, the first 24-hour 3D network. Discovery also is a leading provider of educational products and services to schools and owns and operates a diversified portfolio of digital media services, including Revision3. Discovery uses Amazon CloudFront for static, dynamic, and API delivery. 

What is the Content Delivery Network (CDN)?

CDN stands for content delivery network. A CDN  is a system of distributed servers (i.e Network) that deliver websites and different varieties of internet content to user-supported geographic locations of that user, the origin of the online page, conjointly a content delivery server.

How CDN works?

The primary task of CDN is to create caches. Then this process leads to faster performance and low costs at scale. A cache acts like a high-speed data storage layer that stores a subset of data. The data present in a cache is generally stored in fast-access hardware such as RAM.

For instance, after the successful configuration of Cloudfront for content, here’s what happens when a user tries to access your content – 

  • Users visit your website or application to request files like multimedia or HTML files.
  • DNS routes the request to CloudFront POP which (edge location) best serves the request.
  • In the POP CloudFront checks its cache for the requested file If the files are in the cache, CloudFront returns them to the user. 

If the files are not in the cache, it does the following: 

  • CloudFront compares the request with the specifications in your distribution and forwards the request for the files to your origin server for the corresponding file type — for example, to your Amazon S3 bucket for image files and your HTTP server for HTML files.
  • The origin servers send the files back to the edge location.
  • As soon as the first byte arrives from the origin, CloudFront begins to forward the files to the user. CloudFront also adds the files to the cache in the edge location for the next time someone requests those files.

What is the AWS CloudFront?

Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, and high transfer speeds, all within a developer-friendly environment.

CloudFront works seamlessly with Amazon S3, Elastic Load Balancing, Amazon EC2, or any custom HTTP origin. With CloudFront using the secure and programmable edge computing feature AWS Lambda@Edge, you can also customize your content delivery.

How CDN works?

CloudFront offers advanced security such as HTTPS support, and field-level encryption, and, is seamlessly integrated with AWS Shield, AWS Web Application Firewall, and Route 53 to protect against multiple types of attacks including network and application layer DDoS attacks. These services co-reside at edge networking locations – globally scaled and connected via the AWS network backbone – providing a more secure, performant, and available experience for users.

AWS CloudFront and AWS S3 match made in heaven

Amazon CloudFront is a content delivery network(CDN) that caches and proxies web data at edge locations as close to users as possible.

Amazon CloudFront has two types of distributions :

  • RMTP – Used for media streaming
  • Web Distribution – Used for websites.                       

Whereas, Amazon S3 is designed for large capacity, low-cost file storage in one specific geographical region. The storage and bandwidth costs are quite low.

AWS CloudFront and AWS S3

Although when combined they provide a fleet of advantages such as – 

  • Storing and Delivering your Content with Speed and Scale
  • Secure contents like geo-restrictions signed URLs and signed cookies
  • Measures and compares site and content load times from different geographic locations.
AWS CloudFront and AWS S3

How does the AWS CloudFront work?

Step 1: The client accesses a website and requests to download a file 

AWS CloudFront and AWS S3

Step 2: DNS routes the client request to the nearest edge location through CloudFront to serve the user request.

AWS CloudFront and AWS S3

Step 3: At the edge location, CloudFront looks for its requested cache file. Once the file is found, CloudFront sends the file to the user.

AWS CloudFront and AWS S3

Step 4: If the file is not found then CloudFront compares the requirements with the specifications and shares it with the respective server.

AWS CloudFront and AWS S3

Step 5: The web server responds to the request by sending the files back to the CloudFront edge location.

AWS CloudFront and AWS S3

Step 6: As soon as CloudFront receives the file, it shares it with the client and adds the file to the edge location.

Use Cases of the AWS CloudFront

Live Streaming 

CloudFront is optimized for live streaming with an architecture built for high request volumes. It can handle millions of users calling for the same manifest or video segments while maintaining a low latency stream. It can be configured to deliver streams with a sub-three second camera device screen latency and sub-one second synchronization. It is fully integrated with an optimized low-latency origin server built for live streaming, AWS Elemental MediaStore, moreover AWS Elemental MediaLive for video encoding, and AWS Elemental MediaConnect for video transcoding. 

Use Cases of the AWS CloudFront

On-Demand Video 

CloudFront allows you to deliver large, long-tail content catalogs to audiences all over the globe. CloudFront is a fully integrated, easy-to-use, CDN for both simplified and sophisticated video production workflows. It works in conjunction with AWS Media Services like AWS Elemental MediaConvert and AWS Elemental MediaPackage. 

Use Cases of the AWS CloudFront

Benefits of the AWS CloudFront  

 

Uses of the AWS CloudFront

Uses of AWS CloudFront  

What solutions are available for processing video-on-demand content on AWS?  

The Video on Demand on AWS solution, and the Video on Demand on AWS Foundation solution both provision the AWS services required to build scalable, distributed VOD processing and delivery workflows.

What solutions are available for processing video-on-demand content on AWS?  

Pricing Estimation 

Pricing Estimation  of Amazon CloudFront

Let’s do hands-on

In this hands-on, we will see how we can deliver content faster resulting in a decrease in the end-user latency of your web application using Amazon CloudFront. We will be configuring an Amazon S3 bucket as the origin for CloudFront distribution. Amazon CloudFront thus helps in speeding up the content delivery by taking an advantage of its global network of data centers, also known as edge locations, to reduce the delivery time by caching your content close to your end users. CloudFront fetches your content from an origin, such as an Amazon S3 bucket and caches it in the nearest edge location for quicker delivery.

To implement this, we will do the following:

  • Login to your AWS account and navigate to Amazon S3 to create a new bucket.
  • Upload an object in your newly created S3 bucket.
  • Navigate to the Actions selection for your object and make your object public.
  • Access the object via the Object URL.
  • Open the Amazon CloudFront dashboard and create a new distribution.
  • Select your newly created S3 bucket as an origin for the CloudFront distribution.
  • Note down the domain name of your created CloudFront distribution.
  • Create a new HTML file on your local machine, and add the domain name of your CloudFront distribution and the object name you added in your S3 bucket.
  • Access the web page on a browser to ensure that the content has been delivered and check if the object that you added in your S3 bucket loaded successfully.

Log in to AWS and navigate to the Amazon S3 dashboard to create a new bucket. Click on ‘Create bucket’.

How to set up an AWS CloudFront distribution to speed up content delivery?

Enter a name for your bucket and select a region based on your preference.

How to set up an AWS CloudFront distribution to speed up content delivery?

Under the ‘Block Public Access settings for bucket’ section, uncheck block all public access and check that you acknowledge it because if need to make the objects public for Amazon Cloudfront to fetch it.

How to set up an AWS CloudFront distribution to speed up content delivery?

Scroll down and add tags (if any) and if needed for your bucket. In this blog, we will not be adding any tags. Once done, click on ‘Create bucket’.

How to set up an AWS CloudFront distribution to speed up content delivery?

After the successful creation of your bucket, you will view your newly created bucket in the list under the buckets pane on S3 dashboard. Click on your newly created bucket to enter the dashboard of your bucket.

Click on ‘Upload’ to upload an image into your newly created S3 bucket. We will be adding the below image into our S3 bucket.

How to set up an AWS CloudFront distribution to speed up content delivery?

Click on ‘Add files’ to select the image you want to upload.

Once done uploading, scroll down and click on ‘Upload’.

How to set up an AWS CloudFront distribution to speed up content delivery?

One successful upload of the image, you will be able to see the newly uploaded image as an object in your bucket as shown below.

How to set up an AWS CloudFront distribution to speed up content delivery?

Select the checkbox on the left of your newly added object and click on ‘Actions’. Scroll down under the actions and select ‘Make public’.

How to set up an AWS CloudFront distribution to speed up content delivery?

On the displayed dashboard as shown below, click on ‘Make public’ to make your object public.

How to set up an AWS CloudFront distribution to speed up content delivery?

On success, you will be displayed a successful message as shown in the image below. Once checked, click on ‘Exit’.

Now, click on your newly added image and enter the dashboard of your image. Under the ‘Object URL’, you will find a URL through which you can access your image on your browser.

How to set up an AWS CloudFront distribution to speed up content delivery?

Click on that URL and you will be navigated to a new tab that will display your newly added image that you uploaded in your S3 bucket. 

Once done, navigate to the Amazon CloudFront dashboard and click on ‘Create Distribution’.

How to set up an AWS CloudFront distribution to speed up content delivery?

For creating a distribution, two steps are to be followed. In the first step – Select a delivery method for your content, click on ‘Get Started’.

How to set up an AWS CloudFront distribution to speed up content delivery?

In step 2 – under the ‘Origin Settings’ section, click on the text box besides ‘Origin Domain Name’ and from the dropdown, select your newly created S3 bucket as the origin.

Now, scroll down to the bottom and click on ‘Create Distribution’.

How to set up an AWS CloudFront distribution to speed up content delivery?

A new entry will be created under the ‘Distributions’ section on the Amazon CloudFront dashboard. You will see the status as ‘In Progress’ initially. It takes a few minutes to configure the distribution.

How to set up an AWS CloudFront distribution to speed up content delivery?

After a few minutes, hit refresh and you will see the status for your created distribution change to ‘Deployed’. Make a note of the ‘Domain Name’ as you will need it while configuring your HTML page.

Use the HTML template shown below. Make sure to replace the ‘domain_name’ (noted down above after the CloudFront distribution creation) and ‘object_name’ (with the name of your image uploaded in your S3 bucket which is selected as an origin). Create a new HTML file with the code below.

How to set up an AWS CloudFront distribution to speed up content delivery?

The below template is what we have used for our blog. You can thus alter the template the way you like based on your preferences.

Open your web page in a browser to ensure that you can see your content. You will see the image you added in your S3 bucket which is added as an origin to the CloudFront distribution. Thus, you can view your image using the CloudFront distribution domain name in your code.

Conclusion

In this blog, you have seen how the Amazon CloudFront distribution network helps in speeding up the content delivery for your web application by storing the image as a cache in an edge location closer to the user who is accessing your web application. This helps in reducing the response time for your web application and load content at a faster pace. We will discuss more of AWS Cloudfront and its other configurations in our upcoming blog. Stay tuned to keep getting all updates about our upcoming new blogs on AWS and relevant technologies. 

Meanwhile …

Keep Exploring -> Keep Learning -> Keep Mastering

This blog is part of our effort towards building a knowledgeable and kick-ass tech community. At Workfall, we strive to provide the best tech and pay opportunities to AWS-certified talents. If you’re looking to work with global clients, build kick-ass products while making big bucks doing so, give it a shot at workfall.com/partner today.

Back To Top