How to Use CloudFront with S3 for Fast Content Delivery

To use CloudFront with S3, create a CloudFront distribution and set your S3 bucket as the origin. This setup caches your S3 content at edge locations worldwide, speeding up delivery to users.

Syntax

When creating a CloudFront distribution for an S3 bucket, you specify the S3 bucket as the origin. Key parts include:

• Origin Domain Name: The S3 bucket URL (e.g., mybucket.s3.amazonaws.com).
• Viewer Protocol Policy: Controls HTTP/HTTPS access.
• Cache Behavior: Defines how CloudFront caches and serves content.
• Distribution Settings: Includes price class, logging, and SSL options.

bash

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

Example

This example shows how to create a CloudFront distribution using AWS CLI with an S3 bucket as the origin. It sets the default root object to index.html and allows HTTPS only.

json

{
  "CallerReference": "unique-string-123",
  "Origins": {
    "Quantity": 1,
    "Items": [
      {
        "Id": "S3-mybucket",
        "DomainName": "mybucket.s3.amazonaws.com",
        "S3OriginConfig": {
          "OriginAccessIdentity": ""
        }
      }
    ]
  },
  "DefaultCacheBehavior": {
    "TargetOriginId": "S3-mybucket",
    "ViewerProtocolPolicy": "redirect-to-https",
    "TrustedSigners": {
      "Enabled": false,
      "Quantity": 0
    },
    "ForwardedValues": {
      "QueryString": false,
      "Cookies": {"Forward": "none"}
    },
    "MinTTL": 0
  },
  "Comment": "CloudFront distribution for mybucket",
  "Enabled": true,
  "DefaultRootObject": "index.html"
}

Output

Creates a CloudFront distribution that caches content from the S3 bucket 'mybucket' and serves it over HTTPS with 'index.html' as the default page.

Common Pitfalls

Common mistakes when using CloudFront with S3 include:

• Not setting the correct bucket permissions, causing access denied errors.
• Using the S3 website endpoint instead of the bucket endpoint as the origin, which can cause caching issues.
• Forgetting to configure the Origin Access Identity to restrict direct S3 access.
• Not setting the Default Root Object, leading to 403 errors when accessing the root URL.

json

Wrong origin domain:
{
  "DomainName": "mybucket.s3-website-us-east-1.amazonaws.com"
}

Right origin domain:
{
  "DomainName": "mybucket.s3.amazonaws.com"
}

Quick Reference

• Use the S3 bucket domain name (not website endpoint) as CloudFront origin.
• Enable Origin Access Identity to keep your bucket private.
• Set Default Root Object to serve index pages.
• Use HTTPS viewer protocol policy for security.
• Invalidate cache when updating content to refresh CloudFront.

Key Takeaways

Set your S3 bucket as the CloudFront origin using the bucket domain name.

Enable Origin Access Identity to restrict direct S3 access and improve security.

Configure Default Root Object to avoid access errors on root URLs.

Use HTTPS-only viewer protocol policy for secure content delivery.

Remember to invalidate CloudFront cache after updating S3 content.