Files
stackpulse/architecture/index.html
T

1007 lines
24 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="prev" href="../getting-started/">
<link rel="next" href="../backend/">
<link rel="icon" href="../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.7.0">
<title>Architektur - Stackpulse Dokumentation</title>
<link rel="stylesheet" href="../assets/stylesheets/main.618322db.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#architektur" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href=".." title="Stackpulse Dokumentation" class="md-header__button md-logo" aria-label="Stackpulse Dokumentation" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Stackpulse Dokumentation
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Architektur
</span>
</div>
</div>
</div>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href=".." title="Stackpulse Dokumentation" class="md-nav__button md-logo" aria-label="Stackpulse Dokumentation" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
</a>
Stackpulse Dokumentation
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href=".." class="md-nav__link">
<span class="md-ellipsis">
Start
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Benutzerhandbuch
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Benutzerhandbuch
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../user-guide/" class="md-nav__link">
<span class="md-ellipsis">
Überblick
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../user-guide/setup/" class="md-nav__link">
<span class="md-ellipsis">
Setup
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../user-guide/stacks/" class="md-nav__link">
<span class="md-ellipsis">
Stacks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../user-guide/logs/" class="md-nav__link">
<span class="md-ellipsis">
Logs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../user-guide/maintenance/" class="md-nav__link">
<span class="md-ellipsis">
Wartung
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../user-guide/users/" class="md-nav__link">
<span class="md-ellipsis">
Benutzer
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../user-guide/groups/" class="md-nav__link">
<span class="md-ellipsis">
Benutzergruppen & Rechte
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" checked>
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="0">
<span class="md-ellipsis">
Technik
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
Technik
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../getting-started/" class="md-nav__link">
<span class="md-ellipsis">
Getting Started
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Architektur
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Architektur
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#hauptschichten" class="md-nav__link">
<span class="md-ellipsis">
Hauptschichten
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#datenflusse" class="md-nav__link">
<span class="md-ellipsis">
Datenflüsse
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#verzeichnis-referenz" class="md-nav__link">
<span class="md-ellipsis">
Verzeichnis-Referenz
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#konfiguration-secrets" class="md-nav__link">
<span class="md-ellipsis">
Konfiguration &amp; Secrets
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#skalierung-grenzen" class="md-nav__link">
<span class="md-ellipsis">
Skalierung &amp; Grenzen
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../backend/" class="md-nav__link">
<span class="md-ellipsis">
Backend & API
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../frontend/" class="md-nav__link">
<span class="md-ellipsis">
Frontend
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../operations/" class="md-nav__link">
<span class="md-ellipsis">
Operations & Wartung
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#hauptschichten" class="md-nav__link">
<span class="md-ellipsis">
Hauptschichten
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#datenflusse" class="md-nav__link">
<span class="md-ellipsis">
Datenflüsse
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#verzeichnis-referenz" class="md-nav__link">
<span class="md-ellipsis">
Verzeichnis-Referenz
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#konfiguration-secrets" class="md-nav__link">
<span class="md-ellipsis">
Konfiguration &amp; Secrets
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#skalierung-grenzen" class="md-nav__link">
<span class="md-ellipsis">
Skalierung &amp; Grenzen
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="architektur">Architektur</h1>
<p>StackPulse folgt einer klassischen Client/Server-Architektur, bei der das Backend den Single-Source-of-Truth darstellt und das Frontend ausschließlich über wohldefinierte REST- und Socket.IO-Schnittstellen kommuniziert.</p>
<pre><code class="language-text">┌────────────┐ HTTPS + WebSocket ┌───────────────┐ HTTPS ┌────────────────┐
│ Frontend │ ─────────────────────────▶ │ Backend │ ───────────────▶ │ Portainer API │
│ (React) │ ◀───── Auth-Cookie + JSON ─ │ (Express) │ ◀─────────────── │ Business Ed. │
└────────────┘ Redeploy Events └───────────────┘ (Axios Proxy) └────────────────┘
SQLite Datenbank
</code></pre>
<h2 id="hauptschichten">Hauptschichten</h2>
<ul>
<li><strong>Frontend</strong> (Vite + Material Tailwind): stellt alle Views, Formulare, Tabellen und Echtzeit-Widgets bereit. Die <code>AuthProvider</code>-Komponente verwaltet Session, Permissions und Socket-Verbindungen.</li>
<li><strong>Backend</strong> (Express + better-sqlite3): aggregiert Daten aus Portainer, persistiert Benutzer/Gruppen/Logs, verwaltet Sessions und stößt Redeploy- sowie Wartungsprozesse an.</li>
<li><strong>Persistenz</strong> (SQLite): Datei <code>backend/data/stackpulse.db</code>, WAL-Modus aktiviert. Tabellen umfassen u. a. <code>users</code>, <code>groups</code>, <code>permissions</code>, <code>servers</code>, <code>server_api_keys</code>, <code>event_logs</code>, <code>settings</code> sowie Hilfstabellen für Tokens und Sicherheitspassphrasen.</li>
</ul>
<h2 id="datenflusse">Datenflüsse</h2>
<ol>
<li><strong>Setup-Phase</strong>: <code>/api/setup/*</code> nimmt Serverdaten entgegen, verschlüsselt API-Keys (<code>aes-256-gcm</code> via <code>PORTAINER_API_SECRET</code>) und erstellt Einträge in <code>servers</code>/<code>server_api_keys</code>.</li>
<li><strong>Authentication</strong>: <code>/api/auth/login</code> erstellt Sessions (JWT-ähnliche Tokens in Cookies), <code>AuthProvider</code> ruft <code>/api/auth/session</code> zyklisch ab und speichert Berechtigungen.</li>
<li><strong>Stack-Übersicht</strong>: Frontend ruft <code>/api/stacks</code> auf. Das Backend proxyt <code>Portainer /api/endpoints/:id/docker/stacks</code>, ergänzt Caching, interne Metadaten und liefert Redeploy-Status.</li>
<li><strong>Redeploy</strong>: UI stößt <code>/api/stacks/:id/redeploy</code>, <code>/api/stacks/redeploy-selection</code> oder <code>/api/stacks/redeploy-all</code> an. Das Backend ruft Portainer-Endpoints, protokolliert Events und broadcastet Fortschritt via Socket.IO <code>redeployStatus</code>.</li>
<li><strong>Logging</strong>: Jeder relevante Vorgang erzeugt Einträge in <code>event_logs</code> (siehe <code>logging/eventLogs.js</code>). Frontend filtert/paginiert über <code>/api/logs</code> und kann Exporte <code>/api/logs/export</code> herunterladen.</li>
<li><strong>Wartung</strong>: <code>/api/maintenance/*</code> verwaltet Maintenance-Mode, SSH-Zugänge, Update-Skripte und serverseitige Settings (<code>db/settings.js</code>).</li>
</ol>
<h2 id="verzeichnis-referenz">Verzeichnis-Referenz</h2>
<table>
<thead>
<tr>
<th>Pfad</th>
<th>Inhalt</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>backend/index.js</code></td>
<td>Herzstück der API inkl. Routing, Socket.IO, Redeploy, Setup, Auth.</td>
</tr>
<tr>
<td><code>backend/auth/</code></td>
<td>Superuser-Verwaltung, Passwort- und Tokenfunktionen, Sicherheitsphrasen.</td>
</tr>
<tr>
<td><code>backend/db/</code></td>
<td>SQLite-Initialisierung (<code>ensure.js</code>/<code>schemaEnsure.js</code>), Settings-Layer, DB-Blueprints.</td>
</tr>
<tr>
<td><code>backend/logging/</code></td>
<td>Event-Log Modellierung, Filter/Export/Delete.</td>
</tr>
<tr>
<td><code>backend/groups/</code>, <code>backend/users/</code>, <code>backend/permissions/</code></td>
<td>Domain-Logik für Benutzer- &amp; Rechteverwaltung.</td>
</tr>
<tr>
<td><code>backend/maintenance/</code></td>
<td>Maintenance-Mode sowie SSH-/Update-Konfiguration.</td>
</tr>
<tr>
<td><code>frontend/src/</code></td>
<td>React-App (Layouts, Pages, Widgets, Provider). <code>routes.jsx</code> definiert Navigation &amp; Permissions.</td>
</tr>
<tr>
<td><code>scripts/</code></td>
<td>Hilfsskripte (z.B. <code>start-dev.sh</code>).</td>
</tr>
<tr>
<td><code>Dockerfile</code>, <code>docker-compose*.yml</code></td>
<td>Build- &amp; Deployment-Spezifikation.</td>
</tr>
</tbody>
</table>
<h2 id="konfiguration-secrets">Konfiguration &amp; Secrets</h2>
<ul>
<li>API-Keys und Passwörter werden verschlüsselt in SQLite abgelegt (<code>server_api_keys</code>, <code>settings</code>).</li>
<li>Settings (Maintenance, Update-Skripte, SSH) nutzen <code>db/settings.js</code> mit JSON-Serialisierung.</li>
<li>Das Backend erzwingt HTTPS-Requests Richtung Portainer (<code>https.Agent</code> mit deaktivierter Zertifikatsprüfung für interne Netze).</li>
<li>Socket.IO lauscht auf demselben Port wie Express (<code>/socket.io</code>). CORS ist aktuell für alle Origins offen für produktive Deployments empfiehlt sich ein Reverse Proxy mit Authentifizierung.</li>
</ul>
<h2 id="skalierung-grenzen">Skalierung &amp; Grenzen</h2>
<ul>
<li>SQLite eignet sich für Einzelinstanzen. Für höhere Last empfiehlt sich eine Umstellung auf Postgres/MySQL (der Code kapselt Zugriffe weitgehend in <code>db/*</code>).</li>
<li>Redeploy-Operationen werden seriell behandelt (<code>redeployingStacks</code> + Status-Caching). Parallele Ausführung ist möglich, solange Portainer dies unterstützt.</li>
<li>Logging wird ausschließlich serverseitig betrieben; Client-seitige Filterung erfolgt über Query-Parameter.</li>
</ul>
<p>Die weiteren Kapitel vertiefen Backend- und Frontend-spezifische Details.</p>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"annotate": null, "base": "..", "features": [], "search": "../assets/javascripts/workers/search.7a47a382.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
<script src="../assets/javascripts/bundle.e71a0d61.min.js"></script>
</body>
</html>