U17 — Erste Flask-App auf dem Port

Ziel dieser Übung

Aus Ihrem Python wird eine echte Web-Anwendung: Sie schreiben die App lokal, bringen sie per Git auf den Server, starten sie dort und rufen sie im Browser unter /app/ auf.

Leitprinzip für diese Übung:
lokal Auf dem Laptop wird nur geschrieben (Dateien anlegen/ändern) und gepusht.
server Auf dem Server wird alles installiert, gestartet und getestet.
So gibt es nur eine Umgebung zum Ausführen — keine Verwirrung, kein Python/Flask auf dem Laptop nötig.

Voraussetzungen: u16 (Python-Grundlagen) abgeschlossen, Workflow aus u12 sitzt.

Schritte im Überblick

1app.py + .gitignore lokal anlegen
2im Forgejo-GUI prüfen
3Server: venv + Flask installieren
4App starten & im Browser öffnen
5Ändern → push → neu starten
Schritt 1 — App lokal schreiben

lokal app.py anlegen

Legen Sie in VS Code eine Datei app.py an. Ersetzen Sie ## durch Ihre Raumnummer (z. B. isa07 → Port 9007):

from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return "Hallo aus meiner Flask-App!" if __name__ == "__main__": app.run(host="0.0.0.0", port=90##) # 90 + Raumnummer

lokal .gitignore anlegen

Die spätere virtuelle Umgebung soll nicht ins Repo. Legen Sie eine Datei .gitignore an (falls noch nicht vorhanden) mit der Zeile:

venv/

Beide Dateien: Stage → Commit (Flask-App angelegt) → Sync.

git Schritt 2 — im GUI prüfen

Auf git.md-phw.de: Ist app.py im Repo angekommen?

Schritt 3 — Server vorbereiten (einmalig)

server venv erstellen & Flask installieren

ssh -p 2222 isa##@edumake.de cd ~/public_html ls # app.py da? (Auto-Deploy) python3 -m venv venv # virtuelle Umgebung erstellen source venv/bin/activate # aktivieren -> (venv) erscheint pip install flask # Flask in die venv installieren
Was ist eine venv? Eine virtuelle Umgebung ist ein eigener, abgetrennter „Werkzeugkasten“ nur für dieses Projekt. Flask wird dort hinein installiert — getrennt vom Rest des Systems, damit es keine Konflikte gibt. Die venv lebt nur auf dem Server (sie steht in der .gitignore).

Diesen Schritt machen Sie nur einmal. Zum Verlassen der venv später: deactivate.

Schritt 4 — App starten & im Browser öffnen

server App starten

Die venv ist aktiv ((venv) steht vorne). Starten Sie die App:

python3 app.py

Es erscheint u. a. Running on http://0.0.0.0:90##. Lassen Sie das Terminal offen — solange läuft die App.

Was ist ein Port? Ihre Adresse isa##.edumake.de ist wie ein Haus. Ein Port ist eine bestimmte Tür an diesem Haus. Hinter einer Tür wohnt Ihre statische Seite, hinter einer anderen (Port 90##) Ihre Flask-App. Damit Besucher die richtige Tür nicht kennen müssen, leitet der Server /app/ automatisch zur Flask-Tür weiter.

server kurz testen (im Server-Terminal)

Öffnen Sie ein zweites SSH-Fenster (das erste läuft ja) und prüfen Sie direkt auf dem Server:

curl http://localhost:90##
Hallo aus meiner Flask-App!

git / server im Browser öffnen

Rufen Sie im Browser auf:

https://isa##.edumake.de/app/

Sie sehen Ihre Flask-Antwort. Ihre statische Seite bleibt weiterhin unter https://isa##.edumake.de/ erreichbar.

Schritt 5 — Änderung üben (der ganze Workflow)

lokal Text ändern

Ändern Sie in app.py den Rückgabetext, z. B.:

return "Willkommen in unserem Escape Room!"

Stage → Commit (Begruessungstext geaendert) → Sync.

server neu starten

Auto-Deploy bringt die neue app.py auf den Server. Im Terminal, in dem die App läuft:

# App stoppen: Strg + C git pull # neueste app.py sofort holen python3 app.py # neu starten

Browser neu laden (Hard Reload Strg/Cmd + Shift + R) → neuer Text.

Hinweis: Die App läuft nur, solange das SSH-Terminal offen ist. Wie man sie dauerhaft im Hintergrund laufen lässt, kommt in einer späteren Sitzung.

Für Schnellere