React-Anwendungen im Produktivbetrieb bereitstellen: Docker-Setup mit Traefik als Reverse Proxy

Eine React-Anwendung lokal zu entwickeln ist unkompliziert. Bei der korrekten Bereitstellung auf einem Produktivserver stoßen die meisten Entwickler dagegen auf unerwartete Hindernisse. Dieser Leitfaden dokumentiert eine tatsächliche Fehlersuche beim Deployment: Alles schien korrekt konfiguriert – der Container lief, die Traefik-Labels waren gesetzt und die DNS-Auflösung funktionierte –, dennoch gab die Anwendung weiterhin 404-Fehler zurück.

Wir führen Sie durch den gesamten Prozess: React-Anwendungen lokal bauen und auf Docker-Servern im Produktivbetrieb bereitstellen, mit korrekter Reverse-Proxy-Konfiguration, automatischer SSL-Verwaltung und professionellem Domain-Routing. Dieser Ansatz baut auf unserer Philosophie selbst betriebener Lösungen auf. Wie unsere Anleitungen zeigen, können Sie n8n für die Workflow-Automatisierung selbst betreiben und mandantenfähige Entwicklungsstacks aufbauen, um die vollständige Kontrolle über den Betrieb zu behalten.

Das Problem mit herkömmlichen React-Bereitstellungen

Die meisten Tutorials zur Bereitstellung von React-Anwendungen lassen die entscheidenden Details für den Produktivbetrieb aus. Sie zeigen npm run build und das Kopieren von Dateien für nginx, behandeln aber selten folgende Themen:

Konfigurationskonflikte:

Benutzerdefinierte HTTP-Router, die mit globalen Weiterleitungen in Konflikt geraten
Syntaxfehler in Traefik-Labels, die zu unbemerkten Fehlern führen
Probleme bei der Bindung an IPv6- statt IPv4-Adressen in Health Checks
Fehlende Service-Port-Zuordnungen, die 404-Fehler erzeugen

Ressourcenverwaltung:

Fehler wegen voller Festplatte, die die Container-Registrierung verhindern
Aufgeblähte Docker-Images durch unnötige Build-Artefakte
Ineffiziente Caching-Strategien, die Bereitstellungen verlangsamen
Begrenzter Arbeitsspeicher, der die Build-Leistung beeinträchtigt

Eignung für den Produktivbetrieb:

Ordnungsgemäße SSL-Zertifikatsautomatisierung
Bereitstellungsstrategien ohne Ausfallzeit
Health-Check-Konfigurationen
Integration von Logging und Monitoring

Das Ergebnis: Stundenlange Fehlersuche, weil eine lokal einwandfrei funktionierende App im Produktivbetrieb rätselhafte 404-Fehler zurückgibt, obwohl „alles korrekt aussieht“.

Die von uns verwendeten Tools

So arbeitet jede Komponente unserer schlanken Architektur für React-Deployments:

Vite: Modernes Build-Tool

Vite bietet blitzschnelle Entwicklung und optimierte Builds für den Produktivbetrieb. Im Gegensatz zu Create React App nutzt Vite native ES-Module während der Entwicklung und erstellt hochoptimierte Bundles für den Produktivbetrieb. Ihre React-App wird in Sekunden statt Minuten gebaut.

Der entscheidende Vorteil? Vite handhabt automatisch Code-Splitting, Tree Shaking und Asset-Optimierung. Sie erhalten produktionsreife Builds ohne komplexe Webpack-Konfigurationen.

Docker: Containerisierung für Konsistenz

Docker sorgt dafür, dass Ihre React-App in der Entwicklung und im Produktivbetrieb identisch läuft. Derselbe nginx-Container, der Ihre App lokal ausliefert, verhält sich auf Ihrem Produktivserver genauso. Damit entfällt das klassische „Auf meinem Rechner funktioniert es“-Problem weitgehend.

Docker verpackt Ihre gesamte Anwendungsumgebung – React-Build-Dateien, nginx-Konfiguration und Laufzeitumgebung – in einen portablen Container, der überall funktioniert.

Traefik: Intelligenter Reverse Proxy

