Files
stackpulse/getting-started/index.html
T

1120 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
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="../user-guide/groups/">
<link rel="next" href="../architecture/">
<link rel="icon" href="../assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.7.0">
<title>Getting Started - 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="#getting-started" 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">
Getting Started
</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 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">
Getting Started
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Getting Started
</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="#voraussetzungen" class="md-nav__link">
<span class="md-ellipsis">
Voraussetzungen
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#repository-abhangigkeiten" class="md-nav__link">
<span class="md-ellipsis">
Repository &amp; Abhängigkeiten
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#lokale-dev-umgebung" class="md-nav__link">
<span class="md-ellipsis">
Lokale Dev-Umgebung
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#manuelles-starten" class="md-nav__link">
<span class="md-ellipsis">
Manuelles Starten
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#zentrale-umgebungsvariablen" class="md-nav__link">
<span class="md-ellipsis">
Zentrale Umgebungsvariablen
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#ersteinrichtung-im-ui" class="md-nav__link">
<span class="md-ellipsis">
Ersteinrichtung im UI
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#docker-deployment" class="md-nav__link">
<span class="md-ellipsis">
Docker-Deployment
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#datenbank-migration" class="md-nav__link">
<span class="md-ellipsis">
Datenbank &amp; Migration
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../architecture/" class="md-nav__link">
<span class="md-ellipsis">
Architektur
</span>
</a>
</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="#voraussetzungen" class="md-nav__link">
<span class="md-ellipsis">
Voraussetzungen
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#repository-abhangigkeiten" class="md-nav__link">
<span class="md-ellipsis">
Repository &amp; Abhängigkeiten
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#lokale-dev-umgebung" class="md-nav__link">
<span class="md-ellipsis">
Lokale Dev-Umgebung
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#manuelles-starten" class="md-nav__link">
<span class="md-ellipsis">
Manuelles Starten
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#zentrale-umgebungsvariablen" class="md-nav__link">
<span class="md-ellipsis">
Zentrale Umgebungsvariablen
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#ersteinrichtung-im-ui" class="md-nav__link">
<span class="md-ellipsis">
Ersteinrichtung im UI
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#docker-deployment" class="md-nav__link">
<span class="md-ellipsis">
Docker-Deployment
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#datenbank-migration" class="md-nav__link">
<span class="md-ellipsis">
Datenbank &amp; Migration
</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="getting-started">Getting Started</h1>
<p>Dieser Leitfaden hilft dir, StackPulse lokal oder als Container aufzusetzen und die ersten Schritte im UI abzuschließen.</p>
<h2 id="voraussetzungen">Voraussetzungen</h2>
<ul>
<li>Node.js <strong>&gt;= 20</strong> und npm für lokale Entwicklung</li>
<li>Docker &amp; Docker Compose (optional aber empfohlen für Deployment)</li>
<li>Zugriff auf eine <strong>Portainer Business Edition</strong> samt API-Key</li>
<li>Shell-Zugang zum Host, auf dem StackPulse laufen soll</li>
</ul>
<h2 id="repository-abhangigkeiten">Repository &amp; Abhängigkeiten</h2>
<pre><code class="language-bash"># Repository klonen
# git clone &lt;repo-url&gt;
cd stackpulse
# Skript ausführbar machen
chmod +x scripts/start-dev.sh
</code></pre>
<h2 id="lokale-dev-umgebung">Lokale Dev-Umgebung</h2>
<p>Das Skript <code>scripts/start-dev.sh</code> richtet Backend und Frontend automatisch ein:</p>
<ol>
<li>Backend: <code>npm install</code>, <code>npm run migrate</code> (erstellt/aktualisiert <code>backend/data/stackpulse.db</code>), <code>npm start</code></li>
<li>Frontend: <code>npm install</code>, <code>npm run dev</code> (Port 5173) und ein einmaliges <code>npm run build</code>, um statische Assets ins Backend zu spiegeln</li>
</ol>
<p>Nach erfolgreichem Start:
- Frontend dev server: http://localhost:5173
- Backend API &amp; statische Assets: http://localhost:4001</p>
<p>Zum Stoppen STRG+C verwenden.</p>
<h2 id="manuelles-starten">Manuelles Starten</h2>
<pre><code class="language-bash"># Backend
cd backend
npm install
npm run migrate
PORTAINER_URL=https://portainer.local npm start
# Frontend in zweiter Shell
cd frontend
npm install
npm run dev
</code></pre>
<p>Das Backend liest Umgebungsvariablen beim Start. Alternativ kannst du eine <code>.env</code> neben <code>backend/index.js</code> anlegen.</p>
<h2 id="zentrale-umgebungsvariablen">Zentrale Umgebungsvariablen</h2>
<table>
<thead>
<tr>
<th>Variable</th>
<th>Beschreibung</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>PORTAINER_URL</code></td>
<td>Basis-URL zu deiner Portainer-Instanz (inkl. Protokoll). Kann später im Setup-UI überschrieben werden.</td>
</tr>
<tr>
<td><code>PORTAINER_API_KEY</code></td>
<td>API-Key für Portainer. Wird in der DB verschlüsselt abgelegt, sobald du ihn im Setup speicherst.</td>
</tr>
<tr>
<td><code>PORTAINER_SERVER_NAME</code></td>
<td>Optionaler Anzeigename für den Server während des Setups.</td>
</tr>
<tr>
<td><code>PORTAINER_API_SECRET</code></td>
<td>Überschreibt den Schlüssel, der zur Verschlüsselung des API-Keys verwendet wird.</td>
</tr>
<tr>
<td><code>SUPERUSER_USERNAME</code>, <code>SUPERUSER_EMAIL</code>, <code>SUPERUSER_PASSWORD</code></td>
<td>Legt einen Superuser automatisch beim Start an (falls nicht vorhanden).</td>
</tr>
<tr>
<td><code>SELF_STACK_ID</code></td>
<td>Stack-ID von StackPulse selbst. Wird genutzt, um eigene Redeploys zu blockieren.</td>
</tr>
<tr>
<td><code>AUTH_COOKIE_NAME</code>, <code>AUTH_SESSION_TTL_MS</code>, <code>AUTH_COOKIE_SECURE</code></td>
<td>Feintuning für die Session-Verwaltung der API.</td>
</tr>
<tr>
<td><code>SECURITY_PHRASE_SECRET</code></td>
<td>Seed für die Generierung kryptografischer Sicherheitsphrasen.</td>
</tr>
<tr>
<td><code>PORTAINER_SSH_SECRET</code></td>
<td>Secret für SSH-Passwortverschlüsselung (Wartungs-Update).</td>
</tr>
<tr>
<td><code>DISPLAY</code></td>
<td>Wird an Kindprozesse weitergereicht, wenn Portainer-Updates ausgelöst werden müssen (Default <code>:9999</code>).</td>
</tr>
</tbody>
</table>
<p>Weitere Einstellungen (SSH-Config, Update-Skripte) verwaltest du später direkt im Maintenance-Bereich des UI.</p>
<h2 id="ersteinrichtung-im-ui">Ersteinrichtung im UI</h2>
<ol>
<li>Öffne das Frontend (<code>/setup</code> führt dich automatisch durch den Wizard).</li>
<li>Lege den Portainer-Server und den zugehörigen API-Key an StackPulse testet die Verbindung per <code>/api/setup/test-portainer</code>.</li>
<li>Registriere einen Superuser oder verwende den per Umgebungsvariablen automatisch angelegten Account.</li>
<li>Nach erfolgreicher Einrichtung kannst du dich anmelden und erhältst Zugriff auf Dashboard, Logs, Benutzer &amp; Wartung.</li>
</ol>
<h2 id="docker-deployment">Docker-Deployment</h2>
<pre><code class="language-yaml"># docker-compose.yml (Auszug)
services:
app:
build:
context: .
dockerfile: Dockerfile
ports:
- &quot;4001:4001&quot;
volumes:
- stackpulse_data:/app/backend/data
restart: unless-stopped
environment:
- PORTAINER_URL=https://portainer.example.com
- PORTAINER_API_KEY=xxxx
- SUPERUSER_USERNAME=admin
- SUPERUSER_EMAIL=admin@example.com
- SUPERUSER_PASSWORD=changeme
- SELF_STACK_ID=123
volumes:
stackpulse_data:
</code></pre>
<ol>
<li><code>docker compose up -d --build</code></li>
<li>Das Frontend ist anschließend unter Port 4001 (via Backend <code>public/</code>) erreichbar.</li>
<li>Datenbank &amp; Einstellungen liegen im benannten Volume <code>stackpulse_data</code>.</li>
</ol>
<h2 id="datenbank-migration">Datenbank &amp; Migration</h2>
<ul>
<li>Datei: <code>backend/data/stackpulse.db</code></li>
<li>Migration: <code>npm run migrate</code> (führt <code>backend/db/ensure.js</code> aus und erzeugt Schema, Rechte, Defaults)</li>
<li>Backup: Datei oder Volume regelmäßig sichern; enthält Benutzer, Logs und gespeicherte Secrets.</li>
</ul>
<p>Damit bist du bereit für die tieferen Kapitel zu Architektur sowie Backend- und Frontend-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>