AWS · Amazon S3 + CloudFront · Diagram as code
S3 + CloudFront architecture diagram
Put CloudFront in front of an S3 origin for static assets, and optionally route API paths to API Gateway. ArchLex checks the routes relationship and draws official icons.
CloudFront with an S3 origin.
CDN in front of a static site bucket.
provider aws
direction LR
cdn: cloudfront["CDN"]
origin: s3["Static site"]
cdn -[routes]-> originStatic site plus API behind CloudFront.
Route 53 → CloudFront, with separate routes to S3 and API Gateway.
provider aws
direction LR
dns: route53["app.example.com"]
cdn: cloudfront["CDN"]
origin: s3["Static assets"]
api: api-gateway["API"]
dns > cdn
cdn -[routes]->|static| origin
cdn -[routes]->|api| apiPattern notes for Amazon S3 + CloudFront.
Placement and relationship rules ArchLex enforces for this service.
- Placement. CloudFront and S3 sit at the regional/global edge of the diagram—usually at the document root. You do not place S3 inside a VPC subnet.
- Valid connections. cloudfront -[routes]-> s3 for the static origin. cloudfront -[routes]-> api-gateway when the same distribution fronts an API. route53 can point at CloudFront with a plain edge or -[routes]->.
- Uploads and backends. Lambda or ECS can -[writes]-> s3 and -[reads]-> s3. Pair those edges when the same bucket is both a CDN origin and an application datastore.
Ask an agent to draw it.
Install the ArchLex skill or connect the free MCP server, then paste this prompt.
npx skills add baires/archlexDraw an S3 + CloudFront architecture diagram with Route 53 pointing at CloudFront, a static S3 origin, and an API Gateway route. Validate it and give me a playground link.Prefer MCP? Follow the MCP server guide.
Related AWS examples.
- Full-Stack Serverless Web ApplicationRoute 53 DNS, CloudFront CDN, S3 static assets, API Gateway, Lambda, and DynamoDB
- AI/ML Model Inference PipelineCloudFront and API Gateway feeding Lambda preprocessor to EKS GPU inference cluster backed by ElastiCache and S3
- Live Video Streaming PipelineAWS MediaLive ingesting live streams, MediaPackage packaging for delivery, and CloudFront CDN distribution
- Async Fan-Out Event ProcessingAPI Gateway triggering SNS Topic fan-out to parallel SQS Queues for Email workers and Analytics S3 Data Lake
Amazon S3 + CloudFront diagram questions.
How do I diagram CloudFront in front of S3?
Declare cloudfront and s3 resources, then connect them with cdn -[routes]-> origin. Add a label on the edge when you have multiple origins.
Can one CloudFront distribution front S3 and an API?
Yes. Draw two routes from cloudfront: one to s3 and one to api-gateway. ArchLex allows both as routes targets.
Does ArchLex check bucket policies or OAC?
No. It checks the diagram graph. Origin access control, bucket policies, and cache behaviors are not inferred.
Which icons does it use?
Official AWS Architecture Icons for Amazon S3 and Amazon CloudFront, sanitized into the SVG output.
More AWS service diagrams.
Open source · MIT licensed