Traefik leitet Anfragen automatisch anhand des Domainnamens an die passende Anwendung im Container weiter. Statt für jede neue Anwendung manuell komplexe nginx- oder Apache-Regeln zu konfigurieren, lassen Sie Traefik die Labels Ihrer Docker-Container lesen und das Routing automatisch einrichten.

In unserem mandantenfähigen Docker-Setup haben wir die Leistungsfähigkeit von Traefik für die Verwaltung mehrerer Kundenumgebungen demonstriert. Dieselben Prinzipien gelten hier für die Verwaltung mehrerer React-Anwendungen auf einem einzigen Server.

Traefik übernimmt die SSL-Terminierung über Let's Encrypt automatisch, erkennt Dienste selbstständig und ermöglicht detailliertes Monitoring – bei minimalem Konfigurationsaufwand.

nginx: Webserver für den Produktivbetrieb

nginx stellt Ihre statischen React-Build-Dateien mit außergewöhnlicher Leistung bereit. Es ist der De-facto-Standard für die Bereitstellung statischer Inhalte im Produktivbetrieb und verarbeitet effizient Tausende gleichzeitiger Verbindungen bei minimalem Ressourcenverbrauch.

Den Bereitstellungsablauf verstehen

Der vollständige Weg von der lokalen Entwicklung zum Produktivbetrieb:

Lokale Entwicklung: Führen Sie Ihre React-App lokal mit npm run dev aus und testen Sie sie
Build für den Produktivbetrieb: Erstellen Sie optimierte statische Dateien mit npm run build
Containerisierung: Verpacken Sie Build-Dateien in einen nginx-Docker-Container
Server-Deployment: Laden Sie den Container auf den Produktivserver hoch und starten Sie ihn dort
Traefik-Registrierung: Routing und Bereitstellung der SSL-Zertifikate erfolgen automatisch
Zustandsüberwachung: Kontinuierliche Health Checks stellen die Verfügbarkeit sicher

Was dies so leistungsfähig macht, ist die Automatisierung. Einmal korrekt konfiguriert, können Sie Updates in unter 60 Sekunden mit einem einzigen Befehl bereitstellen.

Einrichtung Ihrer React-Anwendung

Projektstruktur für den Produktivbetrieb

Organisieren Sie Ihr React-Projekt mit Blick auf die Bereitstellung:

my-react-app/
├── src/                    # React source code
├── public/                 # Static assets
├── dist/                   # Build output (auto-generated)
├── package.json           # Dependencies
├── vite.config.ts         # Vite configuration
├── Dockerfile             # Container definition
├── nginx.conf             # nginx configuration
└── docker-compose.yml     # Deployment definition

Optimierung Ihrer Vite-Konfiguration

Erstellen Sie vite.config.ts mit produktionsoptimierten Einstellungen:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    sourcemap: false, // Disable in production for security
    minify: 'terser',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
        },
      },
    },
  },
  server: {
    port: 3000,
    host: true, // Enable network access
  },
})

Diese Konfiguration:

Trennt Bibliotheken von Drittanbietern für besseres Caching
Minifiziert Code für kleinere Dateigrößen
Deaktiviert Source Maps im Produktivbetrieb und vermeidet damit die Veröffentlichung Ihres ursprünglichen, nicht minifizierten Quellcodes
Optimiert Chunk-Splitting für schnellere Ladezeiten

Build für den Produktivbetrieb

Erstellen Sie Ihr optimiertes Bundle für den Produktivbetrieb:

# Install dependencies
npm install

# Create production build
npm run build

# Verify build output
ls -lh dist/

Ihr dist/-Ordner sollte enthalten:

index.html – Einstiegspunkt
assets/ – Minifiziertes JS, CSS und Bilder
Statische Dateien aus public/

Container für den Produktivbetrieb erstellen

nginx-Konfiguration für React

React-Anwendungen verwenden clientseitiges Routing, was eine spezielle nginx-Konfiguration erfordert. Erstellen Sie nginx.conf:

server {
    listen 80;
    server_name _;
    
    root /usr/share/nginx/html;
    index index.html;

    # Gzip compression for better performance
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript 
               application/x-javascript application/xml+rss 
               application/javascript application/json;

    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;

    # SPA: Route all paths to index.html for client-side routing
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Cache static assets aggressively
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # No cache for HTML to ensure updates are immediate
    location ~* \.html$ {
        expires -1;
        add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
    }

    # Health check endpoint for monitoring
    location /health {
        access_log off;
        return 200 "healthy\n";
        add_header Content-Type text/plain;
    }
}

