Sync files to s3 and set cache control headers

s3Sync.sh

#!/bin/bash

if [[ "$1" != "" ]]; then
    S3BUCKETNAME="$1"
else
    echo ERROR: Failed to supply S3 bucket name
    exit 1
fi

aws s3 sync build s3://$S3BUCKETNAME --delete --cache-control max-age=31536000,public
aws s3 cp s3://$S3BUCKETNAME/service-worker.js s3://$S3BUCKETNAME/service-worker.js --metadata-directive REPLACE --cache-control max-age=0,no-cache,no-store,must-revalidate --content-type application/javascript --acl public-read
aws s3 cp s3://$S3BUCKETNAME/index.html s3://$S3BUCKETNAME/index.html --metadata-directive REPLACE --cache-control max-age=0,no-cache,no-store,must-revalidate --content-type text/html --acl public-read

nice

If exactly at the point between the sync command and the other cp commands someone will request the service-worker.js file or the index.html he'll get it without the cache-control headers and it can be lead to unexpected results if you're using cloud-front.
For that reason, it's better to sync and --exclude the service-worker.js and index.html and then upload them with the cache-control headers.

@shmuelgutman the problem with that is then the --delete flag will result in a 404 for those files

How about --inculde "*" --exclude "index.html" instead of the cp s3:// s3://?

Based on the suggestions above, I created this script: https://gist.github.com/kevindice/87ee5ffca9523810253de3d9a41c3ae5
Usage: ./react-app-s3-sync.sh $S3_BUCKET_NAME $CLOUDFRONT_DISTRIBUTION_ID

This was the top Google result for aws s3 cp respect cache-control, and was exactly what I was looking for. Thanks @kellyrmilligan !

Nice!

The cache-control directive doesn't make sense here:

max-age=0,no-cache,no-store,must-revalidate

• no-cache and no-store have different effects and are mutually exclusive, meaning the browser cannot adhere to both at the same time
• no-cache already equals must-revalidate.
• no-store already equals max-age=0.

I use no-cache for my html files to ensure that I never serve stale versions while minimizing my bandwidth costs.
Here's a great resource for figuring this out for yourself: https://web.dev/http-cache/#defining-optimal-cache-control-policy

thanks !

@agconti

• no-store already equals max-age=0.

no-store is not equal to max-age=0 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control#preventing_caching

Thanks for the commands example, however, the Cache-Control directive in it is plainly wrong and doesn't make sense, as also mentioned by the @agconti.