Skip to content
Live gehen: Deploy auf AWS (kostenlos)
← ← Zurück zu Gedanken Course

Live gehen: Deploy auf AWS (kostenlos)

Veröffentlicht

Vibe Coding Kurs von TEN INVENT · April 2026

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

  1. Gehe zu github.com und klicke auf das "+"-Icon > "New repository"
  2. Nenne es waitlist-wizard
  3. Lass es Private (dein Code, deine Entscheidung)
  4. Fuege keine README, .gitignore oder Lizenz hinzu (die haben wir schon)
  5. 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_PASSWORD mit 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:

  1. 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)

  2. 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

  3. Umgebungsvariablen hinzufuegen in Amplify:

    • AWS_REGION: us-east-1

  4. 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:

  1. Besuche deine Amplify-URL -- sieh die Landingpage
  2. Schicke eine Test-E-Mail ab -- sie sollte erfolgreich sein
  3. Besuche /admin -- gib dein Passwort ein
  4. Sieh die E-Mail im Dashboard -- sie ist in DynamoDB gespeichert!
  5. 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.

Checkpoint -- Kurs abgeschlossen!

Waitlist Wizard ist live auf AWS. Du bist von null Programmiererfahrung zum Deployment einer Full-Stack-Anwendung gekommen. Der Tech Stack, der Workflow, die Debugging-Faehigkeiten -- sie gehoeren jetzt alle dir. Geh und baue etwas Grossartiges.