Entscheidend ist try_files $uri $uri/ /index.html. Diese Direktive stellt sicher, dass React Router im Produktivbetrieb korrekt funktioniert: Für alle Routen wird die Hauptdatei index.html ausgeliefert.

Dockerfile für den Produktivbetrieb

Erstellen Sie ein optimiertes Dockerfile:

FROM nginx:alpine

# Copy custom nginx configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copy production build files
COPY dist/ /usr/share/nginx/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Hier wird nginx:alpine für ein kleines Image für den Produktivbetrieb verwendet (Stand Oktober 2026 etwa 29 MB komprimiert auf Docker Hub), das alles enthält, was zum Ausliefern Ihrer React-App benötigt wird.

Docker-Compose-Konfiguration

Erstellen Sie docker-compose.yml für eine einfache Bereitstellung:

services:
  my-react-app:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: my-react-app
    restart: unless-stopped
    networks:
      - proxy
    labels:
      # Enable Traefik
      - "traefik.enable=true"
      
      # Define routing rule
      - "traefik.http.routers.myapp.rule=Host(`app.yourdomain.com`)"
      - "traefik.http.routers.myapp.entrypoints=https"
      - "traefik.http.routers.myapp.tls=true"
      - "traefik.http.routers.myapp.tls.certresolver=letsencrypt"
      
      # Define service port
      - "traefik.http.services.myapp.loadbalancer.server.port=80"
      
    healthcheck:
      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://127.0.0.1:80/health"]
      interval: 30s
      timeout: 3s
      retries: 3
      start_period: 5s

networks:
  proxy:
    external: true

Wichtige Konfigurationshinweise:

Im Labels-Abschnitt scheitern viele Deployments. Beachten Sie, welche Konfigurationen wir weglassen:

Keine separate HTTP-Router-Definition
Keine benutzerdefinierte Redirect-Middleware
Keine HTTP-Entrypoint-Konfiguration

Traefiks globale Konfiguration übernimmt bereits die Weiterleitung von HTTP zu HTTPS. In unserer Konfiguration führten zusätzliche benutzerdefinierte HTTP-Router pro Service zu Konflikten mit dieser Weiterleitung und verursachten 404-Fehler – genau das Problem, das wir bei unserer Fehlersuche gelöst haben.

Bereitstellung auf Ihrem Produktivserver

Voraussetzungen auf Ihrem Server

Ihr Produktivserver benötigt:

Docker-Umgebung:

# Verify Docker is installed
docker --version
docker compose --version

# Verify Traefik is running
docker ps | grep traefik

# Verify proxy network exists
docker network ls | grep proxy

Falls Traefik noch nicht eingerichtet ist, lesen Sie unseren Leitfaden für mandantenfähige Docker-Umgebungen, der die Einrichtung von Traefik ausführlich behandelt.

Ausreichend Speicherplatz:

# Check available space
df -h /

# You need at least 2-5GB free for Docker operations

DNS-Konfiguration:

Richten Sie den DNS-Eintrag für app.yourdomain.com auf die IP-Adresse Ihres Servers aus
Warten Sie auf die DNS-Propagierung (normalerweise 5-60 Minuten)

Hochladen Ihrer Anwendung

Übertragen Sie Ihre Anwendung auf den Server:

# From your local machine
scp -r my-react-app/ user@your-server:/opt/

# Or use rsync for efficient updates
rsync -avz --exclude 'node_modules' \
  my-react-app/ user@your-server:/opt/my-react-app/

Container erstellen und starten

Verbinden Sie sich per SSH mit Ihrem Server und führen Sie das Deployment aus:

# Navigate to application directory
cd /opt/my-react-app

# Build the Docker image
docker compose build

# Start the container
docker compose up -d

# Verify it's running
docker compose ps

Überprüfung der Bereitstellung

Prüfen Sie, ob alles funktioniert:

# Test container health internally
docker compose exec my-react-app wget -q -O- http://127.0.0.1/health

