Summary  
This chapter shows how to import a code repository into a deployment service, configure environment variables for secure API key management, and trigger an automated build-and-publish process.

General domain of usage  
Web application hosting

Vercel übernimmt deinen Code von GitHub und veröffentlicht ihn als Live-Website. Jedes Mal, wenn du ein Update zu GitHub pushst, wird die Seite von Vercel automatisch neu bereitgestellt. Nach der ersten Einrichtung sind keine manuellen Schritte mehr erforderlich.

Definition

Dein Code befindet sich auf GitHub. In diesem Kapitel wird er mit einer echten URL, die du mit anderen teilen kannst, online gestellt.

### Die Schritte

Gehe zu [vercel.com](https://vercel.com) und registriere dich. Verbinde dein GitHub-Konto, wenn du dazu aufgefordert wirst. Dadurch kann Vercel auf deine Repositories zugreifen.

1. Vercel-Konto erstellen

Sobald du im Vercel-Dashboard bist, klicke auf **Add New** und wähle **Project** aus. Dein GitHub-Repository sollte angezeigt werden. Klicke auf **Import**.

2. Projekt importieren

Dies ist der wichtigste Schritt. Dein API-Schlüssel befindet sich nicht auf GitHub, da er durch `.gitignore` ausgeschlossen wurde. Das bedeutet, dass Vercel ihn ebenfalls nicht hat. Du musst ihn Vercel direkt zur Verfügung stellen.

Öffne auf der Projekt-Setup-Seite den Bereich **Environment Variables**. Hier musst du deinen API-Schlüssel hinzufügen, bevor du das Projekt bereitstellst.

| Field | What to enter |
|-------|--------------|
| Key   | `ANTHROPIC_API_KEY` |
| Value | Your actual API key from `.env.local` |

Du kannst auch auf **Import .env** klicken und deine `.env.local`-Datei direkt auswählen. Vercel liest dann den Schlüssel und Wert automatisch daraus aus. Dies ist die einfachste Option.

3. Umgebungsvariablen hinzufügen

Sobald die Umgebungsvariable hinzugefügt wurde, klicke auf **Deploy**. Vercel zieht alle deine Code-Dateien von GitHub und veröffentlicht sie. Dies dauert zwei bis fünf Minuten.

4. Deploy klicken

Wenn der Glückwunsch-Bildschirm erscheint, ist deine App online! Vercel stellt dir eine URL zur Verfügung, die du in jedem Browser öffnen und mit anderen teilen kannst.

5. Fertig

### Warum der Schritt mit der Umgebungsvariable wichtig ist

Deine App wird gebaut und scheint ohne den API-Schlüssel zu funktionieren. Doch sobald jemand eine Idee einreicht, schlägt sie fehl, da die App keine Möglichkeit hat, die KI aufzurufen. Das Hinzufügen des Schlüssels zu Vercel sorgt dafür, dass die Kernfunktion in der Produktion tatsächlich funktioniert.

Die lokale Datei `.env.local` bleibt auf deinem Computer. Vercel-Umgebungsvariablen sind dein `.env.local` für die Live-Webversion.


Hinweis

Was musst du tun, damit deine bereitgestellte App auf die KI-API zugreifen kann?

Erstellen und veröffentlichen Sie eine echte App an nur einem Wochenende mit modernen KI-Tools und einem einfachen, praxisorientierten Workflow, indem Sie Claude Code zur Planung, Generierung und Verfeinerung Ihres Codes nutzen, Ihr Projekt mit GitHub verwalten und Ihre fertige App online mit Vercel bereitstellen. Sie beginnen mit einer Idee und verwandeln diese schnell in einen klaren Projektplan, um dann Schritt für Schritt eine funktionierende Anwendung zu entwickeln. Der Fokus liegt auf Kernfunktionen, einer einfachen Architektur und schneller Iteration statt unnötiger Komplexität, während Sie lernen, effektiv mit KI zu arbeiten, indem Sie bessere Prompts schreiben, Fehler beheben und Funktionen verbessern. Am Ende steht eine Live-App, ein aufgeräumtes GitHub-Projekt und ein wiederholbares System, um zukünftige Ideen schneller in reale Produkte umzusetzen.

Grundlagen der KI-gestützten Entwicklung verstehen, die Entwicklungsumgebung einrichten und sich mit Claude Code vertraut machen, bevor die erste Anwendung gestartet wird.

Verwandeln Sie Ihre Idee in einen klaren, einfachen Plan und definieren Sie die kleinste Version Ihrer App, die echten Mehrwert bietet.

Vom Einstieg bis zur laufenden Anwendung durch Codegenerierung mit KI, Einrichtung des Projekts und Verständnis der erstellten Komponenten.

Verbesserung Ihrer App durch Hinzufügen von Funktionen, Verfeinerung des Designs und effektives Erlernen der Fehlerbehebung.

Veröffentlichen Sie Ihr Projekt, machen Sie es online zugänglich und stellen Sie mit GitHub und Vercel sicher, dass alles funktioniert.

Field	What to enter
Key	`ANTHROPIC_API_KEY`
Value	Your actual API key from `.env.local`

Bereitstellung mit Vercel

Die Schritte

Warum der Schritt mit der Umgebungsvariable wichtig ist