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 penghuili commented Nov 12, 2018

nice

@shmuelgutman

This comment has been minimized.

Copy link

@shmuelgutman 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 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 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 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 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 kelly-tock commented May 17, 2019

Nice!

@agconti

This comment has been minimized.

Copy link

@agconti 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

@chanthafef

This comment has been minimized.

Copy link

@chanthafef chanthafef commented Nov 24, 2020

thanks !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment