MERN-Stack komplett mit Compose

Der MERN-Stack besteht aus MongoDB, Express.js, React und Node.js.
Mit Docker Compose kann die gesamte Anwendung samt Frontend, Backend und Datenbank als zusammengehörige Services verwaltet werden.

Komplette docker-compose.yml für MERN

Eine mögliche Grundstruktur für ein MERN-Setup:

services:
  mongo:
    image: mongo:7.0
    ports:
      - "27017:27017"
    volumes:
      - mongo-data:/data/db

  backend:
    build: ./backend
    ports:
      - "5000:5000"
    environment:
      - MONGO_URL=mongo://mongo:27017/meinedb
    depends_on:
      - mongo

  frontend:
    build: ./frontend
    ports:
      - "3000:80"
    depends_on:
      - backend

volumes:
  mongo-data:

Kurz erklärt:

mongo: Die Datenbank mit persistentem Speicher
backend: Express-API, wird aus einem lokalen Dockerfile gebaut
frontend: React-App, ebenfalls per eigenem Dockerfile gebaut und läuft z. B. auf nginx
depends_on: Definiert die Start-Reihenfolge der Services
volumes: Für Datenpersistenz von MongoDB

Befehle:

Aufbau/Start aller Container:
Terminal-Fenster
```
docker compose up --build
```
Stoppen aller Container:
Terminal-Fenster
```
docker compose down
```

Aufgabe

Lege einen Projektordner mit drei Unterordnern an: backend, frontend, und einen Hauptordner mit der docker-compose.yml.
Im backend- und im frontend-Ordner muss sich jeweils ein gültiges Dockerfile befinden.
Passe gegebenenfalls die Umgebungsvariablen an (z. B. Datenbank-URL im Backend).
Baue und starte alle Services gleichzeitig mit:
Terminal-Fenster
```
docker compose up --build
```
Überprüfe, ob das Backend unter http://localhost:5000 und das Frontend (z. B. über nginx auf Port 3000) erreichbar ist.
Stoppe alle Container mit:
Terminal-Fenster
```
docker compose down
```

Zusatz:
Erweitere das Compose-File um ein weiteres Volume für Backups oder versuche, das Frontend auf einen anderen Port zu legen.

Im nächsten Kapitel folgt, wie React-Apps optimal mit Multi-Stage-Builds und nginx dockerisiert werden können.