How to Use S3 with CloudFront for Fast Content Delivery

To use S3 with CloudFront, create an S3 bucket to store your files and then set up a CloudFront distribution with the S3 bucket as the origin. CloudFront caches your content globally, speeding up delivery to users.

Syntax

Here is the basic setup pattern for using S3 with CloudFront:

• S3 Bucket: Stores your static files like images, videos, or web pages.
• CloudFront Distribution: A CDN that points to your S3 bucket as the origin.
• Origin Access Identity (OAI): Optional security feature to restrict direct S3 access.
• Cache Behavior: Defines how CloudFront caches and serves your content.

bash

aws s3api create-bucket --bucket your-bucket-name --region us-east-1

aws cloudfront create-distribution --origin-domain-name your-bucket-name.s3.amazonaws.com

Example

This example shows how to create an S3 bucket, upload a file, and create a CloudFront distribution pointing to that bucket.

bash

aws s3api create-bucket --bucket example-bucket-12345 --region us-east-1

aws s3 cp index.html s3://example-bucket-12345/

aws cloudfront create-distribution --origin-domain-name example-bucket-12345.s3.amazonaws.com --default-root-object index.html

Output

{
  "Distribution": {
    "Id": "E123ABC456DEF",
    "Status": "InProgress",
    "DomainName": "d1234abcd.cloudfront.net"
  }
}

Common Pitfalls

Common mistakes when using S3 with CloudFront include:

• Not setting the correct permissions on the S3 bucket, causing CloudFront to get access denied errors.
• Forgetting to configure the Origin Access Identity (OAI) to restrict S3 bucket access only to CloudFront.
• Not setting the Default Root Object in CloudFront, which can cause 403 errors when accessing the root URL.
• Using the wrong S3 bucket region or domain name in the CloudFront origin settings.

bash

Wrong: Allow public read on S3 bucket (less secure)

aws s3api put-bucket-policy --bucket example-bucket-12345 --policy '{"Version":"2012-10-17","Statement":[{"Effect":"Allow","Principal":"*","Action":"s3:GetObject","Resource":"arn:aws:s3:::example-bucket-12345/*"}]}'

Right: Use Origin Access Identity (OAI) to restrict access

# Create OAI
aws cloudfront create-cloud-front-origin-access-identity --cloud-front-origin-access-identity-config CallerReference=$(date +%s),Comment="OAI for example-bucket"

# Attach OAI to CloudFront distribution origin
# Update S3 bucket policy to allow OAI only

Quick Reference

• Create an S3 bucket and upload your content.
• Create a CloudFront distribution with the S3 bucket as origin.
• Use Origin Access Identity (OAI) to secure your bucket.
• Set the Default Root Object in CloudFront for easy URL access.
• Invalidate cache in CloudFront to update content quickly.

Key Takeaways

Create an S3 bucket to store your files and a CloudFront distribution to serve them globally.

Use Origin Access Identity (OAI) to restrict S3 bucket access only to CloudFront for security.

Set the Default Root Object in CloudFront to avoid 403 errors on root URL access.

Ensure correct bucket permissions and origin domain names to prevent access issues.

Invalidate CloudFront cache to refresh content after updates in S3.