Web shop on one cloud region
Ten components of a web shop in three nested boundaries — a cloud region, a private network, a data zone — with every kind in its own shape. Connections say what they do and, in brackets, how. Components outside a boundary stay out of its frame; the table names each component with its boundaries and connections. Build-time warnings: warning[canvas_too_small] at /width: the diagram needs 1829 pixels here and was drawn that large; raise width to 1829, shorten labels, or try the other orientation
Web shop on one cloud region
examples/shop-architecture.json{
"schemaVersion": 1,
"type": "architecture",
"title": "Web shop on one cloud region",
"source": "Architecture handbook, overview",
"width": 1820,
"height": 540,
"architecture": {
"boundaries": [
{
"id": "region",
"label": "Cloud region eu-central-1"
},
{
"id": "network",
"label": "Private network",
"in": "region"
},
{
"id": "data",
"label": "Data zone",
"in": "network"
}
],
"components": [
{
"id": "customer",
"label": "Customer",
"kind": "person"
},
{
"id": "web",
"label": "Web shop",
"sublabel": "browser",
"kind": "frontend"
},
{
"id": "cdn",
"label": "Content network",
"kind": "external"
},
{
"id": "api",
"label": "Shop API",
"sublabel": "Node.js",
"in": "network"
},
{
"id": "cache",
"label": "Session cache",
"sublabel": "Redis",
"kind": "cache",
"in": "network"
},
{
"id": "events",
"label": "Order events",
"kind": "queue",
"in": "network"
},
{
"id": "worker",
"label": "Order worker",
"in": "network"
},
{
"id": "db",
"label": "Orders",
"sublabel": "Postgres",
"kind": "database",
"in": "data"
},
{
"id": "files",
"label": "Invoices",
"sublabel": "object storage",
"kind": "storage",
"in": "region"
},
{
"id": "pay",
"label": "Payment provider",
"kind": "external"
},
{
"id": "auth",
"label": "Sign-in",
"sublabel": "identity provider",
"kind": "security",
"in": "network"
}
],
"connections": [
{
"from": "customer",
"to": "web",
"label": "browses"
},
{
"from": "web",
"to": "cdn",
"label": "loads assets",
"technology": "HTTPS",
"dash": "dashed"
},
{
"from": "web",
"to": "api",
"label": "calls",
"technology": "HTTPS/JSON"
},
{
"from": "api",
"to": "cache",
"label": "sessions",
"technology": "RESP"
},
{
"from": "api",
"to": "auth",
"label": "checks token",
"technology": "OIDC"
},
{
"from": "api",
"to": "db",
"label": "reads, writes",
"technology": "SQL/TLS"
},
{
"from": "api",
"to": "events",
"label": "publishes",
"technology": "AMQP"
},
{
"from": "events",
"to": "worker",
"label": "delivers"
},
{
"from": "worker",
"to": "pay",
"label": "charges",
"technology": "HTTPS"
},
{
"from": "worker",
"to": "files",
"label": "stores PDF",
"technology": "S3 API"
},
{
"from": "worker",
"to": "db",
"label": "updates",
"technology": "SQL/TLS"
}
],
"mainPath": [
"customer",
"web",
"api",
"events",
"worker",
"pay"
]
}
}Focus
Source: Architecture handbook, overview
Show chart data
| Component | Kind | Boundary | Connects to |
|---|---|---|---|
| Customer | person | Web shop (browses) | |
| Web shop | frontend | Content network (loads assets, via HTTPS), Shop API (calls, via HTTPS/JSON) | |
| Shop API | service | Cloud region eu-central-1 › Private network | Session cache (sessions, via RESP), Sign-in (checks token, via OIDC), Orders (reads, writes, via SQL/TLS), Order events (publishes, via AMQP) |
| Content network | external system | ||
| Session cache | cache | Cloud region eu-central-1 › Private network | |
| Order events | queue | Cloud region eu-central-1 › Private network | Order worker (delivers) |
| Sign-in | security | Cloud region eu-central-1 › Private network | |
| Order worker | service | Cloud region eu-central-1 › Private network | Payment provider (charges, via HTTPS), Invoices (stores PDF, via S3 API), Orders (updates, via SQL/TLS) |
| Orders | database | Cloud region eu-central-1 › Private network › Data zone | |
| Invoices | storage | Cloud region eu-central-1 | |
| Payment provider | external system |