Material — Vorschau Von null zur laufenden Web-App

Zum Mitnehmen

Skripte, Vorlagen und Handbuchseiten

Jede Datei nennt, wofür sie da ist und wo im Kurs sie gebraucht wird.

Serverprüfung

Skript · check.sh · 14 kB

Ein Befehl, eine Antwort: prüft den Server in Sekunden und ändert nichts. Die Ausgabe reichen Sie in Station 03 ein — daraus werden Ihre Prüflistenhaken.

sudo bash check.sh

Station 04 · Server einrichtenMit Zugang herunterladen

Server einrichten

Skript · bootstrap.sh · 23 kB

Vom bestellten Server zur fertigen Umgebung — Benutzer, Firewall, Docker, Coolify. Darf beliebig oft laufen.

sudo bash bootstrap.sh

Station 04 · Server einrichtenMit Zugang herunterladen

Arbeitsplatz einrichten

Skript · arbeitsplatz.sh · 12 kB

Richtet den eigenen Rechner ein: Editor, Git, Node, Docker, Schlüssel. Der Start von Station 01.

bash arbeitsplatz.sh

Station 01 · GrundwerkzeugeMit Zugang herunterladen

Auf einen Rechner im Haus bringen

Skript · mitnehmen.sh · 12 kB

Bringt dieselbe Anwendung auf eine Maschine im Firmennetz: überträgt den Quellcode ohne Geheimnisse, baut drüben aus demselben Dockerfile und startet sie so, dass sie einen Neustart übersteht. Darf beliebig oft laufen — der zweite Lauf ist zugleich das Einspielen von Änderungen.

bash mitnehmen.sh --ziel benutzer@rechner --nur-pruefen

Station 01 · Auf einen Rechner im HausMit Zugang herunterladen

Schlüssel sichern

Skript · schluessel-sichern.sh · 6 kB

Legt eine verschlüsselte Kopie Ihrer Zugangsschlüssel an. Der Schritt, den man erst vermisst, wenn der Rechner weg ist.

bash schluessel-sichern.sh

Station 04 · VorbereitungMit Zugang herunterladen

.env-Vorlage

Vorlage · env.example.txt · 1 kB

Alle Werte, die eine Anwendung zum Laufen braucht, mit Erklärung — die Vorlage, aus der Ihre eigene .env entsteht.

Station 05 · Wo die Daten liegenMit Zugang herunterladen

Handbuch der Skripte

Handbuch · bootstrap-README.md · 15 kB

Was jedes der fünf Skripte tut, welche Maschine es anfasst, in welcher Reihenfolge sie laufen und was zu tun ist, wenn eines abbricht.

Station 04 · Server einrichtenMit Zugang herunterladen

Zustandsbild: Ein Deploy — und was dabei stockt

Diagramm · deploy-stockt.html · 788 kB

Die fünf Zustände eines Deployments und die drei Stellen, an denen er stehen bleibt — zum Durchklicken, hell und dunkel, ohne Netzaufrufe. Erzeugt mit dem Skill archify aus deploy-stockt.lifecycle.json.

im Browser öffnen

Station 04 · Wenn der Deploy stocktMit Zugang ansehen

Die Abnahme

Die Prüfliste des ganzen Kurses

Alle Prüfpunkte am Stück. Mit Zugang haken Sie hier ab — der Stand ist derselbe wie in den Phasen.

Station 00 · OrientierungDie Übung, die man einmal gemacht haben muss

Einen Datensatz in der laufenden Anwendung anlegen
Neu veröffentlichen (Deploy)
Nachsehen: Ist er noch da?
Dasselbe mit einer hochgeladenen Datei — einmal unter /data, einmal daneben

Station 03 · Festhalten und aufbewahrenNachweis für Station 2

Ein Dockerfile liegt im Repository, lokal einmal erfolgreich gebaut
.env.example listet alle Variablen, mit Beschreibung
dfx check zeigt keine offenen Verstöße mehr
Der Stand ist committet

Station 03 · Festhalten und aufbewahrenPrüfliste

Das Repository ist privat
git push läuft ohne Passworteingabe durch
Auf github.com sind die Dateien zu sehen — und keine .env darunter
Ein git clone in einen anderen Ordner hat funktioniert

Station 03 · Festhalten und aufbewahrenEtappe B ist abgenommen, wenn …

Der Stand liegt an zwei Orten — auf meinem Rechner und in der Heimat
Ich habe einmal zurückgerollt: etwas geändert, festgehalten, und den vorigen Stand wiederhergestellt
git clone an einem anderen Ort hat eine lauffähige Kopie ergeben
In der Dateiliste im Browser ist keine .env und kein Passwort zu sehen
dfx check zeigt keine offenen Verstöße

Nachschlagen

Alle Befehle des Kurses

In der Reihenfolge, in der sie im Kurs vorkommen.

Station 00Terminal — der erste Start (Station 01 erklärt jeden Schritt)

cd template
npm install
cp .env.example .env
npm run dev   # http://localhost:3000

Station 03Terminal

git status                    # was habe ich geändert?
git add -A                    # alles vormerken
git commit -m "Beschreibung"  # als Stand festhalten
git log --oneline             # welche Stände gab es?

Station 03Terminal

git config core.hooksPath .githooks

Station 03Terminal

command -v gitleaks || brew install gitleaks

Station 03PowerShell

winget install Gitleaks.Gitleaks

Station 03Terminal

# einmalig je Rechner: ein Schlüsselpaar
ssh-keygen -t ed25519 -C "laptop-buero"
cat ~/.ssh/id_ed25519.pub

# den ausgegebenen Text einfügen unter
# GitHub → Settings → SSH and GPG keys → New SSH key

ssh -T git@github.com   # Probe: „Hi <konto>! You've successfully authenticated“

Station 03Terminal

git remote add origin git@github.com:<konto>/ausleihe.git
git push -u origin main

Station 03Terminal

cd /tmp
git clone git@github.com:<konto>/ausleihe.git probe
ls probe

Station 03Eine Heimat auf einem Netzlaufwerk

git init --bare /Volumes/backup/ausleihe.git
git remote add origin /Volumes/backup/ausleihe.git
git push -u origin main

Station 03Die Probe zu Zeile 2 — sie dauert eine Minute

# etwas kaputtmachen, absichtlich
echo "unsinn" >> src/gebuehr.js
npm test                      # rot

# zurück auf den letzten festgehaltenen Stand
git restore src/gebuehr.js
npm test                      # grün

Zum Aushängen

Alle Diagramme

Dieselben Bilder wie im Kurs, hintereinander und druckbar. Sie stehen auf einer eigenen Seite — 11 Zeichnungen auf einmal machen jede andere Seite träge.

11 Diagramme ansehen und druckenVom ersten Bild, „Die vier Kästen auf dem eigenen Rechner“, bis zum letzten, „Die Brücke zu Station 3“.

Material ist Werkzeug, nicht der Stoff. Skripte, Vorlagen, Handbuchseiten und Ihre eigene Prüfliste nehmen Sie mit. Die Phasentexte bleiben im Kurs — sie werden gepflegt, und eine Kopie wäre schon morgen falsch.