Skip to content

Serverless web API on AWS

CloudFront (a global service, so drawn outside the Region) serves a single-page app from S3 and sends `/api/*` to an API Gateway REST API, Lambda and DynamoDB, with a Cognito user pool authorizer; the function also writes to a receipts bucket.

aws8 nodes2 groups7 edges
Open full size
Serverless web API on AWS with CloudFront, S3, API Gateway, Lambda, DynamoDB and CognitoServerless web API on AWS with CloudFront, S3, API Gateway, Lambda, DynamoDB and CognitoServerless web API on AWS with CloudFront, S3, API Gateway, Lambda, DynamoDB and CognitoServerless web API on AWS with CloudFront, S3, API Gateway, Lambda, DynamoDB and Cognito
aws-serverless-api.yamlOn GitHub
# yaml-language-server: $schema=../references/diagram.schema.json
title: Serverless web API on AWS
subtitle: Single-page app on CloudFront, REST API on API Gateway and Lambda, Cognito sign-in
direction: down

legend:
  solid: Request path
  dashed: Sign-in
  dotted: Authorizer check

groups:
  cloud: { type: aws:cloud }
  region: { type: aws:region, label: us-east-1, in: cloud }

nodes:
  users: { icon: aws:users, label: Users }
  # CloudFront is a global service: it sits in the AWS Cloud group, outside the Region.
  cdn: { icon: aws:cloudfront, label: Amazon CloudFront, in: cloud }
  site: { icon: aws:simple-storage-service-bucket, label: Web app bucket, note: Static SPA assets, in: region }
  auth: { icon: aws:cognito, label: Amazon Cognito, note: User pool, in: region }
  api: { icon: aws:api-gateway, label: Amazon API Gateway, note: REST API, in: region }
  fn: { icon: aws:lambda-lambda-function, label: Orders function, note: AWS Lambda, in: region }
  table: { icon: aws:dynamodb-table, label: Orders table, note: Amazon DynamoDB, in: region }
  uploads: { icon: aws:simple-storage-service-bucket, label: Receipts bucket, in: region }

edges:
  - users -> cdn: HTTPS
  - users --> auth: sign in
  - cdn -> site: static files
  - cdn -> api: /api/*
  # API Gateway calls Cognito to check the token: laid out Cognito -> API Gateway, arrow at the start.
  - { from: auth, to: api, arrow: start, line: dotted, label: Cognito authorizer }
  - api -> fn
  - fn -> table, uploads

Start from this one

Copies the spec to diagram.yaml, then renders every format.

$ orrery init aws-serverless-api$ orrery render diagram.yaml -f all --theme both

Downloads