Kapitel 14: Deployment & Live-Schaltung

In diesem Kapitel lernen Sie, wie Sie Ihre Nuxt 3 Anwendung deployen und live schalten.

---

14.1 Projekt-Build (nuxt build)

Bevor Sie deployen, müssen Sie Ihr Projekt bauen.

Produktions-Build erstellen:

# Build für Produktion
pnpm build

# Oder mit npm
npm run build

Der Build-Prozess erstellt den .output/-Ordner mit optimierten Dateien.

---

Build-Arten:

Befehl	Ergebnis	Verwendung
nuxt build	.output/ (SSR-fähig)	Server-Deployment
nuxt generate	.output/public/ (statisch)	Static Hosting
nuxt dev	Entwicklungsserver	Entwicklung

---

14.2 Deployment-Möglichkeiten

Option 1: Vercel (Empfohlen für Einsteiger)

Vercel ist die einfachste Möglichkeit, Nuxt 3 zu deployen.

Schritte:

1. GitHub-Repository erstellen

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/username/mein-nuxt-projekt.git
   git push -u origin main

2. Bei Vercel anmelden

   • Gehen Sie zu https://vercel.com/
   • Klicken Sie auf "New Project"
   • Importieren Sie Ihr GitHub-Repository

3. Konfiguration (automatisch erkannt!)

   • Vercel erkennt Nuxt 3 automatisch
   • Klicken Sie auf "Deploy"

4. Fertig! 🎉

   • Ihre Website ist unter https://ihr-projekt.vercel.app live!

---

Option 2: Netlify

Netlify ist eine weitere gute Option für statische Seiten.

Schritte:

1. Build-Konfiguration:

   Build Command: npm run generate
   Publish Directory: .output/public

2. Deployen:

   • Gehen Sie zu https://netlify.com/
   • "New site from Git"
   • Repository auswählen
   • Build-Einstellungen bestätigen
   • "Deploy site" klicken

---

Option 3: Server-Deployment (Node.js Server)

Für SSR-Anwendungen benötigen Sie einen Node.js-Server.

Schritte:

1. Build auf dem Server:

# Auf dem Server
git clone https://github.com/username/mein-nuxt-projekt.git
cd mein-nuxt-projekt
pnpm install
pnpm build

2. Server starten:

node .output/server/index.mjs

3. PM2 verwenden (Prozess-Manager, empfohlen):

# PM2 installieren
npm install -g pm2

# Anwendung starten
pm2 start .output/server/index.mjs --name "nuxt-app"

# Autostart aktivieren
pm2 startup
pm2 save

---

Option 4: Docker Deployment

Docker ermöglicht konsistente Deployments.

Dockerfile erstellen:

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

# Production-Stage
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/.output ./.output
COPY --from=builder /app/package*.json ./

EXPOSE 3000
CMD ["node", ".output/server/index.mjs"]

Docker-Image bauen & ausführen:

# Image bauen
docker build -t mein-nuxt-app .

# Container starten
docker run -p 3000:3000 mein-nuxt-app

---

14.3 Nginx-Konfiguration (für Server-Deployment)

Wenn Sie einen VPS (Virtual Private Server) verwenden, können Sie Nginx als Reverse Proxy konfigurieren.

Nginx-Konfiguration (/etc/nginx/sites-available/nuxt-app):

server {
    listen 80;
    server_name ihre-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;
    }
}

---

Nginx aktivieren:

# Symlink erstellen
sudo ln -s /etc/nginx/sites-available/nuxt-app /etc/nginx/sites-enabled/

# Nginx neu laden
sudo nginx -t
sudo systemctl reload nginx

# SSL (HTTPS) mit Certbot aktivieren
sudo certbot --nginx -d ihre-domain.de

---

14.4 Häufige Fehler beim Deployment

Fehler 1: PORT already in use

Lösung:

# Port prüfen
lsof -i :3000

# Prozess beenden
kill -9 <PID>

---

Fehler 2: MODULE_NOT_FOUND

Lösung:

# node_modules löschen und neu installieren
rm -rf node_modules
pnpm install

---

Fehler 3: Umgebungsvariablen fehlen

Lösung: Stellen Sie sicher, dass .env-Dateien auf dem Server vorhanden sind oder setzen Sie Umgebungsvariablen in der Deployment-Plattform.

Bei Vercel:

• Gehen Sie zu "Settings" → "Environment Variables"
• Fügen Sie Ihre Variablen hinzu

---

Fehler 4: 404 Fehler bei Seitenneuladung (SPA/SSR-Problem)

Lösung: Stellen Sie sicher, dass Ihr Server SSR unterstützt oder verwenden Sie nuxt generate für statische Seiten.

---

14.5 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Nuxt 3 Projekte zu bauen (nuxt build, nuxt generate)
• ✅ Deployment auf Vercel, Netlify, Server (Node.js) und Docker
• ✅ Nginx als Reverse Proxy zu konfigurieren
• ✅ Häufige Deployment-Fehler zu beheben

Nächste Schritte: Im nächsten Kapitel behandeln wir häufige Fehler & Interviewfragen für Nuxt 3.

---

📚 Weiterführende Ressourcen

• Nuxt 3 Deployment Dokumentation
• Vercel Deployment Guide
• PM2 Dokumentation
• Docker Dokumentation
• Nginx Reverse Proxy Konfiguration

---

Nächstes Kapitel: Kapitel 15: Häufige Fehler & Interviewfragen →