Serving images from S3 using Cloudfront

Question

I have an S3 bucket where images are uploaded to. All of my static content is served via a Cloudfront distribution however, or at least it should be.

When I look at my page source, it indicates that all static content, except for the images in my S3 bucket, is served from Cloudfront. The images in S3 is still served from S3.

I have played around with my settings, but nothing seems to be fixing this issue.

Currently in my Cloudfront distribution I have the following settings:

1. Origin Pointing to my web url (foo.herokuapp.com)

2. Origin Pointing to my S3 Bucket:

   -Origin Domain name pointed to my S3 Bucket

   • Origin Path pointed to /uploads (This is the base directory in my S3 Bucket)
   • Restrict Bucket Access set to Yes
   • Tried setting Origin Access Identity to Create new and Setting Update Bucket policy to yes. I checked my Bucket Policy and it has created a Cloudfront Entry in there.

Any idea on what might cause this setup not to retrieve my S3 content via Cloudfront?

Answer 1

When I look at my page source

Nothing in the S3 or Cloudfront settings is going to rewrite your pages and change the links there.

Your code, your web framework, whatever is actually generating your pages needs to be configured to use Cloudfront instead of S3 when building the pages.