# Deploy: deine App live schalten Eine Webapp, die nur auf deinem Laptop läuft, hilft niemandem. Du musst sie ins Internet bringen, sodass jeder Mensch mit einem Browser sie erreichen kann. Das nennt sich Deployen. Im Workshop-Stack ist das ein Klick. Du verbindest dein GitHub-Repo mit Vercel und ab dann landet jeder Code-Push automatisch online. Später, wenn du wächst, ziehst du auf einen eigenen Server bei Hetzner um. ## Workshop-Stack: Vercel Vercel ist die Firma hinter Next.js. Logischerweise ist es die einfachste Hosting-Plattform für Next.js-Apps. Du brauchst kein Kreditkartenkonto, der Free-Tier reicht für Prototyp und MVP problemlos. ### Schritt 1: Code auf GitHub Vercel deployt direkt aus einem Git-Repo. Wenn dein Projekt noch nicht auf GitHub liegt: 1. Auf `https://github.com` einloggen oder registrieren. 2. "New Repository" anklicken, Name vergeben (z.B. `mein-prototyp`), "Private" auswählen. 3. Im Terminal in deinem Projekt-Ordner: ```bash git init git add . git commit -m "Erster Commit" git branch -M main git remote add origin https://github.com/DEIN_USER/mein-prototyp.git git push -u origin main ``` ### Schritt 2: Vercel-Account anlegen Auf `https://vercel.com` mit deinem GitHub-Account einloggen. Vercel fragt nach Zugriff auf deine Repos, das ist okay. ### Schritt 3: Projekt importieren 1. Im Vercel-Dashboard "Add New" -> "Project" klicken. 2. Dein Repo auswählen. 3. Vercel erkennt automatisch, dass es ein Next.js-Projekt ist. Du musst nichts konfigurieren. 4. Unter "Environment Variables" deine Supabase-Werte eintragen: ``` NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJI... ``` 5. "Deploy" klicken. Nach ein bis zwei Minuten bekommst du eine URL wie `mein-prototyp.vercel.app`. Deine App ist live. ### Schritt 4: Eigene Domain verbinden `vercel.app`-Subdomains sind okay für Tests, aber für echten Launch willst du eine eigene Domain. 1. Domain kaufen bei einem Anbieter deiner Wahl (Namecheap, Cloudflare, INWX, Hetzner). Kosten: 5 bis 15 Euro im Jahr für `.de` oder `.com`. 2. Im Vercel-Projekt unter "Settings" -> "Domains" deine Domain eintragen. 3. Vercel sagt dir, welche DNS-Einträge du beim Domain-Anbieter setzen musst (meist ein `A-Record` oder `CNAME`). 4. Nach 5 bis 60 Minuten ist die Domain aktiv, inklusive automatischem HTTPS-Zertifikat. ### Preview-Deploys: jeder Branch wird eine eigene URL Eines der besten Features von Vercel: jeder Git-Branch bekommt automatisch eine eigene Preview-URL. Du baust ein neues Feature in einem Branch, pushst, bekommst einen Link wie `mein-prototyp-git-feature-xyz.vercel.app`. Den kannst du Freunden oder Testkunden schicken, ohne deine Live-Version zu berühren. Bei einem Pull-Request schreibt Vercel den Preview-Link automatisch in den PR-Kommentar. ### Logs und Fehler ansehen Im Vercel-Dashboard unter "Deployments" -> [dein Deploy] -> "Logs" siehst du, was im Server passiert. Wenn etwas crashed, findest du hier die Fehlermeldung. Für Frontend-Fehler (Browser-Konsole) brauchst du ein Tool wie Sentry oder einfach die Browser-DevTools beim Testen. ### Wann wird Vercel teuer? Der Free-Tier reicht bis ca. 100 GB Bandbreite pro Monat und einige hunderttausend Function-Invocations. Für einen Prototyp und die ersten 100 bis 1000 Nutzer kein Problem. Ab dann kostet der "Pro"-Tier 20 Dollar pro Monat pro Nutzer im Team. Bei Wachstum wird das schnell teuer, gerade wenn du Video oder große Bilder ausspielst. Dann lohnt sich der Umzug. ## Production-Stack: Docker und Dokploy auf Hetzner Wenn du echtes Wachstum hast oder mehr Kontrolle willst, sieht Deploy so aus, wie Ben Scheurer es selbst macht. ### Hetzner als Server Hetzner ist ein deutscher Hoster mit fantastischem Preis-leistungs-verhältnis. Ein "CPX21" mit 3 vCPU, 4 GB RAM und 80 GB SSD kostet rund 8 Euro im Monat. Damit trägst du Hunderte aktive Nutzer. Du bestellst dir einen Server (Ubuntu 24.04 LTS), bekommst eine IP-Adresse und SSH-Zugang. ### Dokploy als Steuerzentrale Dokploy ist Open-Source-Software, die du auf deinem Server installierst. Sie ist wie Vercel im Selbstbau: Git-Repo verbinden, push deployt automatisch, Preview-Deploys, Logs, Env-Variablen. Aber alles läuft auf deinem eigenen Server, ohne dass jemand mitliest oder dich abrechnet. Installation in einer Zeile auf dem Server: ```bash curl -sSL https://dokploy.com/install.sh | sh ``` Danach erreichst du Dokploy unter `http://DEINE_IP:3000` und konfigurierst Projekte per Web-UI. ### Docker für dein Projekt Deine App wird in einem Docker-Container verpackt. Das ist eine Art Mini-Server, der überall gleich läuft. Eine `Dockerfile` im Projekt-Ordner beschreibt, wie der Container gebaut wird: ```dockerfile FROM node:20-alpine WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npm run build EXPOSE 3000 CMD ["npm", "start"] ``` Dokploy baut den Container bei jedem Git-Push und startet ihn neu. ### Traefik und Let's Encrypt Traefik ist ein Reverse-Proxy, der vor deinen Containern sitzt. Er macht zwei Dinge: 1. Leitet eingehende Requests an den richtigen Container weiter (z.B. `meinedomain.de` an den Next.js-Container, `api.meinedomain.de` an den Fastify-Container). 2. Holt automatisch HTTPS-Zertifikate von Let's Encrypt. Du musst nichts manuell erneuern. Dokploy konfiguriert Traefik für dich, du klickst deine Domain im UI ein. ### Eigene Image-Registry: hub.sac.sh Ben Scheurer betreibt eine eigene Container-Registry unter `hub.sac.sh`. Container-Images werden dorthin gepusht statt zu Docker Hub. Vorteile: keine Rate-Limits, alles in Deutschland, eigene Kontrolle. Für eigene Projekte machst du dasselbe oder nutzt die kostenlose GitHub Container Registry. ### CI per GitHub Actions Statt Dokploy direkt aus dem Repo deployen zu lassen, kannst du eine GitHub-Action schreiben, die das Image baut, Tests laufen lässt, in die Registry pusht und dann Dokploy über Webhook triggert. Mehr Kontrolle, mehr Sicherheit. ## Migration: wann von Vercel zu Hetzner umziehen? Konkrete Trigger: - Deine Vercel-Rechnung übersteigt 50 Euro pro Monat. - Function-Timeouts werden zum Problem (Vercel-Functions laufen max. 60 Sekunden auf Pro, 15 Sekunden auf Free). - Du brauchst Hintergrund-Jobs, Cron-Tasks oder Worker-Prozesse. - Du verarbeitest sensible Daten und willst keine US-Cloud. - Du brauchst eigene Server-Software (Postgres, Redis, ImageMagick, Headless-Chrome). Vorher: bleib auf Vercel. Früher umziehen ist Premature Optimization und kostet dich Tage, die du für Produkt und Kunden brauchst. ## Was du bei Vercel im Hinterkopf behalten solltest **Function-Region.** Vercel deployt deine Server Actions standardmäßig in Washington (USA). Wenn deine Nutzer in Deutschland sitzen und du EU-Latenz willst, in `next.config.js` die Region auf `fra1` (Frankfurt) setzen. Ist ein Einzeiler. **Datenschutz.** Vercel ist US-Firma. Wenn du personenbezogene Daten verarbeitest und DSGVO-streng sein musst, ist das ein Risiko. Für Prototyp und MVP meist tolerierbar, ein Auftragsverarbeitungsvertrag (AVV) ist bei Vercel verfügbar. Für ernsthafte B2B-Verkäufe an Konzerne: spätestens dann auf eigenen Server umziehen. **Build-Logs anschauen.** Wenn ein Deploy fehlschlägt, klick auf den fehlgeschlagenen Deploy und lies die Build-Logs. 90 Prozent der Fehler sind fehlende Environment-Variablen oder ein TypeScript-Fehler, den du lokal nicht gesehen hast (weil du `npm run dev` und nicht `npm run build` getestet hast). Faustregel: einmal pro Tag lokal `npm run build` laufen lassen, dann gibts auf Vercel keine Überraschungen. **Free-Tier-Limits checken.** Im Vercel-Dashboard unter "Usage" siehst du Bandbreite, Function-Invocations und Build-Minuten in Echtzeit. Wenn du 80 Prozent erreichst, denk übers Pro-Upgrade nach oder optimiere (Bilder kleiner, weniger Server-Renderings). ## Domain richtig aufsetzen Eine Domain kostet 5 bis 15 Euro im Jahr und ist die wichtigste Investition für deinen Prototyp. `mein-prototyp.vercel.app` schickst du keinem ernsthaften Testkunden. **Empfehlung:** kauf eine `.de` oder `.com`. Vermeide exotische TLDs (`.io`, `.app`, `.ai`), die teuer sind und manchmal als spammy wahrgenommen werden, gerade in DACH-Geschäftsumfeld. Eine kurze, einprägsame `.de`-Domain ist Gold wert. **DNS-Trick:** lass die DNS bei Cloudflare verwalten, auch wenn du die Domain woanders gekauft hast. Cloudflare ist kostenlos, hat das schnellste DNS und gibt dir später Optionen wie DDoS-Schutz, Image-Optimierung und Worker-Functions. ## Nächster Schritt Pushe dein Projekt auf GitHub, verbinde Vercel, deploye. Dann teile die URL mit den ersten drei Testnutzern, die du im Workshop besprochen hast. Ab hier ist dein Prototyp nicht mehr nur Code, er ist ein Produkt im Internet.