Reverse proxy

A flow diagram. Web, mobile and CLI clients through a reverse proxy, which routes each path to the app, auth or assets service.

  ┌─ Clients ──────────────────────────────────────────────────┐
  │                                                            │
  │  ╭────────────╮     ╭────────────────╮     ╭────────────╮  │
  │  │ Web Client │     │ Mobile Client  │     │ CLI Client │  │
  │  ╰────────────╯     ╰────────────────╯     ╰────────────╯  │
  └─────────┼────────────────────┼────────────────────┼────────┘
            │ HTTPS              │ HTTPS              │ HTTPS
            │                    │                    │
            └───────────────┐    │   ┌────────────────┘
                            │    │   │
   ┌─ Services ─────────────┼────┼───┼────────────────────────────┐
   │                        ▼    ▼   ▼                            │
   │                    ┌────────────────┐                        │
   │                    │ Reverse Proxy  │                        │
   │                    └────────────────┘                        │
   │                 /api/* ▲    ▲   ▲ /assets/*                  │
   │                        │    │   │                            │
   │         ┌──────────────┘    │   └─────────────────┐          │
   │         ▼                   ▼ /auth/*             ▼          │
   │  ┌────────────┐     ┌──────────────┐     ┌────────────────┐  │
   │  │ App Server │     │ Auth Service │     │ Assets Service │  │
   │  └────────────┘     └──────────────┘     └────────────────┘  │
   │         ▲ query/result      ▲ query/result                   │
   │         │                   │                                │
   │         └──────┐    ┌───────┘                                │
   │                ▼    ▼                                        │
   │             ╒══════════╕                                     │
   │             │ Database │                                     │
   │             └──────────┘                                     │
   └──────────────────────────────────────────────────────────────┘

Spec

JSON

{
  "type": "flow",
  "direction": "DOWN",
  "nodes": [
    {"id": "web", "label": "Web Client", "shape": "rounded"},
    {"id": "mobile", "label": "Mobile Client", "shape": "rounded"},
    {"id": "cli", "label": "CLI Client", "shape": "rounded"},
    {"id": "proxy", "label": "Reverse Proxy", "shape": "hexagon"},
    {"id": "server", "label": "App Server", "shape": "rect"},
    {"id": "auth", "label": "Auth Service", "shape": "rect"},
    {"id": "assets", "label": "Assets Service", "shape": "rect"},
    {"id": "db", "label": "Database", "shape": "cylinder"}
  ],
  "edges": [
    {"id": "e-web-proxy", "from": "web", "to": "proxy", "label": "HTTPS", "style": "solid"},
    {"id": "e-mobile-proxy", "from": "mobile", "to": "proxy", "label": "HTTPS", "style": "solid"},
    {"id": "e-cli-proxy", "from": "cli", "to": "proxy", "label": "HTTPS", "style": "solid"},
    {
      "id": "e-proxy-server",
      "from": "proxy",
      "to": "server",
      "label": "/api/*",
      "direction": "both"
    },
    {"id": "e-proxy-auth", "from": "proxy", "to": "auth", "label": "/auth/*", "direction": "both"},
    {
      "id": "e-proxy-assets",
      "from": "proxy",
      "to": "assets",
      "label": "/assets/*",
      "direction": "both"
    },
    {
      "id": "e-server-db",
      "from": "server",
      "to": "db",
      "label": "query/result",
      "direction": "both"
    },
    {"id": "e-auth-db", "from": "auth", "to": "db", "label": "query/result", "direction": "both"}
  ],
  "groups": [
    {"id": "clients", "label": "Clients", "contains": ["web", "mobile", "cli"]},
    {"id": "services", "label": "Services", "contains": ["proxy", "server", "auth", "assets", "db"]}
  ]
}

Draw it yourself

diago render reverse-proxy.json > reverse-proxy.svg

Open it in the playground to edit it in your browser.