Das ist es. Die letzte Lektion. Am Ende wird dein Waitlist Wizard live im Internet sein -- fuer jeden mit der URL zugaenglich. Alles, was du in den letzten neun Lektionen gebaut hast, kommt hier zusammen.
Deployment-Strategie
Wir nutzen AWS Amplify -- den einfachsten Weg, eine Next.js-Anwendung auf AWS zu deployen. Amplify verbindet sich mit deinem GitHub-Repository, baut deine App automatisch und hostet sie auf einem globalen CDN (Content Delivery Network).
Konzept
Deployment ist der Prozess, deinen Code von deinem Computer auf einen Server zu bringen, auf den jeder in der Welt zugreifen kann. AWS Amplify automatisiert das: Du pushst Code auf GitHub, und Amplify baut und deployt ihn automatisch.Vorbereitung fuer das Deployment
Bevor wir deployen, stellen wir sicher, dass alles bereit ist:
Probier es aus
In Claude Code:"Review the project for deployment readiness. Check: 1. No hardcoded localhost URLs 2. Environment variables are in .env.local (not committed) 3. The build completes without errors (run npm run build) 4. All sensitive data is in .gitignore 5. Create a .env.example file listing required environment variables without actual values"
Wenn npm run build Fehler zeigt, teile sie mit Claude, um sie zu beheben. Der Build muss erfolgreich sein, bevor wir deployen koennen.
Auf GitHub pushen
Zuerst brauchen wir deinen Code auf GitHub, damit Amplify darauf zugreifen kann:
Schritt 1: Ein GitHub-Repository erstellen
- Gehe zu github.com und klicke auf das "+"-Icon > "New repository"
- Nenne es
waitlist-wizard - Lass es Private (dein Code, deine Entscheidung)
- Fuege keine README, .gitignore oder Lizenz hinzu (die haben wir schon)
- Klicke auf "Create repository"
Schritt 2: Deinen Code pushen
Probier es aus
In Claude Code:"Help me push this project to GitHub. The repository URL is https://github.com/[dein-benutzername]/waitlist-wizard.git. Add the remote, and push the main branch."
Ersetze [dein-benutzername] durch deinen tatsaechlichen GitHub-Benutzernamen.
Claude fuehrt die Git-Befehle aus:
git remote add origin https://github.com/deinbenutzername/waitlist-wizard.git
git branch -M main
git push -u origin main
Mit AWS Amplify deployen
Jetzt kommt der spannende Teil:
Schritt 1: Gehe zur AWS Amplify Console (suche nach "Amplify" in der AWS Console)
Schritt 2: Klicke auf "Create new app" > "Host web app"
Schritt 3: Waehle GitHub als Quelle und autorisiere AWS, auf deine Repositories zuzugreifen
Schritt 4: Waehle dein waitlist-wizard-Repository und den main-Branch
Schritt 5: Amplify erkennt automatisch, dass es ein Next.js-Projekt ist und konfiguriert die Build-Einstellungen. Ueberpreufe sie -- sie sollten korrekt aussehen.
Schritt 6: Fuege deine Umgebungsvariablen hinzu:
- Klicke auf "Advanced settings"
- Fuege
ADMIN_PASSWORDmit deinem gewaehlten Passwort hinzu
Schritt 7: Klicke auf "Save and deploy"
Warte 2-3 Minuten. AWS Amplify baut deine Anwendung, buendelt sie und verteilt sie ueber das globale Netzwerk.
Wenn der Build abgeschlossen ist, siehst du eine URL wie: https://main.d1a2b3c4d5.amplifyapp.com
Probier es aus
Klicke auf deine Amplify-URL. Du solltest deine Waitlist Wizard Landingpage sehen -- live im Internet! Probiere, eine E-Mail einzureichen und die /admin-Seite zu besuchen.DynamoDB anbinden (JSON-Speicher ersetzen)
Unser JSON-Dateispeicher hat fuer die Entwicklung funktioniert, aber auf AWS Amplify funktioniert er nicht (serverlose Umgebungen haben kein persistentes Dateisystem). Lass uns auf DynamoDB umsteigen:
Probier es aus
In Claude Code:"Switch the data storage from the local JSON file to AWS DynamoDB: 1. Create a DynamoDB table called 'waitlist-signups' with partition key 'email' (String) 2. Update the /api/signup route to write to DynamoDB instead of the JSON file 3. Update the /api/signups route to read from DynamoDB 4. Use the AWS SDK v3 for JavaScript 5. Use environment variables for the AWS region 6. Include instructions for setting up IAM permissions"
Nachdem Claude den Code aktualisiert hat, musst du:
-
Die DynamoDB-Tabelle erstellen in der AWS Console:
- Gehe zu DynamoDB > Create table
- Tabellenname:
waitlist-signups - Partition Key:
email(String) - Lass alle anderen Einstellungen auf Standard (On-Demand-Kapazitaet)
-
IAM-Berechtigungen einrichten, damit Amplify auf DynamoDB zugreifen kann:
- Gehe zu IAM > Roles
- Finde die Rolle, die Amplify fuer deine App erstellt hat
- Fuege die
AmazonDynamoDBFullAccess-Policy hinzu
-
Umgebungsvariablen hinzufuegen in Amplify:
AWS_REGION:us-east-1
-
Pushen und neu deployen:
git add .
git commit -m "switch to DynamoDB for production data storage"
git push
Amplify baut und deployt automatisch neu. Das dauert 2-3 Minuten.
Deine Live-App testen
Gehe den kompletten Ablauf durch:
- Besuche deine Amplify-URL -- sieh die Landingpage
- Schicke eine Test-E-Mail ab -- sie sollte erfolgreich sein
- Besuche
/admin-- gib dein Passwort ein - Sieh die E-Mail im Dashboard -- sie ist in DynamoDB gespeichert!
- Probiere den CSV-Export -- er sollte die Live-Daten enthalten
Pro-Tipp
Du kannst Daten in DynamoDB direkt ueberpruefen: Gehe zu DynamoDB > Tables > waitlist-signups > Explore table items. Du siehst jede E-Mail, die als Datenbankdatensatz gespeichert ist.Was du gebaut hast
Nimm dir einen Moment, um zu schaetzen, was du erreicht hast:
- Eine professionelle Landingpage mit E-Mail-Sammlung
- Eine Backend-API, die Daten validiert und speichert
- Eine Cloud-Datenbank (DynamoDB) mit automatischer Skalierung
- Ein Admin-Dashboard mit Diagrammen und CSV-Export
- Alles laeuft auf AWS, fuer jeden mit der URL zugaenglich
- Monatliche Gesamtkosten: $0 (innerhalb der Free-Tier-Limits)
Wie geht es weiter?
Deine Vibe-Coding-Reise endet hier nicht. Einige Ideen:
- Eigene Domain -- Verknuepfe deine eigene Domain (z.B. waitlistwizard.com) mit Route 53 und CloudFront
- E-Mail-Benachrichtigungen -- Nutze AWS SES (Simple Email Service), um eine Bestaetigungsmail zu senden, wenn sich jemand anmeldet (3.000 kostenlose E-Mails/Monat)
- KI-Features -- Nutze Amazon Bedrock, um KI-gestuetzte Features zu deiner App hinzuzufuegen
- Baue deine EIGENE Idee -- Nutze genau denselben Workflow, um die App zu bauen, von der du schon immer getraeumt hast
Ehrlicher Hinweis
Vibe Coding mit KI ist eine echte Superkraft, aber sie hat Grenzen. Wenn deine Projekte komplexer werden, wirst du auf Situationen stossen, in denen KI Schwierigkeiten hat: komplexe Authentifizierungsablaeufe, verschachtelte Business-Logik, Performance-Optimierung im grossen Massstab. Das Fundament, das du in diesem Kurs gebaut hast -- zu verstehen, wie Web-Apps funktionieren, wie man KI effektiv anleitet, wie man Probleme debuggt -- wird dir dienen, egal wie viel oder wenig Code du von Hand schreibst.Letzter Git Checkpoint
git add .
git commit -m "production deployment with DynamoDB"
git push
Wichtigste Erkenntnis
Du hast diesen Kurs ohne Programmiererfahrung begonnen. Du hast jetzt eine Live-Anwendung auf AWS, die du gebaut hast, indem du Gespraeche mit KI gefuehrt hast. Das ist keine Spielzeug-Demo -- das ist eine echte Faehigkeit, und es ist die Zukunft der Softwareentwicklung.