168 lines
6.4 KiB
HTML
168 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Docker: Service Orchestration</title>
|
|
<style>
|
|
:root {
|
|
--dark: #1a1a2e;
|
|
--muted: #6b7280;
|
|
--border: #cbd5e1;
|
|
--bg-soft: #f8fafc;
|
|
--blue: #2563eb;
|
|
--red: #dc2626;
|
|
}
|
|
html, body { margin: 0; padding: 0; background: #fff; min-height: 100vh; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
|
|
body { padding: 28px 36px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
|
|
h1 { margin: 0 0 4px; font-size: 1.45rem; }
|
|
.sub { color: var(--muted); margin-bottom: 28px; font-size: 0.88rem; }
|
|
|
|
.diagram { display: flex; align-items: center; gap: 0; }
|
|
|
|
.node {
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
border: 2px solid var(--dark); border-radius: 8px;
|
|
padding: 12px 16px; background: var(--bg-soft);
|
|
font-weight: 700; font-size: 0.9rem; text-align: center; min-width: 90px;
|
|
}
|
|
.node .sub-label { font-size: 0.72rem; font-weight: 400; color: var(--muted); margin-top: 3px; }
|
|
|
|
.client { border-radius: 50%; width: 72px; height: 72px; padding: 0; border-color: var(--red); }
|
|
.proxy { background: #eff6ff; border-color: var(--blue); min-width: 100px; }
|
|
.docker-box {
|
|
border: 2px dashed var(--blue); border-radius: 12px;
|
|
padding: 16px 20px; display: flex; align-items: center; gap: 0;
|
|
background: #f0f7ff;
|
|
position: relative;
|
|
}
|
|
.docker-label {
|
|
position: absolute; top: -11px; left: 14px;
|
|
background: #fff; padding: 0 6px;
|
|
font-size: 0.72rem; font-weight: 700; color: var(--blue);
|
|
text-transform: uppercase; letter-spacing: 0.06em;
|
|
}
|
|
|
|
.services { display: flex; flex-direction: column; gap: 12px; }
|
|
.db-col { display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
|
|
|
/* arrows */
|
|
.arr { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 6px; }
|
|
.arr-h { display: flex; flex-direction: column; gap: 3px; align-items: center; }
|
|
.line { height: 2px; width: 44px; }
|
|
.line.blue { background: var(--blue); }
|
|
.line.red { background: var(--red); }
|
|
.line.dashed-blue { background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 10px); }
|
|
.line.dashed-red { background: repeating-linear-gradient(90deg, var(--red) 0 6px, transparent 6px 10px); }
|
|
.arrowhead-r::after { content: '▶'; font-size: 0.65rem; color: inherit; }
|
|
.arrowhead-l::before { content: '◀'; font-size: 0.65rem; color: inherit; }
|
|
.arr-label { font-size: 0.65rem; color: var(--muted); white-space: nowrap; }
|
|
|
|
.arr-v { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 0; }
|
|
.line-v { width: 2px; height: 28px; }
|
|
.line-v.blue { background: var(--blue); }
|
|
.line-v.dashed-blue { background: repeating-linear-gradient(180deg, var(--blue) 0 5px, transparent 5px 9px); }
|
|
.arr-v .arrowhead-d::after { content: '▼'; font-size: 0.65rem; color: var(--blue); }
|
|
|
|
.gap-col { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Docker: Service Orchestration</h1>
|
|
<p class="sub">Client kommuniziert nur mit dem Reverse Proxy — interne Services bleiben isoliert</p>
|
|
|
|
<div class="diagram">
|
|
|
|
<!-- Client -->
|
|
<div class="node client" style="color:var(--red); border-color:var(--red);">
|
|
Client
|
|
<div class="sub-label">Browser /<br>Web App</div>
|
|
</div>
|
|
|
|
<!-- arrows client → proxy -->
|
|
<div class="arr">
|
|
<div class="arr-h" style="color:var(--red)">
|
|
<div style="display:flex;align-items:center;gap:2px">
|
|
<div class="line red" style="width:36px"></div>
|
|
<span class="arrowhead-r" style="color:var(--red)"></span>
|
|
</div>
|
|
<div class="arr-label">localhost:10007</div>
|
|
</div>
|
|
<div style="height:8px"></div>
|
|
<div class="arr-h" style="color:var(--red)">
|
|
<div style="display:flex;align-items:center;gap:2px">
|
|
<span class="arrowhead-l" style="color:var(--red)"></span>
|
|
<div class="line dashed-red" style="width:36px"></div>
|
|
</div>
|
|
<div class="arr-label">response</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Docker compose boundary -->
|
|
<div class="docker-box">
|
|
<div class="docker-label">docker compose</div>
|
|
|
|
<!-- Reverse Proxy -->
|
|
<div class="node proxy">
|
|
Reverse<br>Proxy
|
|
<div class="sub-label">:10007</div>
|
|
</div>
|
|
|
|
<!-- arrows proxy → services -->
|
|
<div class="gap-col" style="padding: 0 8px;">
|
|
<div class="arr-h" style="color:var(--blue)">
|
|
<div style="display:flex;align-items:center;gap:2px">
|
|
<div class="line blue" style="width:28px"></div>
|
|
<span class="arrowhead-r" style="color:var(--blue)"></span>
|
|
</div>
|
|
<div class="arr-label">/api/*</div>
|
|
</div>
|
|
<div style="height:8px"></div>
|
|
<div class="arr-h" style="color:var(--blue)">
|
|
<div style="display:flex;align-items:center;gap:2px">
|
|
<div class="line blue" style="width:28px"></div>
|
|
<span class="arrowhead-r" style="color:var(--blue)"></span>
|
|
</div>
|
|
<div class="arr-label">/*</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services column -->
|
|
<div class="services">
|
|
<div class="node" style="background:#dbeafe; border-color:var(--blue);">
|
|
Express API
|
|
<div class="sub-label">:3000</div>
|
|
</div>
|
|
<div class="node" style="background:#dcfce7; border-color:#16a34a;">
|
|
Web App
|
|
<div class="sub-label">:5173</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- arrows → DB -->
|
|
<div class="gap-col" style="padding: 0 6px;">
|
|
<div class="arr-h" style="color:var(--blue)">
|
|
<div style="display:flex;align-items:center;gap:2px">
|
|
<div class="line dashed-blue" style="width:24px"></div>
|
|
<span class="arrowhead-r" style="color:var(--blue)"></span>
|
|
</div>
|
|
<div class="arr-label">:5432</div>
|
|
</div>
|
|
<div style="height:8px"></div>
|
|
<!-- web app does not connect to DB -->
|
|
<div style="width:48px"></div>
|
|
</div>
|
|
|
|
<!-- DB -->
|
|
<div class="db-col">
|
|
<div class="node" style="background:#fef9c3; border-color:#ca8a04; min-width:70px;">
|
|
DB
|
|
<div class="sub-label">PostgreSQL</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /docker-box -->
|
|
</div><!-- /diagram -->
|
|
|
|
</body>
|
|
</html>
|