Kapitel 14: Deployment & Live-Schaltung

📖 Lernziele

In diesem Kapitel lernen Sie:

✅ Next.js-Projekt für Produktion bauen (npm run build)
✅ Verschiedene Deployment-Möglichkeiten kennen
✅ VercelDeployment (empfohlen) durchführen
✅ Eigenen Server mit Nginx und PM2 konfigurieren
✅ Docker-Containerisierung anwenden
✅ Häufige Probleme beim Deployment lösen

14.1 Projekt bauen (Build)

📦 Produktions-Build erstellen

Befehl:

bash

npm run build
# oder
pnpm build

Ergebnis:

▲ Next.js 14.x.x
- Environments: .env.production
- Creating an optimized production build...
✓ Compiled successfully
- Collecting page data...
- Generating static pages (5/5)
- Finalizing page optimization...

Route (app)                              Size   First Load JS
┌ ○ /                                    1.45 kB  90.2 kB
├ ○ /about                               1.23 kB  89.9 kB
├ ○ /blog                                2.1 kB   91.8 kB
└ ○ /blog/[slug]                        1.87 kB  90.5 kB
+ First Load JS shared by all             87.5 kB
  ├ chunks/framework-....js              45.2 kB
  ├ chunks/main-....js                   32.1 kB
  └ other shared chunks                  10.2 kB

○  (Static)   prerendered as static HTML

🎯 Build-Analyse

Symbol	Bedeutung
`○` (Static)	Statisch generiert (SSG)
`●` (SSR)	Server-Side Rendering
`λ` (Server)	Server-Funktion

📝 Produktions-Server starten (Lokal testen)

bash

npm run start
# oder
pnpm start

Zugriff: http://localhost:3000

14.2 Deployment-Möglichkeiten

🚀 Vergleich der Deployment-Optionen

Methode	Plattform	Schwierigkeit	Empfehlung
Vercel	Vercel Cloud	Einfach ✅	✅ Next.js Ersteller (empfohlen)
Server	Eigenner Server (Nginx)	Mittel ⭐	Für Enterprise
Docker	Jeder Docker-Host	Mittel ⭐	Für Container-Orchestrierung
Statisch	Jeder Static Host	Einfach ✅	Nur für `output: 'export'`

14.3 Vercel Deployment (Empfohlen)

🎯 Warum Vercel?

Vorteil	Erklärung
Ersteller von Next.js	Perfekt abgestimmt
Zero-Config	Automatisches Deployment
Kostenlos	Für persönliche Projekte
CI/CD	Automatisches Deployment bei Git-Push
Preview	Jeder PR erhält eine Preview-URL

📦 Schritt 1: Vercel CLI installieren

bash

npm i -g vercel

📦 Schritt 2: Deployment durchführen

bash

# Im Projekt-Verzeichnis
vercel

# Folgen Sie den Anweisungen:
# ? Set up and deploy? [Y/n] Y
# ? Which scope? Ihr Name
# ? Link to existing project? N
# ? What's your project's name? mein-nextjs-projekt
# ? In which directory is your code located? ./
# ? Want to override the settings? N

Ergebnis:

🔗 Deploying...
✅ Production: https://mein-projekt.vercel.app

🌐 Schritt 3: über Git (Empfohlen)

Code zu GitHub/GitLab pushen
Vercel Dashboard öffnen: vercel.com
"New Project" klicken
Git-Repository auswählen
Deploy klicken

Automatisches Deployment:

✅ Jeder git push zu main → Produktions-Deployment
✅ Jeder PR → Preview-Deployment

14.4 Eigenen Server部署 (Nginx + PM2)

🎯 Wann eigener Server?

✅ Wenn Sie volle Kontrolle benötigen
✅ Für Enterprise-Projekte mit spezifischen Anforderungen
✅ Wenn Daten in Ihrer Infrastruktur bleiben müssen

📦 Schritt 1: Build & Start-Skript anpassen

package.json:

json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 3000"
  }
}

📦 Schritt 2: PM2 installieren & konfigurieren

PM2 installieren:

bash

npm i -g pm2

PM2 Ecosystem-Datei erstellen (ecosystem.config.js):

javascript

