Add listing Add

How to Serve Static Files from Cloudflare R2 via CloudFront and a Custom Subdomain

Tech
5. Jul 2025
584 views
How to Serve Static Files from Cloudflare R2 via CloudFront and a Custom Subdomain

? How to Serve Static Files from Cloudflare R2 via CloudFront and a Custom Subdomain (cdn.yourdomain.com)

Hosting static assets like CSS, JavaScript, and images from a CDN improves your website speed and user experience. In this guide, we’ll show you how to upload your files to Cloudflare R2 (S3-compatible storage), and serve them through Amazon CloudFront using your own subdomain like cdn.callcenterjob.co.in.

✅ Why Use R2 + CloudFront?

  • Low-cost object storage with Cloudflare R2

  • Global CDN with AWS CloudFront

  • Use your own domain (cdn.example.com)

  • Improve SEO, loading speed, and performance scores

?️ Step 1: Upload Your Static Files to Cloudflare R2

Use rclone to upload files automatically:

Sample rclone sync command:

bash
 
rclone --config /path/to/rclone.conf sync /your/website/public_html/ cloud:your-bucket-name \ --exclude "oc-content/plugins/cache/files/**" \ --progress

Make sure your rclone.conf is configured like this:

ini
 
[cloud] type = s3 provider = AWS access_key_id = YOUR_KEY secret_access_key = YOUR_SECRET region = ap-south-1 endpoint = https://s3.ap-south-1.amazonaws.com

? Step 2: Create a CloudFront Distribution

  1. Go to AWS CloudFront console → Create Distribution

  2. For Origin Domain, use your bucket endpoint:

    pgsql
    bucket-name.s3.ap-south-1.amazonaws.com

  3. Set Viewer Protocol Policy: Redirect HTTP to HTTPS

  4. Enable compression for better speed

  5. Under Alternate Domain (CNAME):

     
    cdn.callcenterjob.co.in

  6. Choose or request an SSL certificate for your subdomain via ACM

? Step 3: Point Your Subdomain to CloudFront

In your DNS (Cloudflare or other provider), add a CNAME:

Type Name Target TTL
CNAME cdn dxxxxxxxxxxx.cloudfront.net Auto

  • Proxy status: DNS only (gray cloud)

  • CloudFront domain will look like: d123abc4.cloudfront.net

? Step 4: Make Your R2 Bucket Publicly Accessible

To allow the public (and CloudFront) to access your files, add this policy to your S3-compatible bucket:

json
 
{ "Version": "2012-10-17", "Statement": [ { "Sid": "AllowPublicReadForCloudFront", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::your-bucket-name/*" } ] }

Without this, users will get a 403 Forbidden error.

? Step 5: Automate Sync with Cron (Optional)

To keep your bucket updated, create a cron job:

bash
 
crontab -e

Add:

bash
 
0 * * * * /usr/bin/rclone --config /path/to/rclone.conf sync /your/website/public_html/ cloud:your-bucket-name --exclude "oc-content/plugins/cache/files/**" --quiet

✅ Test It

Try accessing a static file:

arduino
 
https://cdn.callcenterjob.co.in/oc-content/themes/careerjob/css/style.css

If it loads without 403 error, you're all set!

? Bonus: Restrict Access via CloudFront Only (Optional)

You can restrict your R2 bucket so only CloudFront can access it, by using Origin Access Control (OAC). This avoids exposing your R2 endpoint directly.

Comments

2110login
2110login on 14. Jul 2025
Part time

Add new comment

You must be logged in to add new comment. Log in