0

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.

Improve this question
4
  • How often do you do this? Because if it isn't that often (less than 1000 times a month) you are in the free tier and you can just invalidate the cache. Commented Nov 30, 2018 at 21:31
  • For sure less than 1000 times a month. However let's consider that after 1 year this is not going to be free anymore and Amazon offers 'scalability'. But thanks for this solution, I am considering invalidating the cache to the static folder made by react Commented Nov 30, 2018 at 21:37
  • 1
    Well it costs 0.005$ per invalidation after the free tier and I don't think you wouldn't really need so many invalidations once your app is done. You will only add improvements. You can also add triggers for S3 so you can automatically invalidate with Lambdas :) Commented Nov 30, 2018 at 21:39
  • 1
    @Cristian note also that the 1000 invalidation paths per account per month is not part of the free tier -- it's an ongoing allowance. You're always allowed 1000 invalidation paths per account per month, no matter how long you've had your account. Wildcards, including /* (invalidate everything in the distribution), count as just 1, no matter how many objects they match. Commented Dec 1, 2018 at 20:59

1 Answer 1

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.