module.exports = {
  apps: [
    {
      name: 'nextjs-app',
      script: 'npm',
      args: 'start',
      env: {
        NODE_ENV: 'production',
        PORT: 3000,
      },
    },
  ],
};

Anwendung starten:

bash

pm2 start ecosystem.config.js
pm2 save                 # Konfiguration speichern
pm2 startup               # Autostart einrichten

📦 Schritt 3: Nginx als Reverse Proxy konfigurieren

Nginx installieren (Ubuntu/Debian):

bash

sudo apt update
sudo apt install nginx

Nginx-Konfiguration (/etc/nginx/sites-available/nextjs):

nginx

server {
    listen 80;
    server_name deine-domain.de;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Konfiguration aktivieren:

bash

sudo ln -s /etc/nginx/sites-available/nextjs /etc/nginx/sites-enabled/
sudo nginx -t                  # Konfiguration testen
sudo systemctl restart nginx   # Nginx neu starten

🔒 Schritt 4: SSL (HTTPS) mit Let's Encrypt

bash

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d deine-domain.de

14.5 Docker Deployment

🐳 Dockerfile erstellen

Datei: Dockerfile

dockerfile

# Build-Stage
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Produktions-Stage
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/package*.json ./
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/next.config.js ./
RUN npm ci --only=production

EXPOSE 3000
CMD ["npm", "start"]

🎯 Docker-Image bauen & ausführen

bash

# Image bauen
docker build -t nextjs-app .

# Container starten
docker run -p 3000:3000 -d nextjs-app

🎯 Docker Compose (Empfohlen)

Datei: docker-compose.yml

yaml

version: '3.8'

services:
  nextjs:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - DATABASE_URL=${DATABASE_URL}
    restart: unless-stopped

Starten:

bash

docker-compose up -d

14.6 Häufige Probleme beim Deployment

⚠️ Problem 1: Port bereits belegt

Fehler:

Error: listen EADDRINUSE: address already in use :::3000

Lösung:

bash

# Port prüfen
lsof -i :3000

# Prozess beenden
kill -9 <PID>

# Oder anderen Port verwenden
npm run start -- -p 3001

⚠️ Problem 2: CORS-Fehler

Fehler:

Access to fetch at '...' from origin '...' has been blocked by CORS policy

Lösung (Next.js Rewrite):

javascript

// next.config.js
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://api.example.com/:path*',
      },
    ];
  },
};

⚠️ Problem 3: Statische Assets nicht gefunden

Fehler:

404 Not Found für Bilder/Fonts

Lösung:

✅ Überprüfen Sie, ob Dateien in public/ liegen
✅ Verwenden Sie absolute Pfade: /bild.jpg (nicht ./bild.jpg)
✅ Bei Vercel: Überprüfen Sie, ob public/ im Git-Repository ist

⚠️ Problem 4: Umgebungsvariablen fehlen

Fehler:

process.env.API_URL ist undefined

Lösung:

✅ Vercel: Setzen Sie Umgebungsvariablen im Dashboard
✅ Server: .env.local erstellen oder export API_URL=...
✅ Wichtig: Client-seitige Variablen brauchen NEXT_PUBLIC_ Präfix!

14.7 Domain konfigurieren & HTTPS

🌐 Domain bei Vercel konfigurieren

Vercel Dashboard → Projekt auswählen
Settings → Domains
Domain hinzufügen: www.deine-domain.de
DNS-Einstellungen bei Ihrem Provider:
- Typ: CNAME
- Name: www
- Wert: cname.vercel-dns.com

🔒 HTTPS (SSL-Zertifikat)

Bei Vercel:

