Skip to main content

Contenet Delivery with AWS CloudFront and S3 Buckets

·5 mins

CDN resource management #

Epic: Cloud Services Status Update: In progress

In modern web applications, efficient content delivery is essential for providing a seamless user experience. Content Delivery Networks (CDN) play a vital role in this by distributing content across multiple geographic locations, reducing latency and improving load times. In this guide we are going to explores how to implement CDN resource management using AWS services, specifically Amazon S3 for storage and CloudFront for content delivery.

By combining these AWS services, we can create a robust and scalable solution for storing and delivering content to users worldwide. This setup is particularly useful for our application when we need to serve static assets like images of items and files that are not change so often.

Let’s take a look at the AWS services we are going to use, and their roles.

AWS S3 Bucket #

Amazon Simple Storage Service (S3) is an object storage service offering industry-leading scalability, data availability, security, and performance. It allows you to store and retrieve any amount of data from anywhere on the web.

S3 provides features like versioning, encryption, access control, and lifecycle management, making it ideal for a wide range of use cases including backup and restore, application hosting, media storage, and data lakes.

AWS CloudFront #

AWS 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. It caches content at edge locations worldwide, reducing the load on origin servers and improving performance for end users.

CloudFront integrates seamlessly with other AWS services like S3, making it easy to distribute content stored in S3 buckets to users around the world with minimal latency. Which is exactly what we are going to do.


Create a S3 Bucket #

  • Go to the Amazon S3 console.
  • Create a new bucket or use an existing one.
  • Upload the content you want to distribute (e.g., images, videos, or static files).
When creating a bucket for CDN purposes, consider the region closest to your primary user base to minimize latency before CloudFront distribution.

Create a CloudFront Distribution #

  • Go to the CloudFront console.
  • Click Create Distribution and choose the Web option.
  • Configure the distribution:
    • Origin Domain Name: Select your S3 bucket.
    • Origin Access (optional):
      • For private buckets, enable Origin Access Control (OAC) so CloudFront can fetch files without making the bucket public.
    • Default Cache Behavior Settings:
      • Viewer Protocol Policy: Redirect HTTP to HTTPS (recommended for security).
      • Cache and Compress Objects: Enable caching and compression for performance.
    • Price Class: Choose based on where your users are located (e.g., “Use Only North America and Europe” for lower cost).
  • Click Create Distribution.

Update Bucket Permissions #

We are going to use Origin Access Control(OAC) to access S3 Bucket. By doing that we can fetch files without making our bucket public. Go to CloudFront Distribution page in AWS, select Origin Access in Security section. Create new Origin Control Access, select S3 as Origin Type. Go to Distribution page again and navigate to Origins tab. Select the bucket and click Edit. In the Editing page, go to Origin Access section and choose the origin access control settings(recommended). As OAC select the one we just created. And copy the policy from the UI. Go to S3 bucket permissions, update the bucket policy with the copied policy and save it.

Create a custom domain (Optional) #

If you want to use a custom domain (e.g., cdn.example.com):

  • Add the domain to the Alternate Domain Names (CNAMEs) in the distribution settings.
  • Validate the domain by adding a CNAME record to your DNS.
  • Associate an SSL/TLS certificate using AWS Certificate Manager (ACM).

Here is a more detailed guide if you like;

Test the Setup #

Access your content through the CloudFront URL provided in the distribution settings.

Example: https://<distribution-id>.cloudfront.net/file.jpg

Origin Path #

The Origin Path in AWS CloudFront is an optional setting that specifies a subdirectory (folder) within your origin from which CloudFront should fetch content. This allows you to serve content from a specific folder or subfolder within your origin, such as an Amazon S3 bucket or an HTTP server, without needing to include the folder path in the request URLs.

  1. When Specified: If you configure an Origin Path, CloudFront automatically appends this path to the origin domain name when fetching content.

Example:

  • Origin Domain: mybucket.s3.amazonaws.com
  • Origin Path: /static-content
  • CloudFront fetches content from: mybucket.s3.amazonaws.com/static-content
  1. When Not Specified: If no Origin Path is set, CloudFront fetches content directly from the root of the origin.

Benefits of Using an Origin Path #

Organize Content:

Serve specific sections of your bucket or server without exposing the entire directory structure.

Simplify URL Structure:

No need to include the folder path in your CloudFront distribution URLs.

Example:

CloudFront URL: https://d123456abcdef.cloudfront.net/file.jpg

Actual location: https://mybucket.s3.amazonaws.com/static-content/file.jpg

Separate Content for Different Distributions:

You can create multiple CloudFront distributions pointing to different subdirectories of the same origin.


Use Case Example #

S3 Bucket

Bucket Structure:

mybucket/
├── images/
├── videos/
└── static-content/

Origin Configuration:

Origin Domain Name: mybucket.s3.amazonaws.com

Origin Path: /static-content

Result:

Request to https://d123456abcdef.cloudfront.net/file.jpg fetches https://mybucket.s3.amazonaws.com/static-content/file.jpg.

Setting Up the Origin Path #

In the AWS Management Console:

  • Navigate to CloudFront > Distributions > Select or Create a Distribution.
  • In the Origin Settings:
  • Enter your origin domain (e.g., mybucket.s3.amazonaws.com).
  • Specify the Origin Path (e.g., /static-content).

AWS Toolkit Plugin #

AWS Toolkit is a very useful plugin for IntelliJ. I really recommend using it.

AWS Toolkit - IntelliJ IDEs Plugin | Marketplace

Thanks for reading this far :)
If you want to give feedback about the article you can reach me from the contact details on the profile