# Check Traefik routing (wait 30 seconds for SSL)
curl -I https://app.yourdomain.com

# View container logs
docker compose logs -f

Sie sollten HTTP/2 200 vom curl-Befehl sehen, was den Erfolg bestätigt.

Häufige Bereitstellungsfehler und Lösungen

404-Fehler trotz korrekter Konfiguration

Symptom: Traefik gibt HTTP/2 404 zurück, obwohl der Container intern funktioniert.

Ursache: Mehrere Router-Definitionen für denselben Service ohne korrekte Service-Port-Zuordnung oder benutzerdefinierte HTTP-Router, die Traefiks globale Weiterleitungen überschreiben.

Lösung:

# Remove these labels if present:
# - "traefik.http.middlewares.myapp-redirect.redirectscheme.scheme=https"
# - "traefik.http.routers.myapp-http.rule=Host(`app.yourdomain.com`)"
# - "traefik.http.routers.myapp-http.entrypoints=http"
# - "traefik.http.routers.myapp-http.middlewares=myapp-redirect"

# Keep only HTTPS router:
labels:
  - "traefik.enable=true"
  - "traefik.http.routers.myapp.rule=Host(`app.yourdomain.com`)"
  - "traefik.http.routers.myapp.entrypoints=https"
  - "traefik.http.routers.myapp.tls.certresolver=letsencrypt"
  - "traefik.http.services.myapp.loadbalancer.server.port=80"

Traefiks globale HTTP-zu-HTTPS-Weiterleitung (konfiguriert in traefik.yml) verarbeitet HTTP-Verkehr automatisch. In unserer Konfiguration verursachten benutzerdefinierte HTTP-Router pro Service Konflikte.

Container mit dem Status „unhealthy“

Symptom: docker compose ps zeigt den Container als „unhealthy“ an

Ursache: Der Health Check verwendet localhost, das zur IPv6-Adresse [::1] aufgelöst wird, während nginx nur auf IPv4 lauscht.

Lösung:

healthcheck:
  # Use explicit IPv4 address instead of localhost
  test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://127.0.0.1:80/health"]

Docker-Build schlägt mit „No Space Left“ fehl

Symptom: Build schlägt mit Speicherplatzfehlern fehl

Lösung:

# Check disk usage
df -h /

# Clean Docker system
docker system prune -a -f

# Remove unused images
docker image prune -a -f

# Remove unused volumes
docker volume prune -f

Wenn die Festplatte tatsächlich voll ist (>95 %), müssen Sie Speicherplatz freigeben oder die Speicherkapazität erweitern. Docker benötigt für das Caching der Image-Schichten und den Build-Prozess temporären Speicherplatz.

SSL-Zertifikat wird nicht generiert

Symptom: Curl zeigt nach 10+ Minuten ein selbstsigniertes Zertifikat an

Häufige Ursachen:

DNS-Einträge verweisen nicht korrekt auf den Server
Port 80/443 nicht aus dem Internet erreichbar
Aufruflimit von Let's Encrypt erreicht (5 doppelte Zertifikate für dieselbe Gruppe von Hostnamen oder 50 Zertifikate pro registrierter Domain, jeweils pro 7 Tage)

Lösung:

# Verify DNS resolution
dig app.yourdomain.com

# Test port accessibility
curl -I http://app.yourdomain.com

# Check Traefik logs for ACME errors
docker logs traefik | grep -i acme

# Restart Traefik if needed
docker restart traefik

React-Router-404-Fehler beim Aktualisieren

Symptom: Die App funktioniert beim ersten Laden, zeigt aber einen 404-Fehler an, wenn eine Route wie /about im Browser neu geladen wird

Ursache: Fehlende try_files-Direktive in der nginx-Konfiguration

Lösung: Stellen Sie sicher, dass Ihre nginx.conf Folgendes enthält:

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

Dies weist nginx an, index.html für alle Routen bereitzustellen, sodass React Router das Routing clientseitig übernimmt.

Container startet, aber Traefik kann ihn nicht erreichen

Symptom: Der Container läuft, aber Traefik gibt „Service Unavailable“ zurück

Lösung:

# Verify container is on correct network
docker network inspect proxy

# Check if container is listed
docker inspect my-react-app | grep -A 20 Networks

