cloudfront points to old version of React hosted on s3

Question

I have deployed my React app on s3. I am using Cloudfront to use a certificate and reach my s3 bucket through HTTPS. After struggling setting it all up, I managed to set it all up, it is now working well.

Now I updated my project, created a new version of bundle.js, uploaded it to s3.

My issue now is that mydomain.com points to the V1 of bundle.js

So what I tried to dig up a little bit more, and here is what I found:

• mydomain.com points to V1
• xxxxx.cloudfront.net points to V1
• mydomain.com.s3-website-eu-west-1.amazonaws.com points to V2

So my guess is that for some reason, cloudfront points to the V1, but why ? Is there some cache somewhere in there ?

Here is the config, in case it helps:

• Route53 Type A points to xxxxxx.cloudfront.net
• cloudfront domain is xxxxxx.cloudfront.net
• cloudfront CNAMES are mydomain.com and www.mydomain.com
• cloudfront origin domain name and path is mydomain.com.s3-website-eu-west-1.amazonaws.com
• s3 bucket is mydomain.com

PS : Just to double check that the issue was not only coming from bundle.js, I deleted the background image from the bucket, but somehow, it is still found and used when accessing mydomain.com (so showing the V1)

Answer 1

As @Joe Clay confirmed, Cloudfront was caching everything.

To force clear the cache using the AWS console (I found in some docs that it can be done using their API), here are the steps I followed:

• log in to AWS console
• go to Cloudfront and see details of your distribution
• go to invalidations tab, and click on Create invalidation
• put in object path * and save
• (took about 5 good minutes to complete)
• Refresh the website mydomain.com (might need to clean the browser cache)
• and voila !

Hope this answer can help anyone stuck with the same problem!