# Live gehen: Deploy auf AWS (kostenlos)

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

<div class="concept-box">
<h4>Konzept</h4>
<strong>Deployment</strong> ist der Prozess, deinen Code von deinem Computer auf einen Server zu bringen, auf den jeder in der Welt zugreifen kann. <strong>AWS Amplify</strong> automatisiert das: Du pushst Code auf GitHub, und Amplify baut und deployt ihn automatisch.
</div>

## Vorbereitung fuer das Deployment

Bevor wir deployen, stellen wir sicher, dass alles bereit ist:

<div class="try-it">
<h4>Probier es aus</h4>
In Claude Code:<br><br>
<strong>"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"</strong>
</div>

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**

<div class="try-it">
<h4>Probier es aus</h4>
In Claude Code:<br><br>
<strong>"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."</strong>
<br><br>
Ersetze [dein-benutzername] durch deinen tatsaechlichen GitHub-Benutzernamen.
</div>

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`

<div class="try-it">
<h4>Probier es aus</h4>
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.
</div>

## 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:

<div class="try-it">
<h4>Probier es aus</h4>
In Claude Code:<br><br>
<strong>"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"</strong>
</div>

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

<div class="pro-tip">
<h4>Pro-Tipp</h4>
Du kannst Daten in DynamoDB direkt ueberpruefen: Gehe zu <strong>DynamoDB > Tables > waitlist-signups > Explore table items</strong>. Du siehst jede E-Mail, die als Datenbankdatensatz gespeichert ist.
</div>

## 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

<div class="honest-note">
<h4>Ehrlicher Hinweis</h4>
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.
</div>

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

<div class="checkpoint">
<h4>Checkpoint -- Kurs abgeschlossen!</h4>
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.
</div>