# Ensure proxy network exists
docker network create proxy

Optimierung für den Produktivbetrieb

Bereitstellungen mit kurzer Ausfallzeit implementieren

Aktualisieren Sie Ihre Anwendung mit nur einer kurzen Unterbrechung:

#!/bin/bash
# deploy-update.sh - Low-downtime deployment
set -e

cd /opt/my-react-app

# Pull latest code (from git or updated files)
git pull origin main

# Build new production assets
npm install
npm run build

# Build the new image while the old container keeps serving
docker compose build my-react-app

# Replace the container: Compose stops the old one, then starts the new one
docker compose up -d --no-deps my-react-app

# Traefik routes to the new container once its health check passes

Wie die Kommentare im Skript festhalten, stoppt docker compose up den alten Container, bevor der Ersatz gestartet wird. Ein Service mit einem festen container_name kann zudem nicht mit zwei Instanzen parallel laufen. Rechnen Sie daher mit einer kurzen Unterbrechung, während nginx startet. Aktualisierungen ganz ohne Ausfallzeit benötigen eine zweite Replik oder eine Blue-Green-Konfiguration hinter Traefik.

Erweiterte Health Checks

Implementieren Sie eine umfassende Zustandsüberwachung:

healthcheck:
  test: |
    wget --no-verbose --tries=1 --spider http://127.0.0.1:80/health &&
    wget --no-verbose --tries=1 --spider http://127.0.0.1:80/ 
  interval: 30s
  timeout: 5s
  retries: 3
  start_period: 10s

Dies prüft sowohl den Health-Endpunkt als auch die Hauptroute der Anwendung und stellt sicher, dass die gesamte App korrekt reagiert.

Leistungsoptimierung

Optimieren Sie nginx für bessere Leistung:

# Add to nginx.conf
server {
    # ... existing config ...
    
    # Increase buffer sizes for large headers
    client_header_buffer_size 1k;
    large_client_header_buffers 4 8k;
    
    # Enable keep-alive connections
    keepalive_timeout 65;
    keepalive_requests 100;
    
    # Optimize file serving
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
}

Ressourcenlimits

Verhindern Sie Ressourcenerschöpfung mit Container-Limits:

services:
  my-react-app:
    # ... existing config ...
    deploy:
      resources:
        limits:
          cpus: '0.5'
          memory: 512M
        reservations:
          cpus: '0.25'
          memory: 256M

nginx benötigt für das Ausliefern statischer React-Dateien nur wenige Ressourcen. Daher sind 512 MB Arbeitsspeicher und ein halber CPU-Kern für viele Websites ein sinnvoller Ausgangspunkt; führen Sie Lasttests durch, bevor Sie sich bei hohem Datenverkehr darauf verlassen.

Warum selbst betriebene Docker-Deployments wichtig sind

Self-Hosting Ihrer React-Anwendungen auf Docker-Infrastruktur gibt Ihnen die vollständige Kontrolle über Ihre Deployment-Pipeline, ohne Sie an einen Anbieter zu binden. Sie können beliebig viele Anwendungen auf Ihrer eigenen Infrastruktur bereitstellen, jeden Aspekt des Deployments anpassen und die Anwendungen nahtlos in Ihre bestehenden selbst betriebenen Dienste integrieren.

Dieser Ansatz funktioniert besonders gut in Kombination mit unserer mandantenfähigen Docker-Architektur, mit der Sie mehrere Kundenanwendungen auf derselben Infrastruktur mit vollständiger Isolation hosten können.

Automatisierung und CI/CD-Integration

GitHub-Actions-Bereitstellung

Automatisieren Sie Bereitstellungen bei jedem Push:

