AWS architecture template

AWS static website with CloudFront

Private S3 bucket behind CloudFront with origin access control, ACM, WAF and a CodePipeline build that deploys on push.

Open in editor

Free to start. Updated .

Diagram of the AWS static website with CloudFront template

When to use it

This template fits a marketing site, documentation portal or single-page app that compiles to static files. The S3 bucket stays private and CloudFront reads from it through origin access control, so nobody can bypass the CDN. A certificate from AWS Certificate Manager, which must be issued in us-east-1 for CloudFront, gives you HTTPS on your own domain, and Route 53 alias records point the domain at the distribution. AWS WAF adds rate limiting and managed rules if the site attracts abuse.

Deployment runs through CodePipeline: a push to the main branch starts CodeBuild, which builds the site, syncs the output to S3 and invalidates the cached paths. The trade-off is that anything dynamic, such as forms, search or sign-in, needs a separate API. Pair this template with the serverless API template for those parts, and serve the API from its own subdomain or a second CloudFront behaviour.

What's in this template

  • User / ActorSite visitors
  • Route 53Alias record to the distribution
  • CloudFrontGlobal CDN with HTTPS
  • Certificate ManagerTLS certificate (us-east-1)
  • WAFRate limiting and managed rules
  • S3Private site bucket (origin access control)
  • CodeBuildBuild the site and sync to S3
  • CodePipelineRuns on every push to main
  • User / ActorDevelopers

How it connects

  • User / Actor (Site visitors) → Route 53 (network): DNS
  • User / Actor (Site visitors) → CloudFront (network): HTTPS
  • Certificate Manager → CloudFront (dependency): TLS
  • WAF → CloudFront (dependency): Web ACL
  • CloudFront → S3 (data): Origin requests (OAC)
  • User / Actor (Developers) → CodePipeline (dependency): git push
  • CodePipeline → CodeBuild (dependency): Build stage
  • CodeBuild → S3 (data): Sync files

More AWS templates

Make it your own

Open a copy in the editor, then rename, rearrange and extend it.