CloudFront Multi Origin + Multi S3 buckets

Question

bucket_01 => web site hosting

bucket_02 => public but no web site hosting

I put index.html to bucket_01

I created one distribution of CloudFront and two origins.

one origin is bucket_01. the other one is bucket_02.

img/test01.png is on bucket_01 and cached from CloudFront but https://bucket_02.amazonaws.com/images/test02.png is not cached from cloud front.

How https://bucket_02.amazonaws.com/images/test02.png can be cached from CloudFront?

 <div>
    <p>origin 1</p>
    <img src="img/test01.png">
    <p>origin 2</p>
    <img src="https://bucket_02.amazonaws.com/images/test02.png"
  </div>

Answer 1

Caching in CloudFront is managed under Behavior functionality. If you have 2 origins and want to mange separate caching then you need 2 separate paths. Each path with different (or no) caching.

In your case img/* belongs to origin 1 (bucket_01). And images/* belongs to bucket_02 (origin 2).

As a solution; you can either put everything under Default behaviour or create 2 behaviours based on 2 paths (img & images).

Open the Behaviour functionality and add cache values as shown below.