Cloudflare

Setting up Cloudflare with Amazon S3 is a great way to serve your S3-hosted files (like images, videos, static assets) with Cloudflare’s CDN and security benefits. Here’s a step-by-step guide:


Step 1: Prepare your S3 Bucket

  1. Create S3 Bucket
    • Go to AWS Console → S3 → Create Bucket.
    • Bucket name usually matches your domain or subdomain, e.g., cdn.example.com.
    • Choose the AWS Region closest to your users.
    • Uncheck “Block all public access” if you want the content to be publicly accessible.
  2. Make Bucket Public (if required)
    • For static website hosting or public file delivery, you must make your bucket public.
    • Set a Bucket Policy allowing public read access: { "Version":"2012-10-17", "Statement":[{ "Sid":"PublicReadGetObject", "Effect":"Allow", "Principal": "*", "Action":["s3:GetObject"], "Resource":["arn:aws:s3:::your-bucket-name/*"] }] }
    • Replace your-bucket-name with your actual bucket name.
  3. Enable Static Website Hosting (Optional)
    • If you want to serve static site pages (HTML, index.html), enable “Static website hosting” in bucket properties.
    • Note the Endpoint URL, e.g., http://your-bucket-name.s3-website-region.amazonaws.com

Step 2: Point a Domain or Subdomain to S3 Bucket via Cloudflare

  1. Add your domain to Cloudflare
    • If not done, add your domain to Cloudflare and change your domain’s nameservers to Cloudflare’s.
  2. Create a DNS Record in Cloudflare
    • In Cloudflare Dashboard → DNS tab:
    • Add a CNAME record:
      • Name: e.g., cdn (if you want cdn.example.com)
      • Target: your S3 bucket’s website endpoint (for static website hosting) like your-bucket-name.s3-website-us-east-1.amazonaws.com
      • Or, if you’re not using static website hosting, use the S3 REST endpoint like your-bucket-name.s3.amazonaws.com (but note S3 REST endpoint does not support HTTP website hosting; it serves files directly)
    • Enable the Proxy status (orange cloud) to route traffic through Cloudflare.

Step 3: Configure Cloudflare Settings

  1. SSL/TLS Settings
    • Use Flexible or Full SSL mode in Cloudflare depending on your backend.
    • If you want HTTPS to S3, consider Full SSL with a valid certificate on your origin or use Cloudflare Origin CA certificates.
  2. Page Rules (optional)
    • To improve caching or security, create Page Rules for your CDN subdomain.
    • Example: Cache everything, edge cache TTL, etc.
  3. Caching
    • Cloudflare automatically caches static assets.
    • To control cache headers, you can set Cache-Control headers on your S3 objects via metadata.

Step 4: Test your Setup

  • Visit https://cdn.example.com/yourfile.jpg
  • It should load the S3 file, served via Cloudflare.
  • Use developer tools (Network tab) to check response headers for cf-cache-status to confirm Cloudflare cache.

Summary

StepDetails
Create S3 bucketEnable public access or static website hosting
Add domain to CloudflarePoint subdomain to S3 bucket endpoint using CNAME
Enable Cloudflare ProxyEnable orange cloud proxy for CDN and security
Configure SSLUse Flexible or Full SSL in Cloudflare
Test and verifyAccess files and check caching headers

Leave a Reply