HEADLESS NETWORK ORCHESTRATOR
Orchestriere Docker-Netzwerke für Next.js und Laravel. Löse das DNS- und Routing-Problem zwischen Client & Server Components.
Dienste-Parameter
version: '3.8'
services:
# Next.js Frontend App
frontend:
image: node:20-alpine
container_name: nextjs-frontend
restart: unless-stopped
ports:
- "3000:3000"
volumes:
- ./frontend:/app
- /app/node_modules
working_dir: /app
command: npm run dev
environment:
- PORT=3000
- NEXT_PUBLIC_API_URL=http://localhost:8000
# Nutzt den internen DNS-Namen von Docker für SSR
- INTERNAL_API_URL=http://backend:8000
networks:
- frontend-net
- backend-net
depends_on:
backend:
condition: service_healthy
# Laravel Backend API
backend:
image: php:8.3-fpm-alpine
container_name: laravel-backend
restart: unless-stopped
ports:
- "8000:8000"
volumes:
- ./backend:/www/wwwroot/project
working_dir: /www/wwwroot/project
environment:
- DB_HOST=db
- REDIS_HOST=redis
networks:
- frontend-net
- backend-net
depends_on:
db:
condition: service_started
redis:
condition: service_started
healthcheck:
test: ["CMD", "curl", "-f", "http://localhost:8000/up"]
interval: 10s
timeout: 5s
retries: 3
start_period: 10s
# MySQL Datenbank (Nur im privaten Back-Netz)
db:
image: mysql:8.0
container_name: database-container
restart: unless-stopped
ports:
- "3306:3306"
environment:
MYSQL_ROOT_PASSWORD: root_password_local
MYSQL_DATABASE: project_db
MYSQL_USER: project_user
MYSQL_PASSWORD: project_password_local
volumes:
- db-data:/var/lib/mysql
networks:
- backend-net
# Redis Cache (Nur im privaten Back-Netz)
redis:
image: redis:alpine
container_name: redis-cache
restart: unless-stopped
ports:
- "6379:6379"
networks:
- backend-net
networks:
# Öffentliches Netz für Browser-Clients & Proxy
frontend-net:
driver: bridge
# Privates internes Netz für SSR & DB/Cache
backend-net:
driver: bridge
volumes:
db-data:
Vorschau: Getrenntes Bridge Netzwerk
Warum getrennte Docker Networks Sinn machen
Eine saubere Netzwerktrennung schützt sensible Datenquellen (Datenbanken, Cache-Services) vor direktem Zugriff von außen und isoliert die Frontend-SSR Logik.
DNS Name Resolution im Docker Compose
Next.js 15+ Server Components holen Daten vorab auf dem Server (Server-Side Rendering). Wenn Next.js die Laravel-API abfragt, geschieht dies vom Next.js-Container zum Laravel-Container. Da beide im selben Docker-Netzwerk verbunden sind, kann Next.js über den Servicenamen `backend` kommunizieren. Im Browser des Endbenutzers hingegen muss die API über `localhost:$8000` erreichbar sein.
Depends_on mit Healthcheck
Wenn du Container hochfährst, versucht das Next.js-Frontend oft sofort, Daten von der API zu holen, während die API (oder Datenbank) noch bootet. Das führt zu 502 Fehlermeldungen. Der eingebaute Docker-Healthcheck auf `/up` teilt Next.js mit, wann das Backend wirklich empfangsbereit ist. Erst danach startet der Next.js dev server.
Empfohlene Tutorials & Deep-Dives
Dieses Tool ist Teil unserer Serie zu entkoppelten Web-Architekturen. Erfahre mehr über die sichere API-Anbindung, Cookie-Authentifizierung und CORS-Einstellungen in unseren detaillierten Anleitungen:
Dein Webprojekt professionell umsetzen?
Du brauchst professionelle Unterstützung bei deinem Web-Projekt? Wir helfen dir bei der Umsetzung von modernen Layouts, performanten Animationen und maßgeschneiderten Lösungen, damit dein Projekt wirklich glänzt.
Webinteger kontaktieren
Sende uns deine Testergebnisse direkt zu. Wir analysieren dein Projekt im Detail und erstellen dir einen Fahrplan zur Behebung.
Nächster Test: WSL2 Optimizer
Nimm deine URL mit zum nächsten Tool, um deine SEO-Analyse zu vervollständigen und weitere versteckte Fehler aufzudecken.