How to achieve complex static file caching on AWS S3 objects (CreateReactApp build outputs)?

Question

So, I have a React app hosted on a AWS S3 bucket (It also has a CloudFront distribution before it). Using a GitHub Actions workflow, I deploy my build output on S3 with aws-cli s3 sync command:

aws s3 sync build s3://mybucket --delete --acl public-read

Now, I want to perform static file caching with the denoted starting configuration in the CreateReactApp docs:

• Cache-Control: max-age=31536000 for build/static assets,
• Cache-Control: no-cache for everything else (to ensure the browser will always check for an updated index.html file)

Question

How can I achieve applying such conditional configuration on S3 objects based on the file/folder paths?

What I thought/tried so far

• First I thought it could be done with a setting on the S3 bucket. But after some searching, now, my understanding is that there is no such setting on the bucket itself (at least, answers to this post propose none).
• Then, I headed to --cache-control flag of aws cli s3 sync docs, but not did I find a direct, one-liner way of applying different cache controls.

Answer 1

Here’s what I use:

aws s3 sync build s3://bucket \
  --metadata-directive REPLACE \
  --cache-control max-age=86400 \
  --exclude index.html --exclude 'static/*' \
  --delete
aws s3 sync build/static s3://bucket/static \
  --metadata-directive REPLACE \
  --cache-control max-age=31536000,immutable \
  --size-only
aws s3 cp build/index.html s3://bucket \
  --metadata-directive REPLACE \
  --cache-control no-cache

Thus the public folder and misc other files are served with instruction to cache for 24 hours, index.html is served with instruction to never cache and the static folder is served with instruction to cache a year and with the immutable flag which supposedly can be a real boon for reloads [1].

Additionally we do not prune the static folder of old assets which means any browser out there that insists on using a stale build will still get those files. Which seems probably the correct choice rather than 404ing and being broken.

CloudFront will use these headers for its own cache and send them out to the browser.

[1] https://hacks.mozilla.org/2017/01/using-immutable-caching-to-speed-up-the-web/

Answer 2

This can be done very simply with no configuration on the S3 side, as you're using CloudFront first this would be controlled in the behaviours.

You can define multiple behaviours which are matched based on path patterns. In CloudFront this would display as if you have multiple origins but both could go to the same S3 bucket.

You would have a path pattern of build/static for which you set the caching max age for all objects. Then for the default behaviour you would disable caching of objects.

This article has a basic demonstration for setting it up.