So stellen Sie React-Apps auf AWS S3 und CloudFront bereit: Der ultimative Leitfaden 2026

Die Bereitstellung moderner JavaScript-Anwendungen, wie sie mit React erstellt werden, hat sich erheblich weiterentwickelt. Es ist nicht mehr notwendig, komplexe Server oder virtuelle Maschinen zu warten, um statische Dateien bereitzustellen. Im Jahr 2026 ist die Referenzarchitektur für jede professionelle Single Page Application (SPA) die Verwendung von Amazon S3 als Quellenspeicher und Amazon CloudFront als Content Delivery Network (CDN).

In diesem technischen Leitfaden werden wir jeden Schritt aufschlüsseln, der erforderlich ist, um Ihr React-Projekt auf eine erstklassige Infrastruktur zu bringen, die Kosten zu optimieren und die Ladegeschwindigkeit für Ihre Endbenutzer zu maximieren.

Warum S3 + CloudFront für React wählen?

Bevor wir in die technische Konfiguration eintauchen, ist es wichtig, die Vorteile dieser Architektur gegenüber herkömmlichen Lösungen wie Heroku, Vercel oder VPS-Servern zu verstehen:

Unendliche Skalierbarkeit: Sie müssen sich keine Sorgen um die Anzahl der Benutzer machen. AWS bewältigt massive Verkehrsspitzen automatisch.
Kosteneffizienz: Sie zahlen nur für den Speicher (minimal für JS/HTML-Dateien) und die übertragene Bandbreite. Bei kleinen Projekten fällt dies oft unter das AWS Free Tier.
Globale Performance: CloudFront repliziert Ihre Dateien an über 400 Edge-Standorten weltweit und reduziert die Latenz auf ein Minimum.
Robuste Sicherheit: Da keine Server Code ausführen, eliminieren Sie gängige Angriffsvektoren.

Schritt 1: Vorbereitung Ihrer React-Anwendung

Um auf S3 bereitzustellen, müssen wir zuerst die statischen Produktionsdateien generieren. Wenn Sie Vite oder Create React App verwenden, ist der Prozess standardisiert:

# Für Projekte mit Vite (Empfohlen in 2026)
npm run build

# Oder wenn Sie das klassische CRA verwenden
npm run build

Dieser Befehl generiert einen Ordner dist/ oder build/, der die Datei index.html, minifizierte JavaScript-Bundles und Assets (CSS, Bilder) enthält. Dies sind die einzigen Dateien, die wir in die Cloud hochladen werden.

Schritt 2: Konfigurieren von Amazon S3 (Der Speicher)

Amazon Simple Storage Service (S3) fungiert als unsere „Dateidatenbank“. Befolgen Sie diese Schritte, um ihn korrekt zu konfigurieren:

1. Bucket-Erstellung

Rufen Sie die AWS-Konsole auf und erstellen Sie einen neuen Bucket. Der Name muss global eindeutig sein. Zum Beispiel: mein-react-projekt-prod.

2. Blockieren des öffentlichen Zugriffs deaktivieren (vorübergehend)

Damit CloudFront die Dateien lesen kann oder wenn Sie das direkte statische Website-Hosting von S3 verwenden möchten, müssen Sie die Option „Allen öffentlichen Zugriff blockieren“ deaktivieren.

3. Bucket-Richtlinie konfigurieren

Fügen Sie im Reiter „Berechtigungen“ die folgende Richtlinie hinzu, um der Welt das Lesen Ihrer Dateien zu ermöglichen:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::ihr-bucket-name/*"
    }
  ]
}

Schritt 3: Konfigurieren von Amazon CloudFront (Das CDN)

Die Bereitstellung direkt über S3 ist funktional, aber nicht professionell. CloudFront ermöglicht uns die Verwendung von HTTPS, benutzerdefinierten Domains und globalem Caching.

1. Eine Distribution erstellen

Erstellen Sie in der CloudFront-Konsole eine neue Distribution und wählen Sie Ihren S3-Bucket als „Origin Domain“ aus.

2. Umgang mit Routen (Das SPA-Problem)

React-Anwendungen verwenden clientseitiges Routing (React Router). Wenn ein Benutzer die Seite bei /dashboard aktualisiert, sucht S3 nach einer physischen Datei namens dashboard und gibt einen 404-Fehler zurück, da nur index.html existiert.

Die Lösung: Gehen Sie in CloudFront zum Reiter „Error Responses“ und erstellen Sie eine benutzerdefinierte Regel:

HTTP-Fehlercode: 404 (Not Found)
Fehlerantwort anpassen: Ja
Antwortseitenpfad: /index.html
HTTP-Antwortcode: 200 (OK)

Dies leitet alle Anfragen an React weiter, sodass der interne Router die Navigation übernehmen kann.

Schritt 4: Automatisierung mit Infrastructure as Code (IaC)

Die manuelle Durchführung dieser Schritte in der AWS-Konsole ist fehleranfällig und schwer zu replizieren. Hier werden Tools wie Terraform oder das AWS CLI unverzichtbar.

Wenn Sie ein Entwickler sind, der sich lieber auf den Code konzentriert und nicht manuell Dutzende von Bildschirmen in AWS konfigurieren möchte, empfehlen wir unser Tool React2AWS.

Was macht React2AWS für Sie? Es generiert sofort die erforderlichen Konfigurationsdateien (Terraform oder Bash-Skripte), um:

Buckets mit den richtigen Sicherheitsrichtlinien zu erstellen.
Die CloudFront-Distribution mit 404-Fehlerhandlern für React zu konfigurieren.
Optimale Cache-Header für statische Dateien festzulegen.

Geben Sie einfach Ihren Projektnamen ein und erhalten Sie einen professionellen Blueprint, der sofort einsatzbereit ist.

Optimierung und Best Practices

Um Ihre Bereitstellung auf die nächste Stufe zu heben, sollten Sie diese Punkte beachten:

1. Gzip- und Brotli-Komprimierung

Stellen Sie sicher, dass CloudFront die Option „Objekte automatisch komprimieren“ aktiviert hat. Dies reduziert Ihre JS-Bundle-Größe um bis zu 70 % und verbessert die Ladezeiten drastisch.

2. Cache-Invalidierung

Jedes Mal, wenn Sie eine neue Version Ihrer App auf S3 hochladen, wird CloudFront die alte Version weiterhin von seinen Edge-Knoten bereitstellen, bis der Cache abläuft. Sie müssen eine „Invalidierung“ mit dem Pfad /* erstellen, um eine globale Aktualisierung zu erzwingen.

3. Sicherheit mit OAC (Origin Access Control)

Anstatt den S3-Bucket für die Öffentlichkeit offen zu lassen, ist es ideal, ihn zu schließen und nur CloudFront die Erlaubnis zum Lesen der Dateien zu erteilen. Dies verhindert, dass Benutzer das CDN umgehen und direkt auf den Speicher zugreifen.

Fazit

Die Bereitstellung einer React-Anwendung auf AWS S3 und CloudFront ist die klügste Entscheidung für Projekte, die Skalierbarkeit und niedrige Kosten suchen. Obwohl die anfängliche Konfiguration überwältigend erscheinen mag, lohnen sich die Vorteile in Bezug auf Sicherheit und globale Performance.

Wenn Sie Stunden an manueller Konfiguration sparen und gängige AWS-Berechtigungsfehler vermeiden möchten, nutzen Sie unseren Infrastruktur-Generator, um den gesamten Prozess in Sekundenschnelle zu automatisieren.

AWS-Konfiguration für React jetzt generieren →