CloudFront disable caching for index.html and /

Today, I have an interesting experience about CloudFront caching. We have a s3 bucket with index.html and some react files. yarn build creates file with random names. So we can sure that they will not be cached by CloudFront when we deploy new version.

But to disable caching for index.html I created a new Behavior on CloudFront settings for index.html with the following cache settings

When I tested with curl, it works fine! index.html is never cached.

# curl -I https://mydomain.com/index.html
HTTP/2 200 
content-type: text/html
content-length: 2657
date: Wed, 01 Jul 2020 18:59:35 GMT
last-modified: Wed, 01 Jul 2020 18:53:37 GMT
etag: "79a663b117ae7e9b038ba99dd1a833de"
server: AmazonS3
x-cache: Miss from cloudfront

But when I visit the site from the browser by typing https://mydomain.com/ I see the previous version of the index.html. It is not updated! How?

How it happens?

When I checked the Cached objects in CloudFront reports, I realized the issue!

Browser never request index.html instead it request / and it is cached!

Solution is simply adding another behaviour for / in cloudfront settings.

Ismail YENIGUL