Static Site Deployment with S3 Sync and CloudFront Invalidation

Beginner8 minTrending

Deploy a static website to S3 with optimized cache headers and trigger a CloudFront invalidation for instant global propagation.

Prerequisites

-AWS CLI v2 installed and configured
-S3 bucket with static website hosting enabled

Steps

Build your static site

Generate the production build output that will be uploaded to S3.

$ npm run build

Most frameworks output to a dist/ or build/ directory. Check your framework docs for the exact output path.

Sync build output to S3

Upload new and changed files to the S3 bucket and remove files that no longer exist in the local build directory.

$ aws s3 sync ./dist s3://my-website-bucket --delete

The --delete flag removes files from S3 that are not in your local directory. Make sure you are syncing the correct folder.

Set cache headers for hashed assets

Apply long-lived cache-control headers to fingerprinted assets like JS, CSS, and images so browsers cache them aggressively.

$ aws s3 cp s3://my-website-bucket/assets/ s3://my-website-bucket/assets/ --recursive --cache-control "max-age=31536000,immutable" --metadata-directive REPLACE

Only apply immutable caching to files with content hashes in their filenames. HTML files should have short or no cache TTL.

Set short cache on HTML files

Ensure HTML entry points are revalidated frequently so users always get the latest version that references the correct hashed assets.

$ aws s3 cp s3://my-website-bucket/ s3://my-website-bucket/ --recursive --exclude "*" --include "*.html" --cache-control "max-age=60,s-maxage=300" --metadata-directive REPLACE

s-maxage controls the CDN cache TTL separately from the browser cache TTL set by max-age.

Invalidate CloudFront cache

Create a CloudFront invalidation to purge cached content at edge locations worldwide so visitors see the latest deployment.

$ aws cloudfront create-invalidation --distribution-id E1EXAMPLE --paths "/*"

Wildcard invalidations count as a single invalidation path but still take 5-15 minutes to propagate across all edge locations.

Verify the deployment

Check the invalidation status and confirm the deployment went through successfully.

$ aws cloudfront get-invalidation --distribution-id E1EXAMPLE --id INVALIDATION_ID

You can also run 'curl -I https://your-domain.com' to inspect the response headers and verify cache-control values.

Full Script

full-script.sh

#!/bin/bash
# Static Site S3 Deployment with CloudFront Invalidation
# Usage: ./deploy-s3.sh <bucket-name> <distribution-id> [build-dir]

set -euo pipefail

BUCKET="${1:?Usage: $0 <bucket-name> <distribution-id> [build-dir]}"
DIST_ID="${2:?Provide your CloudFront distribution ID}"
BUILD_DIR="${3:-./dist}"

if [ ! -d "$BUILD_DIR" ]; then
  echo "Build directory $BUILD_DIR not found. Run your build command first."
  exit 1
fi

echo "Syncing $BUILD_DIR to s3://$BUCKET ..."
aws s3 sync "$BUILD_DIR" "s3://$BUCKET" --delete

echo "Setting cache headers for hashed assets..."
aws s3 cp "s3://$BUCKET/assets/" "s3://$BUCKET/assets/" \
  --recursive \
  --cache-control "max-age=31536000,immutable" \
  --metadata-directive REPLACE 2>/dev/null || true

echo "Setting short cache on HTML files..."
aws s3 cp "s3://$BUCKET/" "s3://$BUCKET/" \
  --recursive \
  --exclude "*" --include "*.html" \
  --cache-control "max-age=60,s-maxage=300" \
  --metadata-directive REPLACE

echo "Invalidating CloudFront distribution $DIST_ID ..."
INVALIDATION=$(aws cloudfront create-invalidation \
  --distribution-id "$DIST_ID" \
  --paths "/*" \
  --output json)

INV_ID=$(echo "$INVALIDATION" | jq -r '.Invalidation.Id')
echo "Invalidation created: $INV_ID"
echo "Deployment complete. Invalidation may take a few minutes to propagate."

FAQ

Discussion

Loading comments...

#!/bin/bash # Static Site S3 Deployment with CloudFront Invalidation # Usage: ./deploy-s3.sh <bucket-name> <distribution-id> [build-dir] set -euo pipefail BUCKET="${1:?Usage: $0 <bucket-name> <distribution-id> [build-dir]}" DIST_ID="${2:?Provide your CloudFront distribution ID}" BUILD_DIR="${3:-./dist}" if [ ! -d "$BUILD_DIR" ]; then echo "Build directory $BUILD_DIR not found. Run your build command first." exit 1 fi echo "Syncing $BUILD_DIR to s3://$BUCKET ..." aws s3 sync "$BUILD_DIR" "s3://$BUCKET" --delete echo "Setting cache headers for hashed assets..." aws s3 cp "s3://$BUCKET/assets/" "s3://$BUCKET/assets/" \ --recursive \ --cache-control "max-age=31536000,immutable" \ --metadata-directive REPLACE 2>/dev/null || true echo "Setting short cache on HTML files..." aws s3 cp "s3://$BUCKET/" "s3://$BUCKET/" \ --recursive \ --exclude "*" --include "*.html" \ --cache-control "max-age=60,s-maxage=300" \ --metadata-directive REPLACE echo "Invalidating CloudFront distribution $DIST_ID ..." INVALIDATION=$(aws cloudfront create-invalidation \ --distribution-id "$DIST_ID" \ --paths "/*" \ --output json) INV_ID=$(echo "$INVALIDATION" | jq -r '.Invalidation.Id') echo "Invalidation created: $INV_ID" echo "Deployment complete. Invalidation may take a few minutes to propagate."