CDN Configuration

Content Delivery Networks (CDNs) can be used in front of your S3 bucket to improve asset delivery performance and reduce costs. This guide covers common CDN configurations for serving your Blossom-managed assets.

Benefits of Using a CDN

  • Faster asset delivery through edge caching
  • Reduced S3 bandwidth costs
  • Global content distribution
  • SSL/TLS termination
  • DDoS protection

Amazon CloudFront

If you’re using Amazon S3, CloudFront is the natural choice:

  1. Create a CloudFront distribution
  2. Set your S3 bucket as the origin
  3. Configure the following settings: 
    Origin Domain: your-bucket.s3.amazonaws.com
Origin Path: /assets/production  # If using folder prefix
Origin Access: Origin Access Control (recommended)
Viewer Protocol Policy: Redirect HTTP to HTTPS

DigitalOcean CDN

For DigitalOcean Spaces users:

  1. Enable CDN from the Spaces dashboard
  2. Configure custom domain (optional)
  3. Set cache control headers: 
    Cache-Control: public, max-age=31536000

Cloudflare

For any S3-compatible storage:

  1. Add your domain to Cloudflare
  2. Create a DNS CNAME record pointing to your storage endpoint
  3. Enable Cloudflare proxy (orange cloud)
  4. Configure cache rules: 
    Cache Level: Standard
Edge Cache TTL: 1 month
Browser Cache TTL: 1 month

S3 Bucket Settings

  • Note, that you assets do not need to be upload with ACL public-read. AWS is recommending instead to use Bucket Policies.
  • You do need to make sure that your bucket is does not have Block Public Access enabled. This was the new AWS default. Otherwise, you’ll see an The bucket does not allow ACLs (Aws::S3::Errors::AccessControlListNotSupported) error during the upload process.

Public Access Settings

When serving assets through a CDN, you’ll need to configure your S3 bucket’s access settings properly:

  1. Block Public Access Settings
    • Navigate to your bucket’s “Permissions” tab
    • Disable “Block all public access”
    • Note: Individual permissions can still be controlled via bucket policy
  2. Bucket Policy Instead of using ACLs (Access Control Lists), AWS recommends using bucket policies. Here’s an example policy for CloudFront: 
     {
     "Version": "2012-10-17",
     "Statement": [
         {
             "Sid": "PublicReadForGetBucketObjects",
             "Effect": "Allow",
             "Principal": "*",
             "Action": "s3:GetObject",
             "Resource": "arn:aws:s3:::your-bucket/*"
         }
     ]
 }

CORS Configuration

Cross-Origin Resource Sharing (CORS) configuration is necessary when your assets need to be accessed from different domains.

S3 Direct Access

If serving assets directly from S3, add this CORS configuration to your bucket:

{
  "CORSRules": [
    {
      "AllowedOrigins": ["https://your-domain.com"],
      "AllowedMethods": ["GET"],
      "AllowedHeaders": ["*"],
      "MaxAgeSeconds": 3600
    }
  ]
}

CloudFront Configuration

When using CloudFront, configure CORS at the distribution level:

  1. Response Headers Policy
    • Create a new response headers policy
    • Add the following CORS headers: 
      Access-Control-Allow-Origin: https://your-domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3600
  2. Cache Behavior Settings
    • Select your cache behavior
    • Under “Response headers policy”, choose your CORS policy
    • Enable “Cache based on selected request headers”

Testing CORS Configuration

Verify your CORS setup using curl:

curl -I -H "Origin: https://your-domain.com" https://your-cdn-domain.com/path/to/asset

The response should include the appropriate CORS headers.

In this section: