Bereitstellung einer Web-Application mit Docker

Dokumentation: Flashcard App mit Docker auf Synology NAS

Diese Anleitung beschreibt, wie Sie eine Flask-basierte Flashcard Web App in einem Docker-Container auf Ihrem Synology NAS bereitstellen. Die App wurde zunächst als Python-Skript entwickelt und dann mithilfe von Tools wie Google Gemini in eine Webanwendung umgewandelt.

Voraussetzungen

• Ein funktionierendes Synology NAS mit installiertem Docker (Container Manager).
• Docker Desktop (oder Docker Engine) auf Ihrem lokalen Entwicklungsrechner.
• Python 3.x und Pip auf Ihrem lokalen Entwicklungsrechner.
• Eine bestehende Flask-Flashcard-App, die mindestens eine app.py-Datei, eine qa.csv (für Fragen/Antworten) und einen templates-Ordner mit index.html enthält.

Schritt-für-Schritt Anleitung

Schritt 1: Vorbereitung der Anwendungsdateien

Flashcard App

Erstellen Sie auf Ihrem lokalen Entwicklungsrechner ein Verzeichnis (z.B. C:\Users\IhrBenutzername\flashcard). In diesem Verzeichnis müssen sich folgende Dateien und Ordner befinden:

• app.py: Ihre Flask-Anwendung (die Hauptdatei, die Ihre Flashcard-Logik enthält).
• qa.csv: Die Datei, die Ihre Fragen und Antworten für die Flashcards enthält.
• templates/: Ein Ordner, der Ihre HTML-Vorlagen enthält, insbesondere index.html.
• requirements.txt: Eine Textdatei, die alle Python-Abhängigkeiten auflistet.
• Dockerfile: Eine Datei ohne Dateiendung, die die Anweisungen zum Bauen des Docker-Images enthält.

1.1. requirements.txt erstellen

Erstellen Sie im Hauptverzeichnis der App eine Datei namens requirements.txt mit folgendem Inhalt:

<code>Flask==2.2.5
gunicorn==20.1.0
</code>

Hinweis: Ich habe Gunicorn direkt hier hinzugefügt, da es ein Produktions-Webserver ist, der später im Dockerfile verwendet wird.

1.2. Dockerfile erstellen

Erstellen Sie im Hauptverzeichnis der App eine Datei namens Dockerfile (ohne Dateiendung) mit folgendem Inhalt:

<code class="language-dockerfile"># Basis-Image: Offizielles Python 3.10 mit Alpine Linux für eine schlanke Größe
FROM python:3.10-alpine

# Setze das Arbeitsverzeichnis im Container
WORKDIR /app

# Kopiere die Abhängigkeitsdatei und installiere die Pakete
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# Kopiere den Rest des Anwendungscodes in das Arbeitsverzeichnis
# Wichtig: 'qa.csv' und der 'templates' Ordner müssen hier sein!
COPY . .

# Setze die Umgebungsvariable PORT (Standard ist 5000, Synology NAS mag das oft)
ENV PORT 5000

# Exponiere den Port, auf dem die App im Container laufen wird
EXPOSE 5000

# Der Befehl zum Starten der Anwendung mit Gunicorn
# -w 4: 4 Worker-Prozesse (passend für die meisten NAS-CPUs)
# app:app: Verweist auf die Flask-Anwendung 'app' im Modul 'app.py' (Dateiname: app.py, Flask-App-Instanz: app)
CMD ["gunicorn", "--bind", "0.0.0.0:5000", "app:app"]
</code>

2. Docker-Image auf dem lokalen Rechner bauen

Öffnen Sie PowerShell oder CMD auf Ihrem lokalen Rechner und navigieren Sie in das Verzeichnis Ihrer Flashcard-App (z.B. C:\Users\IhrBenutzername\flashcard).

Führen Sie den folgenden Befehl aus, um Ihr Docker-Image zu bauen:

<code>docker build -t flashcardweb .
</code>

Dieser Befehl erstellt ein Docker-Image mit dem Namen flashcardweb (und dem Tag latest). Sie sollten eine ähnliche Ausgabe wie diese sehen (die genauen Zeiten und Hashes können abweichen):

<code>[+] Building 0.5s (11/11) FINISHED                                        docker:desktop-linux
  => [internal] load build definition from Dockerfile                                   0.0s
  => => transferring dockerfile: 932B                                                  0.0s
  => [internal] load metadata for docker.io/library/python:3.10-alpine                  0.2s
  => [internal] load .dockerignore                                                      0.0s
  => => transferring context: 2B                                                        0.0s
  => [1/6] FROM docker.io/library/python:3.10-alpine@sha256:24cab748bf7bd8e3d2f9bb4e5771f17b628417527a4e1f2c59c370c2a8a27f1c     0.0s
  => => resolve docker.io/library/python:3.10-alpine@sha256:24cab748bf7bd8e3d2f9bb4e5771f17b628417527a4e1f2c59c370c2a8a27f1c     0.0s
  => [internal] load build context                                                      0.0s
  => => transferring context: 211B                                                      0.0s
  => CACHED [2/6] WORKDIR /app                                                          0.0s
  => CACHED [3/6] COPY requirements.txt .                                               0.0s
  => CACHED [4/6] RUN pip install --no-cache-dir -r requirements.txt                    0.0s
  => CACHED [5/6] RUN pip install gunicorn                                              0.0s
  => CACHED [6/6] COPY . .                                                              0.0s
  => exporting to image                                                                 0.1s
  => => exporting layers                                                                0.0s
  => => exporting manifest sha256:5ed199286febabe64f060f688af7bea9ab50e73a61c5e76099f2fcdbe59665ad      0.0s
  => => exporting config sha256:1263c722bc6cf05333b2b391d4aa84d5b865a04a6a73d817b0a9eecf6dcec403      0.0s
  => => exporting attestation manifest sha256:e1eaf5857e98988ceda6d5c3fcdff7cbc527b8ad94f86c5ccf71c3d2b71cec8c      0.0s
  => => exporting manifest list sha256:b6e73f808191ecfd8c68bacd8fe6d1e3401718d82fdc667864eae6122533d18e      0.0s
  => => naming to docker.io/library/flashcardweb:latest                                 0.0s
  => => unpacking to docker.io/library/flashcardweb:latest                               0.0s

  1 warning found (use docker --debug to expand):
  - LegacyKeyValueFormat: "ENV key=value" should be used instead of legacy "ENV key value" format (line 19)
  </code>