✅ Automatisch durch Vercel (Let's Encrypt)

Bei eigenem Server:

bash

sudo certbot --nginx -d deine-domain.de -d www.deine-domain.de

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

Konzept	Erklärung
Build	`npm run build` für Produktions-Build
Vercel	Empfohlene Plattform (Zero-Config)
Eigener Server	Nginx + PM2 für volle Kontrolle
Docker	Containerisierung für einfaches Deployment
Häufige Probleme	CORS, Ports, Umgebungsvariablen

✅ Nächste Schritte

✅ Übung: Deployen Sie Ihr Next.js-Projekt auf Vercel
✅ Übung: Richten Sie ein eigenes Server-Deployment mit Nginx ein
✅ Weiter geht's: Kapitel 15 - Häufige Fehler & Interviewfragen

🎯 Selbsttest

Frage 1: Welcher Befehl erstellt einen Produktions-Build?

Antwort anzeigen

`npm run build`

Frage 2: Welche Plattform wird für Next.js empfohlen?

Antwort anzeigen

Vercel (Ersteller von Next.js)

Frage 3: Wie löst man CORS-Probleme bei Deployment?

Antwort anzeigen

Durch Verwendung von Rewrites in `next.config.js` (Proxy zu Backend).

🚀 Weiter zu Kapitel 15: Häufige Fehler & Interviewfragen

Kapitel 14: Deployment & Live-Schaltung ​

📖 Lernziele ​

14.1 Projekt bauen (Build) ​

📦 Produktions-Build erstellen ​

🎯 Build-Analyse ​

📝 Produktions-Server starten (Lokal testen) ​

14.2 Deployment-Möglichkeiten ​

🚀 Vergleich der Deployment-Optionen ​

14.3 Vercel Deployment (Empfohlen) ​

🎯 Warum Vercel? ​

📦 Schritt 1: Vercel CLI installieren ​

📦 Schritt 2: Deployment durchführen ​

🌐 Schritt 3: über Git (Empfohlen) ​

14.4 Eigenen Server部署 (Nginx + PM2) ​

🎯 Wann eigener Server? ​

📦 Schritt 1: Build & Start-Skript anpassen ​

📦 Schritt 2: PM2 installieren & konfigurieren ​

📦 Schritt 3: Nginx als Reverse Proxy konfigurieren ​

🔒 Schritt 4: SSL (HTTPS) mit Let's Encrypt ​

14.5 Docker Deployment ​

🐳 Dockerfile erstellen ​

🎯 Docker-Image bauen & ausführen ​

🎯 Docker Compose (Empfohlen) ​

14.6 Häufige Probleme beim Deployment ​

⚠️ Problem 1: Port bereits belegt ​

⚠️ Problem 2: CORS-Fehler ​

⚠️ Problem 3: Statische Assets nicht gefunden ​

⚠️ Problem 4: Umgebungsvariablen fehlen ​

14.7 Domain konfigurieren & HTTPS ​

🌐 Domain bei Vercel konfigurieren ​

🔒 HTTPS (SSL-Zertifikat) ​

📝 Zusammenfassung ​

✅ Nächste Schritte ​

🎯 Selbsttest ​

Kapitel 14: Deployment & Live-Schaltung

📖 Lernziele

14.1 Projekt bauen (Build)

📦 Produktions-Build erstellen

🎯 Build-Analyse

📝 Produktions-Server starten (Lokal testen)

14.2 Deployment-Möglichkeiten

🚀 Vergleich der Deployment-Optionen

14.3 Vercel Deployment (Empfohlen)

🎯 Warum Vercel?

📦 Schritt 1: Vercel CLI installieren

📦 Schritt 2: Deployment durchführen

🌐 Schritt 3: über Git (Empfohlen)

14.4 Eigenen Server部署 (Nginx + PM2)

🎯 Wann eigener Server?

📦 Schritt 1: Build & Start-Skript anpassen

📦 Schritt 2: PM2 installieren & konfigurieren

📦 Schritt 3: Nginx als Reverse Proxy konfigurieren

🔒 Schritt 4: SSL (HTTPS) mit Let's Encrypt

14.5 Docker Deployment

🐳 Dockerfile erstellen

🎯 Docker-Image bauen & ausführen

🎯 Docker Compose (Empfohlen)

14.6 Häufige Probleme beim Deployment

⚠️ Problem 1: Port bereits belegt

⚠️ Problem 2: CORS-Fehler

⚠️ Problem 3: Statische Assets nicht gefunden

⚠️ Problem 4: Umgebungsvariablen fehlen

14.7 Domain konfigurieren & HTTPS

🌐 Domain bei Vercel konfigurieren

🔒 HTTPS (SSL-Zertifikat)

📝 Zusammenfassung

✅ Nächste Schritte

🎯 Selbsttest