# .github/workflows/deploy.yml
name: Deploy to Production

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Build React app
        run: |
          npm ci
          npm run build
      
      - name: Deploy to server
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          source: "dist/,Dockerfile,nginx.conf,docker-compose.yml"
          target: "/opt/my-react-app"
      
      - name: Restart container
        uses: appleboy/[email protected]
        with:
          host: ${{ secrets.SERVER_HOST }}
          username: ${{ secrets.SERVER_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            cd /opt/my-react-app
            docker compose up -d --build

GitLab-CI/CD-Pipeline

Für GitLab-Benutzer:

# .gitlab-ci.yml
stages:
  - build
  - deploy

build:
  stage: build
  image: node:18
  script:
    - npm ci
    - npm run build
  artifacts:
    paths:
      - dist/
    expire_in: 1 hour

deploy:
  stage: deploy
  image: alpine:latest
  before_script:
    - apk add --no-cache openssh-client
    - eval $(ssh-agent -s)
    - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
  script:
    - scp -r dist/ Dockerfile nginx.conf docker-compose.yml $SERVER_USER@$SERVER_HOST:/opt/my-react-app/
    - ssh $SERVER_USER@$SERVER_HOST "cd /opt/my-react-app && docker compose up -d --build"
  only:
    - main

Überwachung Ihres Deployments im Produktivbetrieb

Logging-Strategie

Implementieren Sie umfassendes Logging:

# Add to docker-compose.yml
services:
  my-react-app:
    # ... existing config ...
    logging:
      driver: "json-file"
      options:
        max-size: "10m"
        max-file: "3"

Logs effizient anzeigen:

# Real-time logs
docker compose logs -f my-react-app

# Last 100 lines
docker compose logs --tail=100 my-react-app

# Logs from specific time
docker compose logs --since=2h my-react-app

# Filter for errors only
docker compose logs my-react-app | grep -i error

Metriken und Warnungen

Container-Zustand überwachen:

#!/bin/bash
# health-check.sh - Regular health monitoring

CONTAINER="my-react-app"
WEBHOOK_URL="your-notification-webhook"

STATUS=$(docker inspect --format='{{.State.Health.Status}}' $CONTAINER)

if [ "$STATUS" != "healthy" ]; then
    curl -X POST $WEBHOOK_URL \
      -H 'Content-Type: application/json' \
      -d "{\"text\":\"Container $CONTAINER is $STATUS\"}"
fi

Führen Sie dies alle 5 Minuten über Cron für eine grundlegende Überwachung aus.

React mit Backend-Infrastruktur verbinden

Ihre React-App muss wahrscheinlich mit Backend-Diensten kommunizieren. Das lässt sich gut mit selbst betriebener Infrastruktur verbinden. Wenn Sie n8n für die Workflow-Automatisierung oder Windmill für Backend-Workflows betreiben, konfigurieren Sie das API-Routing in Ihrer nginx-Konfiguration. Wenn Sie /api wie unten über denselben Ursprung weiterleiten, vermeiden Sie ursprungsübergreifende Anfragen. Der Browser benötigt für diese Aufrufe daher keine CORS-Header:

# Add to nginx.conf for API proxying
location /api {
    proxy_pass http://your-backend-service:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

Dies funktioniert nahtlos, wenn alle Dienste Teil desselben Docker-Netzwerks sind, wie in unserem Leitfaden zur mandantenfähigen Architektur demonstriert.

Umgebungsspezifische Builds

Verschiedene Umgebungen benötigen oft unterschiedliche Konfigurationen:

// vite.config.ts
export default defineConfig(({ mode }) => ({
  plugins: [react()],
  define: {
    'import.meta.env.VITE_API_URL': JSON.stringify(
      mode === 'production' 
        ? 'https://api.yourdomain.com'
        : 'http://localhost:3000'
    ),
  },
  build: {
    outDir: 'dist',
    sourcemap: mode !== 'production',
  },
}))

Build für verschiedene Umgebungen:

# Development build
npm run build -- --mode development

# Staging build  
npm run build -- --mode staging

# Production build
npm run build -- --mode production

Der Nutzen, wenn Sie dieses Setup verstehen

Dieser Bereitstellungsansatz ist relevant, wenn Sie:

Mehrere Anwendungen verwalten:

React-Apps neben Backend-Diensten auf derselben Infrastruktur bereitstellen
Konsistente Bereitstellungsprozesse über alle Projekte hinweg verwenden
Integration mit selbst betriebenen Tools wie n8n und Windmill

Für Kunden entwickeln:

Professionelle SSL-gesicherte benutzerdefinierte Domains
Vollständige Kontrolle über Infrastruktur und Bereitstellungen
Keine Plattformbeschränkungen oder Anbieterbindung

Infrastruktur erlernen:

Grundlagen der Docker-Containerisierung verstehen
Traefik-Reverse-Proxy-Konfiguration meistern
Probleme bei Deployments im Produktivbetrieb systematisch untersuchen

Das hier dokumentierte Setup basiert auf einer realen Debugging-Sitzung – die beschriebenen Probleme sind tatsächlich aufgetreten, und die Lösungen haben tatsächlich funktioniert. Dies macht es wertvoller als theoretische Tutorials, weil Sie die tatsächlichen Fallstricke sehen und erfahren, wie Sie sie vermeiden können.

In Kombination mit unserer mandantenfähigen Docker-Architektur bildet dies ein Fundament für skalierbare, selbst betriebene Anwendungsbereitstellung, die Sie vollständig kontrollieren.

Professionelle Unterstützung

Die Einrichtung produktionsreifer React-Deployments erfordert die Berücksichtigung zahlreicher Infrastrukturfragen. Auch mit dieser umfassenden Dokumentation hat jedes Projekt eigene Anforderungen, Einschränkungen durch die vorhandene Infrastruktur und spezifische Leistungsanforderungen.

Wenn Sie eine Infrastruktur für React-Deployments im Produktivbetrieb aufbauen oder Anpassungen für die Bereitstellung bei Ihren Kunden benötigen, unterstützen wir Sie bei folgenden Aufgaben:

Maßgeschneiderte Deployment-Pipelines für Ihren Workflow
Integration mit bestehenden CI/CD-Systemen
Leistungsoptimierung für Anwendungen mit hohem Datenverkehr
Multi-Region-Bereitstellungsstrategien
Team-Schulungen zu Docker- und Traefik-Best-Practices
Laufendes Infrastrukturmanagement und Monitoring

Kontaktieren Sie uns über tva.sg/contact, um Ihre React-Bereitstellungsanforderungen zu besprechen und professionelle Beratung zur Implementierung zu erhalten.

Ob Sie eine bestehende Agentur skalieren, ein neues SaaS-Produkt starten oder Kompetenzen für die Bereitstellung von Unternehmenslösungen bei Kunden aufbauen: Wir unterstützen Sie mit selbst betriebenen, containerisierten React-Deployments, die Ihre Unabhängigkeit wahren und professionelle Ergebnisse liefern.

Das Problem mit herkömmlichen React-Bereitstellungen

Die von uns verwendeten Tools

Vite: Modernes Build-Tool

Docker: Containerisierung für Konsistenz

Traefik: Intelligenter Reverse Proxy

nginx: Webserver für den Produktivbetrieb

Den Bereitstellungsablauf verstehen

Einrichtung Ihrer React-Anwendung

Projektstruktur für den Produktivbetrieb

Optimierung Ihrer Vite-Konfiguration

Build für den Produktivbetrieb

Container für den Produktivbetrieb erstellen

nginx-Konfiguration für React

Dockerfile für den Produktivbetrieb

Docker-Compose-Konfiguration

Bereitstellung auf Ihrem Produktivserver

Voraussetzungen auf Ihrem Server

Hochladen Ihrer Anwendung

Container erstellen und starten

Überprüfung der Bereitstellung

Häufige Bereitstellungsfehler und Lösungen

404-Fehler trotz korrekter Konfiguration

Container mit dem Status „unhealthy“

Docker-Build schlägt mit „No Space Left“ fehl

SSL-Zertifikat wird nicht generiert

React-Router-404-Fehler beim Aktualisieren

Container startet, aber Traefik kann ihn nicht erreichen

Optimierung für den Produktivbetrieb

Bereitstellungen mit kurzer Ausfallzeit implementieren

Erweiterte Health Checks

Leistungsoptimierung

Ressourcenlimits

Warum selbst betriebene Docker-Deployments wichtig sind

Automatisierung und CI/CD-Integration

GitHub-Actions-Bereitstellung

GitLab-CI/CD-Pipeline

Überwachung Ihres Deployments im Produktivbetrieb

Logging-Strategie

Metriken und Warnungen

React mit Backend-Infrastruktur verbinden

Umgebungsspezifische Builds

Der Nutzen, wenn Sie dieses Setup verstehen

Verwandte Ressourcen

Professionelle Unterstützung

Weiterführende Beiträge