Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sync files to s3 and set cache control headers
#!/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
@penghuili

This comment has been minimized.

Copy link

penghuili commented Nov 12, 2018

nice

@shmuelgutman

This comment has been minimized.

Copy link

shmuelgutman commented Nov 14, 2018

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.

@aray12

This comment has been minimized.

Copy link

aray12 commented Nov 16, 2018

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

@peterlada

This comment has been minimized.

Copy link

peterlada commented Nov 27, 2018

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

@kevindice

This comment has been minimized.

Copy link

kevindice commented Jan 27, 2019

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

@john-osullivan

This comment has been minimized.

Copy link

john-osullivan commented May 17, 2019

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

@kelly-tock

This comment has been minimized.

Copy link

kelly-tock commented May 17, 2019

Nice!

@agconti

This comment has been minimized.

Copy link

agconti commented Jun 8, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.