fix: Remove Traefik labels and add Nginx Proxy Manager support
All checks were successful
Dev Deployment (Zero Downtime) / deploy-dev (push) Successful in 13m7s

- 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
This commit is contained in:
2026-01-09 17:06:08 +01:00
parent d8001fc2c4
commit 60e69eb37b
2 changed files with 208 additions and 0 deletions

View File

@@ -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

View File

@@ -5,9 +5,19 @@ 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");
response.headers.set("X-Frame-Options", "DENY");