Webklar.com/DEPLOYMENT_HETZNER.md

🚀 Deployment-Anleitung für Hetzner Server

Diese Anleitung zeigt dir, wie du deine Next.js App auf einem Hetzner Server deployst.

📋 Voraussetzungen

• Hetzner Cloud Server (Ubuntu 22.04 oder neuer empfohlen)
• SSH-Zugang zum Server
• Domain (optional, aber empfohlen)
• Supabase-Projekt mit Environment Variables

---

🎯 Option 1: Direktes Deployment (Empfohlen)

Schritt 1: Server vorbereiten

# Auf deinem Server (via SSH)
sudo apt update && sudo apt upgrade -y

# Node.js 20.x installieren
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

# PM2 für Process Management installieren
sudo npm install -g pm2

# Nginx installieren (für Reverse Proxy)
sudo apt install -y nginx

# Git installieren (falls nicht vorhanden)
sudo apt install -y git

Schritt 2: Projekt auf Server klonen

# In deinem Home-Verzeichnis
cd ~
git clone https://github.com/DEIN_USERNAME/Webklar_app.git
cd Webklar_app

# Dependencies installieren
npm install

Schritt 3: Environment Variables setzen

# .env.production Datei erstellen
nano .env.production

Füge folgende Variablen ein:

NEXT_PUBLIC_SUPABASE_URL=deine_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=dein_supabase_anon_key
NODE_ENV=production

Schritt 4: Build erstellen

npm run build

Schritt 5: Mit PM2 starten

# PM2 Ecosystem File erstellen
nano ecosystem.config.js

Füge folgendes ein:

module.exports = {
  apps: [{
    name: 'webklar-app',
    script: 'npm',
    args: 'start',
    cwd: '/root/Webklar_app', // Passe den Pfad an
    env: {
      NODE_ENV: 'production',
      PORT: 3000
    }
  }]
}

# App mit PM2 starten
pm2 start ecosystem.config.js

# PM2 beim Server-Start automatisch starten
pm2 startup
pm2 save

Schritt 6: Nginx konfigurieren

sudo nano /etc/nginx/sites-available/webklar

Füge folgende Konfiguration ein:

server {
    listen 80;
    server_name deine-domain.de www.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_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;
        proxy_cache_bypass $http_upgrade;
    }
}

# Nginx Konfiguration aktivieren
sudo ln -s /etc/nginx/sites-available/webklar /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

Schritt 7: SSL mit Let's Encrypt (Optional, aber empfohlen)

# Certbot installieren
sudo apt install -y certbot python3-certbot-nginx

# SSL-Zertifikat erstellen
sudo certbot --nginx -d deine-domain.de -d www.deine-domain.de

# Auto-Renewal testen
sudo certbot renew --dry-run

---

🐳 Option 2: Deployment mit Docker (Einfacher)

Schritt 1: Dockerfile erstellen

Erstelle eine Dockerfile im Projekt-Root:

FROM node:20-alpine AS base

# Install dependencies only when needed
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

COPY package.json package-lock.json* ./
RUN npm ci

# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

ENV NEXT_TELEMETRY_DISABLED 1

RUN npm run build

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000
ENV HOSTNAME "0.0.0.0"

CMD ["node", "server.js"]

Schritt 2: next.config.js anpassen

Füge output: 'standalone' zur next.config.js hinzu:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone', // Für Docker
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: { unoptimized: true },
  trailingSlash: true,
};

module.exports = nextConfig;

Schritt 3: docker-compose.yml erstellen

version: '3.8'

services:
  webklar-app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NEXT_PUBLIC_SUPABASE_URL=${NEXT_PUBLIC_SUPABASE_URL}
      - NEXT_PUBLIC_SUPABASE_ANON_KEY=${NEXT_PUBLIC_SUPABASE_ANON_KEY}
      - NODE_ENV=production
    restart: unless-stopped

Schritt 4: Auf Server deployen

# Auf deinem Server
cd ~
git clone https://github.com/DEIN_USERNAME/Webklar_app.git
cd Webklar_app

# Docker installieren (falls nicht vorhanden)
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh

# Docker Compose installieren
sudo apt install -y docker-compose

# .env Datei erstellen
nano .env
# Füge deine Environment Variables ein

# Container bauen und starten
docker-compose up -d --build

# Logs ansehen
docker-compose logs -f

---

🔄 Updates deployen

Option 1 (Direktes Deployment):

cd ~/Webklar_app
git pull origin main
npm install
npm run build
pm2 restart webklar-app

Option 2 (Docker):

cd ~/Webklar_app
git pull origin main
docker-compose up -d --build

---

📊 Monitoring & Logs

PM2:

pm2 status          # Status anzeigen
pm2 logs webklar-app # Logs anzeigen
pm2 monit           # Live Monitoring

Docker:

docker-compose logs -f webklar-app
docker-compose ps

---

🔒 Sicherheit

1. Firewall konfigurieren:

sudo ufw allow 22/tcp   # SSH
sudo ufw allow 80/tcp   # HTTP
sudo ufw allow 443/tcp  # HTTPS
sudo ufw enable

2. Environment Variables niemals committen!
3. Regelmäßige Backups erstellen
4. SSH Keys statt Passwörter verwenden

---

🐛 Troubleshooting

App startet nicht:

• Prüfe Logs: pm2 logs oder docker-compose logs
• Prüfe Port 3000: sudo netstat -tulpn | grep 3000
• Prüfe Environment Variables

Nginx Fehler:

• Teste Konfiguration: sudo nginx -t
• Prüfe Logs: sudo tail -f /var/log/nginx/error.log

Build Fehler:

• Node.js Version prüfen: node -v (sollte 20.x sein)
• Dependencies neu installieren: rm -rf node_modules && npm install

---

📝 Checkliste vor dem Deployment

• Server vorbereitet (Node.js, PM2/Docker, Nginx)
• Projekt auf Server geklont
• Environment Variables gesetzt
• Build erfolgreich erstellt
• App läuft auf Port 3000
• Nginx konfiguriert und getestet
• SSL-Zertifikat installiert (optional)
• Firewall konfiguriert
• Domain zeigt auf Server-IP

---

Viel Erfolg beim Deployment! 🚀