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

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.

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.