Background Decoration

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

docker-compose.yml
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

ServiceZugeordnete Netze & DNS-Namen

Next.js Frontend:frontend-net + backend-netLaravel API (backend):frontend-net + backend-netDatenbank (db):Nur backend-net (geschützt vor Client)Redis (redis):Nur backend-net (geschützt vor Client)
Headless Docker Guide

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:

Nächste Schritte & Kontakt

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.

Beratung anfragen

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.

URL zu WSL2 Optimizer übertragen