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

```bash
# 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

```bash
# 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

```bash
# .env.production Datei erstellen
nano .env.production
```

Füge folgende Variablen ein:
```env
NEXT_PUBLIC_SUPABASE_URL=deine_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=dein_supabase_anon_key
NODE_ENV=production
```

### Schritt 4: Build erstellen

```bash
npm run build
```

### Schritt 5: Mit PM2 starten

```bash
# PM2 Ecosystem File erstellen
nano ecosystem.config.js
```

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

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

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

### Schritt 6: Nginx konfigurieren

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

Füge folgende Konfiguration ein:
```nginx
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;
    }
}
```

```bash
# 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)

```bash
# 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:

```dockerfile
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:

```javascript
/** @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

```yaml
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

```bash
# 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):
```bash
cd ~/Webklar_app
git pull origin main
npm install
npm run build
pm2 restart webklar-app
```

### Option 2 (Docker):
```bash
cd ~/Webklar_app
git pull origin main
docker-compose up -d --build
```

---

## 📊 Monitoring & Logs

### PM2:
```bash
pm2 status          # Status anzeigen
pm2 logs webklar-app # Logs anzeigen
pm2 monit           # Live Monitoring
```

### Docker:
```bash
docker-compose logs -f webklar-app
docker-compose ps
```

---

## 🔒 Sicherheit

1. **Firewall konfigurieren:**
```bash
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! 🚀**