Wie diese Website zu dir kommt: NAS, Docker, Cloudflare und Tailscale

Viele Websites laufen auf großen Cloud-Plattformen wie AWS, Vercel oder Hetzner. Diese Website hier läuft auf einem NAS in meinem Heimnetzwerk — und trotzdem ist sie weltweit erreichbar. In diesem Post erkläre ich, wie das technisch funktioniert und welche Komponenten zusammenspielen.

Der Stack im Überblick

Browser → Cloudflare Tunnel → Docker Container → Astro Website
                                      ↕
                              Tailscale (für mich)

Jede Komponente hat eine klare Aufgabe. Schauen wir sie uns einzeln an.

Das NAS: Ugreen als Heimserver

Das Fundament ist ein Ugreen NAS (Network Attached Storage). Das ist primär ein Gerät zum Speichern von Dateien im Heimnetzwerk — aber moderne NAS-Systeme sind kleine Linux-Server mit Docker-Unterstützung.

Mein Ugreen NAS läuft mit einem x86-Prozessor und genug RAM, um mehrere Docker Container gleichzeitig zu betreiben. Das macht ihn zum perfekten kleinen Homelab-Server: stromsparend, leise, immer an.

Der Vorteil gegenüber Cloud-Hosting: null laufende Kosten für Rechenleistung. Einmal angeschafft, läuft er einfach.

Docker: Die Website als Container

Die Website läuft als Docker Image auf dem NAS. Docker ist eine Technologie zur Containerisierung von Anwendungen — statt die Website direkt auf dem System zu installieren, verpacke ich sie mit allem was sie braucht in einen isolierten Container.

Das hat mehrere Vorteile:

Portierbarkeit: Das Image läuft auf jedem System mit Docker, egal ob NAS, Laptop oder Cloud-Server
Isolation: Die Website hat keinen Zugriff auf den Rest des Systems
Einfaches Update: Neues Image bauen, alten Container stoppen, neuen starten — fertig

Das Docker Image für diese Website ist simpel: ein kleiner Nginx-Webserver, der die statisch gebauten Astro-Dateien ausliefert.

Cloudflare Tunnel: Öffentlich erreichbar ohne offene Ports

Das ist die clevere Lösung für das Problem “Heimnetzwerk = keine feste IP, kein offener Port”.

Normalerweise bräuchte man für eine öffentliche Website:

Eine feste öffentliche IP-Adresse
Einen offenen Port im Router (Portforwarding)
Ein SSL-Zertifikat

Mit einem Cloudflare Tunnel brauche ich das alles nicht. Stattdessen:

Ein kleiner cloudflared-Daemon läuft als Docker Container auf dem NAS
Er baut eine ausgehende Verbindung zu Cloudflares Netzwerk auf
Cloudflare leitet Anfragen an stagl.systems durch diesen Tunnel zu meinem Container

Die Verbindung geht also von innen nach außen — mein Router muss keine eingehenden Verbindungen erlauben. Das ist sicherer und einfacher. Cloudflare übernimmt außerdem automatisch SSL/TLS, also ist die Verbindung immer verschlüsselt.

Wichtig: Der Tunnel ist nur für den Website-Container konfiguriert. Nichts anderes auf dem NAS ist über diesen Weg erreichbar.

Tailscale: Sicherer Fernzugriff für mich

Für meinen eigenen Zugriff auf das NAS — zum Beispiel um neue Blog Posts hochzuladen oder Container neu zu starten — nutze ich Tailscale.

Tailscale ist ein VPN auf Basis von WireGuard, das besonders einfach zu bedienen ist. Ich habe es auf drei Geräten installiert:

Meinem Laptop
Meinem Smartphone
Dem NAS selbst

Alle drei Geräte bilden ein privates Netzwerk (ein sogenanntes “Tailnet”). Egal wo ich bin — im Café, im Zug, im Ausland — mein Laptop kann das NAS ansprechen als wäre es im selben Heimnetzwerk. Verschlüsselt, sicher, ohne öffentliche Ports.

Die Website selbst: Astro + Tailwind + React

Die Website ist mit Astro gebaut. Astro ist ein modernes Web-Framework, das für schnelle, SEO-freundliche Websites optimiert ist. Das Besondere: Astro rendert die Seiten standardmäßig statisch — der Browser bekommt fertiges HTML, kein JavaScript-Bundle das erst alles aufbaut.

Das ist ideal für einen Blog:

Schnelle Ladezeiten: Statische HTML-Seiten sind blitzschnell
Gutes SEO: Suchmaschinen können den Inhalt direkt lesen
Wenig Komplexität: Kein Server nötig, einfache Nginx-Auslieferung reicht

Für die Gestaltung nutze ich Tailwind CSS — ein Utility-First CSS Framework, mit dem man direkt im HTML stylen kann. Und für interaktive Komponenten kann ich React einbetten, wo es nötig ist.

Meine Blog Posts schreibe ich als MDX-Dateien: das ist Markdown (einfache Textformatierung) kombiniert mit der Möglichkeit, React-Komponenten einzubetten. So kann ich zum Beispiel interaktive Diagramme direkt in einen Artikel integrieren.

Claude Code unterstützt mich beim Entwickeln. Der KI-Assistent hilft mir beim Schreiben von Code, beim Debuggen und — wie hier — beim Verfassen von Blog Posts.

Das Gesamtbild

Jede Komponente löst ein konkretes Problem:

Komponente	Problem	Lösung
Ugreen NAS	Wo läuft die Website?	Heimserver, stromsparend
Docker	Wie wird deployed?	Isolierter Container
Cloudflare Tunnel	Wie ist sie öffentlich?	Ausgehender Tunnel, kein offener Port
Tailscale	Wie komme ich ran?	Privates VPN-Netz
Astro	Wie ist sie gebaut?	Statisches HTML, SSR-fähig

Das Schöne daran: Die laufenden Kosten beschränken sich auf die Cloudflare-Domain (~12€/Jahr) und etwas Strom für das NAS. Keine monatlichen Serverrechnungen.

Ausblick

Im nächsten Post teile ich meine Erfahrungen mit verschiedenen KI-Coding-Assistenten: Aider, Claude Code, OpenCode und dem Pi Coding Agent. Jedes Tool hat seine Stärken — und ich habe sie alle im echten Einsatz ausprobiert.