A shell script for uploading a React app build to S3 + CloudFront for deployment

react-app-s3-sync.sh

#!/bin/bash

S3_BUCKET_NAME=$1
CF_ID=$2

# Sync all files except for service-worker and index
echo "Uploading files to $S3_BUCKET_NAME..."
aws s3 sync build s3://$S3_BUCKET_NAME/ \
  --acl public-read \
  --exclude service-worker.js \
  --exclude index.html

# Upload service-worker.js with directive to not cache it
echo "Uploading service-worker.js"
aws s3 cp build/service-worker.js s3://$S3_BUCKET_NAME/service-worker.js \
  --metadata-directive REPLACE \
  --cache-control max-age=0,no-cache,no-store,must-revalidate \
  --content-type application/javascript \
  --acl public-read

# Upload index.html
echo "Uploading index.html"
aws s3 cp build/index.html s3://$S3_BUCKET_NAME/index.html \
  --metadata-directive REPLACE \
  --cache-control max-age=0,no-cache,no-store,must-revalidate \
  --content-type text/html \
  --acl public-read

# Purge the cloudfront cache
echo "Purging the cache for CloudFront"
aws cloudfront create-invalidation \
  --distribution-id $CF_ID \
  --paths /

@joaoportela the s-max-age header is irrelevant to the client, but can be used to tell cloudFront how long to cache a file.
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html#ExpirationDownloadDist

@Fantaztig , @joaoportela thanks for those interesting thoughts and remarks! It's very useful! It makes configuring cache less of a nightmare... :)

@joaoportela the s-max-age header is irrelevant to the client, but can be used to tell cloudFront how long to cache a file.
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Expiration.html#ExpirationDownloadDist

You're correct. I somehow missed the s- prefix when reading your comment.

Personally, I would still avoid using that technique. But it is a valid and correct approach.