Statische Seiten mit nginx im Docker

Mit nginx kannst du sehr effizient statische Webseiten (HTML, CSS, JavaScript) direkt aus einem Docker-Container bereitstellen. Das ist besonders praktisch für gebaute Frontends wie React-Apps oder einfache Webseiten, die nicht auf Node.js angewiesen sind.

Grundprinzip

Das offizielle nginx-Image erwartet die zu servierenden Dateien im Ordner /usr/share/nginx/html im Container.
Du kannst entweder lokale Dateien beim Containerstart einbinden (Volume-Mount) oder die statische Seite direkt in ein eigenes Image kopieren.

Beispiel 1: Lokale Dateien einbinden (Development)

docker run --name mein-nginx -p 8080:80 -v $(pwd)/public:/usr/share/nginx/html:ro nginx

Das lokale Verzeichnis public wird im Container bereitgestellt (read-only).
Aufruf im Browser: http://localhost:8080

Beispiel 2: Eigene statische Seite ins Image bauen

FROM nginx:alpine
COPY ./public /usr/share/nginx/html
EXPOSE 80

Die Seite wird fest in das Image eingebaut.

Konfiguration anpassen (optional)

Durch eine eigene nginx-Konfigurationsdatei (nginx.conf) kannst du z.B. Weiterleitungen, Caching oder spezielle Fehlerseiten steuern.
Diese Datei kann beim Build übergeben oder beim Run gemountet werden.

Aufgabe

Erstelle im lokalen Ordner public eine einfache index.html mit beliebigem Inhalt.

Starte einen nginx-Container und binde das Verzeichnis ein:

docker run --name static-nginx -p 8081:80 -v $(pwd)/public:/usr/share/nginx/html:ro nginx

Öffne http://localhost:8081 und prüfe die Anzeige deiner Seite.
Ändere die index.html und lade die Seite im Browser neu. Beobachte, wie schnell die Änderung verfügbar ist.
Optional: Baue ein eigenes Image mit dem obigen Dockerfile und teste die Auslieferung.

Zusatz:
Was sind die Vorteile von Volumes (Bind-Mounts) im Vergleich zum Kopieren der Daten ins Image?

Im nächsten Kapitel wird gezeigt, wie Volumes genutzt werden, um Daten in Datenbank-Containern wie MongoDB dauerhaft zu speichern.