From 60e69eb37b5e0929e77b3c8c4ff086c1fa246c32 Mon Sep 17 00:00:00 2001 From: denshooter Date: Fri, 9 Jan 2026 17:06:08 +0100 Subject: [PATCH] fix: Remove Traefik labels and add Nginx Proxy Manager support - Remove Traefik-specific labels (user uses Nginx Proxy Manager) - Add proper host header handling in middleware for 421 fix - Create NGINX_PROXY_MANAGER_SETUP.md with complete setup guide - Fix 421 Misdirected Request by ensuring proper proxy headers --- NGINX_PROXY_MANAGER_SETUP.md | 198 +++++++++++++++++++++++++++++++++++ middleware.ts | 10 ++ 2 files changed, 208 insertions(+) create mode 100644 NGINX_PROXY_MANAGER_SETUP.md diff --git a/NGINX_PROXY_MANAGER_SETUP.md b/NGINX_PROXY_MANAGER_SETUP.md new file mode 100644 index 0000000..1424a1f --- /dev/null +++ b/NGINX_PROXY_MANAGER_SETUP.md @@ -0,0 +1,198 @@ +# 🔧 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:** +```yaml +networks: + - portfolio_net + - proxy # ✅ Bereits konfiguriert +``` + +**Staging:** +```yaml +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: + +```nginx +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: + +```bash +# 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:** + ```bash + docker ps --format "table {{.Names}}\t{{.Status}}" + ``` + +2. **PrĂŒfe Netzwerk:** + ```bash + 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:** + ```bash + # 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 diff --git a/middleware.ts b/middleware.ts index 4db1d34..d197c8b 100644 --- a/middleware.ts +++ b/middleware.ts @@ -5,8 +5,18 @@ export function middleware(request: NextRequest) { // For /manage and /editor routes, the pages handle their own authentication // No middleware redirect needed - let the pages show login forms + // Fix for 421 Misdirected Request with Nginx Proxy Manager + // Ensure proper host header handling for reverse proxy + const hostname = request.headers.get('host') || request.headers.get('x-forwarded-host') || ''; + // Add security headers to all responses const response = NextResponse.next(); + + // Set proper headers for Nginx Proxy Manager + if (hostname) { + response.headers.set('X-Forwarded-Host', hostname); + response.headers.set('X-Real-IP', request.headers.get('x-real-ip') || request.headers.get('x-forwarded-for') || ''); + } // Security headers (complementing next.config.ts headers) response.headers.set("X-DNS-Prefetch-Control", "on");