How to Deploy a Static Site to S3 and CloudFront With Bitbucket Pipelines

Run aws s3 sync --delete to upload the build, then aws cloudfront create-invalidation so the CDN serves the new files.

A static deploy is two AWS calls: sync the built assets to the origin bucket, then invalidate the CloudFront distribution so cached objects are refetched. Run them after the build step completes.

Steps

• Build the site (for example npm run build into dist/).
• aws s3 sync dist/ s3://<bucket> --delete to mirror the bucket to the build.
• aws cloudfront create-invalidation --paths "/*" to clear the edge cache.
• Store AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY as secured variables.

Pipeline

image: node:20
pipelines:
  branches:
    main:
      - step:
          name: Build
          caches:
            - node
          script:
            - npm ci
            - npm run build
          artifacts:
            - dist/**
      - step:
          name: Deploy to S3 + CloudFront
          image: amazon/aws-cli:2
          deployment: production
          script:
            - aws s3 sync dist/ s3://$S3_BUCKET --delete
            - aws cloudfront create-invalidation --distribution-id $CF_DIST_ID --paths "/*"

Gotchas

• Pass dist/** as an artifact so the deploy step can see the build output.
• A wildcard invalidation (/*) past 1,000 paths per month incurs CloudFront charges; invalidate specific paths when you can.
• Set far-future cache headers on hashed assets and short ones on index.html.

Related guides