CODEWITHSUNDEEP
reactjsamazon-web-servicesamazon-s3amazon-cloudfront
Iulian
Iulian

Reputation: 419

AWS CloudFront how to update existing S3 file?

I use CloudFront from AWS and I have an S3 static website. I use ReactJs and I changed some texts on most pages. The problem I have now is that I use

npm run build

to produce the production application. I want to update the content on AWS in the S3 bucket (I previously uploaded the same files) however two things happen:

-When I access in incognito, everything works fine, I am given the updated version of the website

-When I access in normal mode with web browsers that I used to access the website before, I am still given the old version of files.

I accessed AWS documentation and I have two solutions:

-Wait 24 hours for CloudFront to cache files in edge locations

-Use version name for the files (for example, change the name of image.jpg to image_1.jpg; image_2.jpg etc.)

I would definitely go with the second option which indeed is time consuming but for sure less than 24 hours. Should I change the name of EACH file that I have in build or just those in static?

Any other solutions?

Something I haven't tried is, before uploading to AWS S3, create a folder such as V1 and upload my react files. When I make a change I call the folder V2 and so on.

Upvotes: 0

Views: 590

Answers (1)

LiorH
LiorH

Reputation: 18824

Using version names is the most robust method. It gives you full control on the cache behavior without messing around with CloudFront. So yes, each time there's a new version update your file names. Btw, if you bootstrapped your react app using create-react-app then the build process does that by default. It will name each bundle with a unique hash every time the bundle changes. This way you can utilize long-term cache in the browser and CF for your files.

You'd probably still have to invalidate the root index.html each deployment as its name doesn't change between versions.

Upvotes: 1

Related Questions