0Pricing
React Academy · Lektion

Eine React-SPA auf AWS S3 und CloudFront hosten

Erstellen Sie eine React-App, laden Sie sie in S3 hoch und konfigurieren Sie eine CloudFront-Distribution sowie die Cache-Invalidierung.

Eine React-SPA auf AWS S3 und CloudFront hosten ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Überblick über statisches Hosting mit S3

AWS S3 kann statische Dateien (HTML, JS, CSS und Bilder) als Website bereitstellen. In Kombination mit CloudFront (CDN) erhalten Sie globale Verteilung, HTTPS und eine geringe Latenz für React-SPAs.

Die SPA erstellen

Erstellen Sie aus Ihrer React-App ein statisches Ausgabeverzeichnis.

# Vite:
npm run build  # outputs to dist/

# Create React App:
npm run build  # outputs to build/

# Next.js static export:
next build && next export  # outputs to out/

S3-Bucket erstellen und konfigurieren

Erstellen Sie einen S3-Bucket, aktivieren Sie das Hosting statischer Websites und legen Sie die Index- und Fehlerdokumente fest.

# Create bucket (replace with your domain name):
aws s3 mb s3://my-react-app.com

# Enable static hosting:
aws s3 website s3://my-react-app.com --index-document index.html --error-document index.html
# Error doc = index.html handles client-side routing (React Router)

Build-Dateien hochladen

Synchronisieren Sie die Build-Ausgabe mit S3. Legen Sie aggressive Cache-Header für Dateien mit Hashes und No-Cache für index.html fest.

# Upload hashed assets with long cache:
aws s3 sync dist/ s3://my-react-app.com/ \
  --exclude index.html \
  --cache-control "max-age=31536000,immutable"

# Upload index.html with no cache (always fresh):
aws s3 cp dist/index.html s3://my-react-app.com/index.html \
  --cache-control "no-cache,no-store"

Eine CloudFront-Distribution erstellen

Erstellen Sie eine CloudFront-Distribution, die auf den S3-Bucket verweist. Verwenden Sie den S3-Website-Endpunkt (nicht den REST-Endpunkt), damit das SPA-Routing unterstützt wird.

# In AWS console or CDK:
# Origin: my-react-app.com.s3-website-us-east-1.amazonaws.com
# Default root object: index.html
# Viewer protocol: Redirect HTTP to HTTPS
# Error pages: 403 → /index.html (200) for SPA routing

SPA-Routing korrigieren

CloudFront gibt für unbekannte Pfade den Status 403 zurück (S3 kennt die React-Routen nicht). Konfigurieren Sie eine benutzerdefinierte Fehlerantwort: 403 → /index.html mit dem Status 200.

Benutzerdefinierte Domain und SSL

Fordern Sie für Ihre Domain in us-east-1 ein ACM-Zertifikat an (für CloudFront erforderlich). Verknüpfen Sie es mit der Distribution und fügen Sie einen CNAME-DNS-Eintrag hinzu, der auf die CloudFront-Domain verweist.

Cache-Invalidierung beim Deployment

Invalidieren Sie nach dem Deployment neuer Dateien den CloudFront-Cache für index.html (da die Datei auf S3 zwar auf No-Cache gesetzt ist, aber möglicherweise von CloudFront gecacht wird).

aws cloudfront create-invalidation \
  --distribution-id EXXXXXXXXXXXXX \
  --paths "/*"

Deployment mit GitHub Actions

Automatisieren Sie den Deployment-Workflow in CI: erstellen → mit S3 synchronisieren → CloudFront invalidieren.

- name: Deploy to S3
  run: aws s3 sync dist/ s3://my-react-app.com/ --delete
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET }}

- name: Invalidate CloudFront
  run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"

S3-Bucket-Richtlinie

Sperren Sie den öffentlichen Zugriff auf den Bucket und verwenden Sie eine Origin-Access-Control-(OAC-)Richtlinie, sodass nur CloudFront den Bucket lesen kann – das ist sicherer als das Hosting in einem öffentlichen Bucket.

Kostenschätzung

Statisches Hosting mit S3 ist sehr günstig: ca. 0,023 $/GB Speicher und ca. 0,0004 $/1000 Anfragen. Die Kosten für CloudFront variieren je nach Region und Datenübertragung, im kostenlosen Kontingent sind jedoch die ersten 1 TB pro Monat kostenfrei.

Kurztest

Warum sollten Sie das Fehlerdokument von S3 beim Hosting einer React-SPA auf index.html setzen?

Zusammenfassung

Erstellen Sie die SPA, synchronisieren Sie sie mit geteilten Cache-Einstellungen mit S3 (lange Cache-Dauer für Dateien mit Hashes, No-Cache für index.html) und stellen Sie sie über CloudFront bereit. Korrigieren Sie das SPA-Routing, indem Sie 403-Fehler auf /index.html abbilden. Automatisieren Sie das Deployment mit GitHub Actions und invalidieren Sie CloudFront bei jedem Deployment.

Häufig gestellte Fragen

Ist die Lektion „Eine React-SPA auf AWS S3 und CloudFront hosten“ kostenlos?

Ja — der vollständige Text von „Eine React-SPA auf AWS S3 und CloudFront hosten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Eine React-SPA auf AWS S3 und CloudFront hosten“?

Erstellen Sie eine React-App, laden Sie sie in S3 hoch und konfigurieren Sie eine CloudFront-Distribution sowie die Cache-Invalidierung. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Eine React-SPA auf AWS S3 und CloudFront hosten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Deployment auf Vercel: Zero Config und Preview-URLs
  2. Eine React-SPA auf AWS S3 und CloudFront hosten
  3. Eine React-/Next.js-App in Docker ausführen
  4. GitHub-Actions-CI/CD für React
← Zurück zu React Academy