Web shop on one cloud region
One model of a web shop with eleven components, shown through two views. The overview, shown here, keeps eight components with the connections between them and the boundaries that still hold one; the description says it shows 8 of the model's 11 components. The checkout view lists ten steps along existing connections, each with its own text, and renders as a numbered diagram. --view checkout renders it, --all-views both on one HTML page with links between them. Illustrative values.
Web shop on one cloud region
examples/shop-views.json{
"schemaVersion": 1,
"type": "architecture",
"title": "Web shop on one cloud region",
"source": "Architecture handbook, shop model",
"width": 1900,
"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": [
{
"id": "browse",
"from": "customer",
"to": "web",
"label": "browses"
},
{
"id": "assets",
"from": "web",
"to": "cdn",
"label": "loads assets",
"technology": "HTTPS",
"dash": "dashed"
},
{
"id": "call",
"from": "web",
"to": "api",
"label": "calls",
"technology": "HTTPS/JSON"
},
{
"id": "session",
"from": "api",
"to": "cache",
"label": "sessions",
"technology": "RESP"
},
{
"id": "token",
"from": "api",
"to": "auth",
"label": "checks token",
"technology": "OIDC"
},
{
"id": "orders",
"from": "api",
"to": "db",
"label": "reads, writes",
"technology": "SQL/TLS"
},
{
"id": "publish",
"from": "api",
"to": "events",
"label": "publishes",
"technology": "AMQP"
},
{
"id": "deliver",
"from": "events",
"to": "worker",
"label": "delivers"
},
{
"id": "charge",
"from": "worker",
"to": "pay",
"label": "charges",
"technology": "HTTPS"
},
{
"id": "invoice",
"from": "worker",
"to": "files",
"label": "stores PDF",
"technology": "S3 API"
},
{
"id": "update",
"from": "worker",
"to": "db",
"label": "updates",
"technology": "SQL/TLS"
}
],
"mainPath": [
"customer",
"web",
"api",
"events",
"worker",
"pay"
],
"views": [
{
"key": "overview",
"title": "Web shop: overview",
"components": [
"customer",
"web",
"api",
"events",
"worker",
"db",
"files",
"pay"
]
},
{
"key": "checkout",
"title": "Web shop: checkout",
"steps": [
{
"connection": "browse",
"label": "places order"
},
{
"connection": "call",
"label": "submits order"
},
{
"connection": "token"
},
{
"connection": "orders",
"label": "reserves stock"
},
{
"connection": "orders",
"label": "saves order"
},
{
"connection": "publish",
"label": "order placed"
},
{
"connection": "deliver"
},
{
"connection": "charge",
"label": "charges card"
},
{
"connection": "update",
"label": "marks paid"
},
{
"connection": "invoice"
}
]
}
]
}
}Focus
Source: Architecture handbook, shop model
Show chart data
| Component | Kind | Boundary | Connects to |
|---|---|---|---|
| Customer | person | Web shop (browses) | |
| Web shop | frontend | Shop API (calls, via HTTPS/JSON) | |
| Shop API | service | Cloud region eu-central-1 › Private network | Orders (reads, writes, via SQL/TLS), Order events (publishes, via AMQP) |
| Order events | queue | Cloud region eu-central-1 › Private network | Order worker (delivers) |
| 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 |