portfolio/NGINX_PROXY_MANAGER_SETUP.md

🔧 Nginx Proxy Manager Setup Guide

Übersicht

Dieses Projekt nutzt Nginx Proxy Manager als Reverse Proxy. Die Container sind im proxy Netzwerk, damit Nginx Proxy Manager auf sie zugreifen kann.

🐳 Docker Netzwerk-Konfiguration

Die Container sind bereits im proxy Netzwerk konfiguriert:

Production:

networks:
  - portfolio_net
  - proxy  # ✅ Bereits konfiguriert

Staging:

networks:
  - portfolio_staging_net
  - proxy  # ✅ Bereits konfiguriert

📋 Nginx Proxy Manager Konfiguration

Production (dk0.dev)

1. Gehe zu Nginx Proxy Manager → Hosts → Proxy Hosts → Add Proxy Host

2. Details Tab:

   • Domain Names: dk0.dev, www.dk0.dev
   • Scheme: http
   • Forward Hostname/IP: portfolio-app (Container-Name)
   • Forward Port: 3000
   • Cache Assets: ✅ (optional)
   • Block Common Exploits: ✅
   • Websockets Support: ✅ (für Chat/Activity)

3. SSL Tab:

   • SSL Certificate: Request a new SSL Certificate
   • Force SSL: ✅
   • HTTP/2 Support: ✅
   • HSTS Enabled: ✅

4. Advanced Tab:

   # Custom Nginx Configuration
   # Fix for 421 Misdirected Request
   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_set_header X-Forwarded-Host $host;
   proxy_set_header X-Forwarded-Port $server_port;
   
   # Fix HTTP/2 connection reuse issues
   proxy_http_version 1.1;
   proxy_set_header Connection "";
   
   # Timeouts
   proxy_connect_timeout 60s;
   proxy_send_timeout 60s;
   proxy_read_timeout 60s;
   

Staging (dev.dk0.dev)

1. Gehe zu Nginx Proxy Manager → Hosts → Proxy Hosts → Add Proxy Host

2. Details Tab:

   • Domain Names: dev.dk0.dev
   • Scheme: http
   • Forward Hostname/IP: portfolio-app-staging (Container-Name)
   • Forward Port: 3000 (interner Port im Container)
   • Cache Assets: ❌ (für Dev besser deaktiviert)
   • Block Common Exploits: ✅
   • Websockets Support: ✅

3. SSL Tab:

   • SSL Certificate: Request a new SSL Certificate
   • Force SSL: ✅
   • HTTP/2 Support: ✅
   • HSTS Enabled: ✅

4. Advanced Tab:

   # Custom Nginx Configuration
   # Fix for 421 Misdirected Request
   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_set_header X-Forwarded-Host $host;
   proxy_set_header X-Forwarded-Port $server_port;
   
   # Fix HTTP/2 connection reuse issues
   proxy_http_version 1.1;
   proxy_set_header Connection "";
   
   # Timeouts
   proxy_connect_timeout 60s;
   proxy_send_timeout 60s;
   proxy_read_timeout 60s;
   

🔍 421 Misdirected Request - Lösung

Der 421 Misdirected Request Fehler tritt auf, wenn:

1. HTTP/2 Connection Reuse: Nginx Proxy Manager versucht, eine HTTP/2-Verbindung wiederzuverwenden, aber der Host-Header stimmt nicht überein
2. Host-Header nicht richtig weitergegeben: Der Container erhält den falschen Host-Header

Lösung 1: Advanced Tab Konfiguration (Wichtig!)

Füge diese Zeilen im Advanced Tab von Nginx Proxy Manager hinzu:

proxy_http_version 1.1;
proxy_set_header Connection "";
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Host $host;

Lösung 2: Container-Namen verwenden

Stelle sicher, dass du den Container-Namen (nicht IP) verwendest:

• Production: portfolio-app
• Staging: portfolio-app-staging

Lösung 3: Netzwerk prüfen

Stelle sicher, dass beide Container im proxy Netzwerk sind:

# Prüfen
docker network inspect proxy

# Sollte enthalten:
# - portfolio-app
# - portfolio-app-staging

✅ Checkliste

• Container sind im proxy Netzwerk
• Nginx Proxy Manager nutzt Container-Namen (nicht IP)
• Advanced Tab Konfiguration ist gesetzt
• proxy_http_version 1.1 ist gesetzt
• proxy_set_header Host $host ist gesetzt
• SSL-Zertifikat ist konfiguriert
• Websockets Support ist aktiviert

🐛 Troubleshooting

421 Fehler weiterhin vorhanden?

1. Prüfe Container-Namen:

   docker ps --format "table {{.Names}}\t{{.Status}}"
   

2. Prüfe Netzwerk:

   docker network inspect proxy | grep -A 5 portfolio
   

3. Prüfe Nginx Proxy Manager Logs:

   • Gehe zu Nginx Proxy Manager → System Logs
   • Suche nach "421" oder "misdirected"

4. Teste direkt:

   # Vom Host aus
   curl -H "Host: dk0.dev" http://portfolio-app:3000
   
   # Sollte funktionieren
   

5. Deaktiviere HTTP/2 temporär:

   • In Nginx Proxy Manager → SSL Tab
   • HTTP/2 Support: ❌
   • Teste ob es funktioniert

📝 Wichtige Hinweise

• Container-Namen sind wichtig: Nutze portfolio-app nicht localhost oder IP
• Port: Immer Port 3000 (interner Container-Port), nicht 3000:3000
• Netzwerk: Beide Container müssen im proxy Netzwerk sein
• HTTP/2: Kann Probleme verursachen, wenn Advanced Config fehlt

🔄 Nach Deployment

Nach jedem Deployment:

1. Prüfe ob Container läuft: docker ps | grep portfolio
2. Prüfe ob Container im proxy-Netzwerk ist
3. Teste die URL im Browser
4. Prüfe Nginx Proxy Manager Logs bei Problemen