How can I get Cloudfront to access an image stored in a different S3 bucket

Question

I have a S3 bucket which is hosting a static website with a cloudfront distribution in front.

On the website there are a load of images, but because they are so big, I have a Lamdba function which will resize them.  So when you upload them to for example www.example.com/pages/Jan/image.jpeg it will also create a resized image stored in the bucket example.com-resized, and it's these images that I need to reference in the HTML of my website, However they just show as a broken image.

My s3 buckets are not public so you get access denied if you try to access them via the URL.

Does anyone know how to do this if it's possible?
I can't seem to find any answers.
Thanks

Answer

Create another origin in cloudfront to point to your other bucket..

EG have a different path /resized to point to your other bucket

OR

update the s3 event only to run the lambda function on a particular Prefix and then keep the resized images in the same bucket in a different prefix/path.

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DownloadDistS3AndCustomOrigins.html

How can I get Cloudfront to access an image stored in a different S3 bucket

Relevant content