3. Docker-Image als TAR-Datei exportieren

Um das Image auf Ihr Synology NAS zu übertragen, exportieren Sie es als TAR-Datei:

<code>docker save flashcardweb -o flashcardweb.tar
  </code>

Dies erstellt die Datei flashcardweb.tar in Ihrem aktuellen Verzeichnis.

4. Vorbereitung auf dem Synology NAS

4.1. Ordnerstruktur erstellen und Dateien hochladen

Erstellen Sie auf Ihrem Synology NAS einen Ordner für Ihre Anwendung, z.B.: /volume1/docker/flashcard.

Kopieren Sie alle Anwendungsdateien (app.py, qa.csv, templates/, requirements.txt, Dockerfile) und die exportierte flashcardweb.tar-Datei in diesen Ordner auf Ihrem Synology NAS.

4.2. Docker-Image im Container Manager importieren

1. Melden Sie sich bei Ihrer Synology DSM-Oberfläche an und öffnen Sie den Container Manager (früher Docker).
2. Gehen Sie zu Bild (Images).
3. Klicken Sie auf Hinzufügen (oder Importieren) und wählen Sie Aus Datei importieren.
4. Navigieren Sie zu dem Ordner, in den Sie die flashcardweb.tar hochgeladen haben (/volume1/docker/flashcard), und wählen Sie die Datei aus.
5. Der Container Manager sollte nun das Image importieren. Nach Abschluss sollte es in Ihrer Liste der Bilder erscheinen.

5. Container im Container Manager anlegen

Nachdem das Image importiert wurde, können Sie den Container erstellen:

1. Im Container Manager gehen Sie zu Container und klicken Sie auf Erstellen.
2. Wählen Sie Ihr eben importiertes Image flashcardweb:latest aus.
3. Container-Namen festlegen: Geben Sie einen aussagekräftigen Namen für Ihren Container ein, z.B. flashcard-app.
4. Port-Einstellungen: Gehen Sie zum Abschnitt Port-Einstellungen.
   • Der Container-Port ist 5000 (wie im Dockerfile definiert).
   • Weisen Sie einen freien Lokalen Port auf Ihrem Synology NAS zu. Wählen Sie einen Port, der nicht von anderen Diensten genutzt wird, z.B. 10001.

   Wichtig: Stellen Sie sicher, dass das Port-Mapping korrekt ist, z.B. 5000 (Container) -> 10001 (Lokal/NAS).

5. Volume-Einstellungen (optional, aber empfohlen): Wenn Ihre App persistente Daten benötigt (z.B. wenn qa.csv bearbeitet oder andere Daten gespeichert werden sollen), können Sie einen freigegebenen Ordner des NAS in den Container mounten.
   • Fügen Sie einen Ordner (z.B. /volume1/docker/flashcard/data) von Ihrem NAS als Mount-Punkt im Container (z.B. /app/data) hinzu.
6. Überprüfen Sie alle Einstellungen und klicken Sie auf Weiter und dann auf Fertig, um den Container zu erstellen und zu starten.

6. Einrichtung eines Reverse-Proxys (optional, aber empfohlen)

Um Ihre Flashcard-App über einen benutzerfreundlichen URL und eventuell mit HTTPS zu erreichen, richten Sie einen Reverse-Proxy ein:

1. Gehen Sie in der DSM-Oberfläche zu Systemsteuerung > Anmeldeportal > Erweitert > Reverse-Proxy.
2. Klicken Sie auf Erstellen.
3. Regel erstellen:
   Allgemein:
   • Beschreibung: Flashcard App

        Quelle:
   

   • Protokoll: HTTPS (empfohlen)
   • Hostname: Ihr gewünschter Domainname (z.B. flashcards.ihredomain.de)
   • Port: 443 (Standard-HTTPS-Port)

        Ziel:
   

   • Protokoll: HTTP
   • Hostname: localhost (da der Container auf dem NAS läuft)
   • Port: Der lokale Port, den Sie im Container Manager zugewiesen haben (z.B. 10001)
4. Speichern Sie die Reverse-Proxy-Regel. Stellen Sie sicher, dass für Ihre Domain ein DNS-Eintrag auf die IP-Adresse Ihres Synology NAS verweist.

Et Voila!

Ihre Flashcard App sollte nun über die konfigurierte URL (z.B. https://flashcards.ihredomain.de) erreichbar sein.

Bei Problemen überprüfen Sie die Container-Protokolle im Container Manager und die Reverse-Proxy-Einstellungen.