AWS Static Website: S3, CloudFront and Route 53
A static website is HTML, CSS, JavaScript and images that need no server-side code when a page is requested. On AWS the usual home for one is an Amazon S3 bucket behind Amazon CloudFront, with Amazon Route 53 for the domain name and AWS Certificate Manager (ACM) for the HTTPS certificate.
CloudFront caches your files at edge locations close to visitors, so pages load quickly and S3 receives far fewer requests. The bucket can stay private: only CloudFront is allowed to read from it.
Scroll sideways to see the whole diagram
Start from this diagram and edit it on your own board.
By continuing, you agree to the Terms of Service and Privacy Policy, including sending images of your strokes, diagram labels and similar data to providers in the United States (Cloudflare, Inc. and TypeSafe AI, Inc.) for AI conversion.
What each part does
- Users
- Visitors with a browser. They enter your domain name and receive the files over HTTPS.
- Route 53
- DNS for your domain. An alias record points the name (for example www.example.com) at the CloudFront distribution.
- ACM
- AWS Certificate Manager. Issues and renews the public TLS certificate for your domain. CloudFront can only use certificates requested in the US East (N. Virginia) Region.
- CloudFront
- The content delivery network. It ends HTTPS with your certificate, caches files at edge locations, and fetches from S3 when a file is not cached.
- S3 bucket
- Stores the built site as objects. With origin access control (OAC) the bucket stays private and only your CloudFront distribution can read it.
How a page is served
- The browser asks DNS for your domain. Route 53 answers through an alias record that points at the CloudFront distribution.
- The browser opens an HTTPS connection to CloudFront, which presents the certificate from ACM.
- If CloudFront has the file cached at that edge location, it returns it at once.
- On a cache miss, CloudFront requests the object from the S3 bucket using origin access control, caches it and returns it.
- Later requests for the same file are answered from the cache until it expires or you invalidate it.
When to use it
- A marketing site, documentation or blog built with a static site generator.
- A single-page app (React, Vue and similar) whose API lives somewhere else.
- A campaign landing page that needs HTTPS on its own domain and has to absorb traffic spikes.
Common variations
Routing for a single-page app
A single-page app needs unknown paths to return index.html. Add a CloudFront custom error response that serves /index.html for the 403 and 404 errors a private bucket returns, or rewrite paths with a CloudFront Function.
Send the bare domain to www, or the reverse
Create an alias record for each name, list both names on the certificate and the distribution, and redirect one to the other with a CloudFront Function.
Add a backend under the same domain
Add a second origin, for example API Gateway, to the same distribution and route /api/* to it with a cache behavior. The site and the API then share one domain and no CORS setup is needed for them.
S3 static website hosting instead of OAC
The S3 website endpoint understands index documents and redirect rules, but it serves HTTP only and needs a public bucket. Most new sites keep the bucket private as shown here and handle index files in CloudFront.
Make it yours
Put your own domain on the Route 53 and ACM boxes first, then decide whether the site needs a backend origin next to the S3 bucket.
Opens this diagram as a board you can edit.
By continuing, you agree to the Terms of Service and Privacy Policy, including sending images of your strokes, diagram labels and similar data to providers in the United States (Cloudflare, Inc. and TypeSafe AI, Inc.) for AI conversion.