React für Produktion bauen und deployen

npm run dev (Kapitel 7) startet einen ENTWICKLUNGS-Server MIT Hot-Reload – für PRODUKTION wird STATTDESSEN ein OPTIMIERTER, statischer Build benötigt.

Den Produktions-Build erzeugen

npm run build

Vite erzeugt ein dist/-Verzeichnis MIT minifiziertem JavaScript/CSS, Code-Splitting und Cache-freundlichen Dateinamen (Hash im Dateinamen) – GENAU der STANDARD-Ablauf, den JEDES moderne Frontend-Build-Tool bietet.

Umgebungsvariablen für Produktion

.env.production

VITE_API_URL=https://api.aufgaben-manager.example.com

Vite lädt .env.production AUTOMATISCH bei npm run build – GENAU DAS Prinzip aus Kapitel 74, jetzt MIT der ECHTEN, öffentlich erreichbaren API-Domain statt https://localhost/api.

Achtung: Die API-Domain (Kapitel 98) und die Frontend-Domain MÜSSEN ÜBEREINSTIMMEND in CORS_ALLOW_ORIGIN (API-Seite) UND VITE_API_URL (Frontend-Seite) konfiguriert sein – EIN Tippfehler HIER äußert sich als CORS-Fehler, der SCHWER von einem Authentifizierungsfehler zu UNTERSCHEIDEN ist.

Statisches Hosting

dist/ enthält NUR statische Dateien (HTML/CSS/JS) – JEDER statische Webhost (Nginx, ein CDN, GENAU wie in den vorherigen React-Tutorials beschrieben) reicht AUS, KEIN Node.js-Laufzeitserver nötig.

nginx.conf (Ausschnitt)

location / {
    try_files $uri /index.html;
}

try_files $uri /index.html ist ENTSCHEIDEND für React Router (Kapitel 81): eine DIREKTE Anfrage an /projects/1 MUSS index.html ausliefern (React Router übernimmt DANN die CLIENT-seitige Weiterleitung), statt einen Server-seitigen 404 zu liefern.

Beide Domains im Zusammenspiel

Drei öffentliche Endpunkte, EIN Full-Stack-System

https://aufgaben-manager.example.com        ← statisches React-Hosting (dist/)
https://api.aufgaben-manager.example.com    ← API Platform (Kapitel 98)
https://api.aufgaben-manager.example.com/.well-known/mercure  ← Mercure-Hub (Block 8)

Tipp: EIN CI/CD-Workflow (z. B. GitHub Actions, aus den separaten CI/CD-Tutorials bekannt) würde `npm run test` (Kapitel 95-96), `npm run build` UND ein automatisches Hochladen des dist/-Verzeichnisses BEI JEDEM Push AUTOMATISCH ausführen – EXAKT der letzte SCHRITT, um DIESE Schulung in ein ECHTES, WARTBARES Projekt zu verwandeln.