React-Projekt in Docker & Multi-Stage Builds

Produktiv betriebene React-Anwendungen werden meist “gebaut” und danach in einem separaten schlanken Webserver-Image (z. B. nginx) ausgeliefert.
Mit sogenannten Multi-Stage Builds im Dockerfile lässt sich dieser Ablauf effizient und optimal abbilden.

Was ist ein Multi-Stage Build?

Ein Multi-Stage Build ermöglicht es, mehrere “FROM”-Abschnitte im selben Dockerfile zu nutzen. Zuerst wird das React-Projekt gebaut, anschliessend wird das Produktions-Build in ein kompaktes Webserver-Image übernommen.
So werden im finalen Image keine Build-Tools oder Quelltexte mehr benötigt.

Beispiel: Dockerfile für React + nginx

# 1. Build-Stage: Projekt bauen
FROM node:20 as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 2. Production-Stage: Webserver (nginx)
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Erklärung:

• Die erste Stage (build) kümmert sich nur um das Erzeugen des optimierten Build-Ordners.
• Die zweite Stage erhält ausschliesslich die gebauten Dateien und nutzt nginx als schlanken Webserver. Gerne! Hier die Erklärung:
• CMD ["nginx", "-g", "daemon off;"] startet nginx im Vordergrund, damit Docker den Container betreibt, solange nginx läuft. Wird nginx beendet, stoppt der Container automatisch.

Merksatz:
daemon off; = Nginx läuft im Vordergrund als Hauptprozess, wie Docker es verlangt.

---

Vorteile dieses Ansatzes

• Kleine Images (nur statische Dateien + nginx)
• Schnelle Builds und Deployments
• Keine sensiblen Entwicklungsdateien mehr im Endimage

---

Aufgabe

Übung: Multi-Stage Build für ein React-Projekt

1. Erstelle im Frontend-Ordner der MERN-App oder in einem neuen React-Projekt eine Datei Dockerfile mit der obigen Multi-Stage-Struktur.

2. Baue das Image so:

   docker build -t my-react-app .

3. Starte den Container und mappe Port 3000 auf Port 80 im Container:

   docker run -d -p 3000:80 my-react-app

4. Öffne http://localhost:3000 im Browser und prüfe, ob deine React-App angezeigt wird.

5. Teste, was passiert, wenn du den Befehl in der zweiten Stage (COPY --from=build ...) weglässt oder einen Fehler machst.

Zusatz:
Erkläre, warum Multi-Stage-Builds besonders für Produktivsysteme sinnvoll sind.

---

Im nächsten Kapitel folgt, wie statische Seiten mit nginx im Container bereitgestellt und individuell angepasst werden können.