Wie optimiere ich CloudFront für die Bereitstellung meiner Single-Page-Anwendung?

Behebung

Hinweis: In der folgenden Lösung ist der Beispiel-Ursprungsserver ein Amazon Simple Storage (Amazon S3)-Bucket.

Konfiguriere die sichere Kommunikation zwischen deinen Besuchern und CloudFront

Ergreife die folgenden Maßnahmen:

• Für die Besucherkommunikation zwischen deinen Besuchern und CloudFront ist HTTPS erforderlich. Konfiguriere CloudFront so, dass HTTP-Anfragen automatisch an HTTPS umgeleitet oder HTTP-Anfragen abgelehnt werden.
• Für sichere Verbindungen mit deinem Domainnamen erhältst du ein SSL/TLS-Zertifikat entweder von AWS Certificate Manager (ACM) oder einem Drittanbieter.
• Wähle eine Sicherheitsrichtlinie mit Chiffren und Protokollen, die deine Besucherverbindungen unterstützen.

Beschränke den Zugriff auf deinen AWS-Ursprung

Wenn du Amazon S3 als AWS-Ursprung verwendest, beschränke den öffentlichen Zugriff auf den S3-Bucket.

Hinweis: Es hat sich bewährt, die OAC-Einstellung (Origin Access Control) zu verwenden, um deinen Ursprung zu sichern.

Informationen zum Einschränken des Zugriffs auf andere Ursprünge findest du unter Den Zugriff auf einen AWS-Ursprung beschränken.

Probleme mit dem clientseitigen SPA-Routing lösen

Ein 403- oder 404-HTTP-Statuscode-Fehler tritt auf, wenn du zu einer anderen Route als index.html navigierest, z. B. https://example.com/about-us, und anschließend die Seite aktualisierst. Die S3-Buckets haben keinen Pfad oder Präfix für /about-us.

**Hinweis:**Wenn die Bucket-Richtlinie für OAC die Berechtigung der s3:ListBucket nicht enthält, gibt Amazon S3 einen 403-Fehler zurück.

Wenn Amazon S3 einen 403- oder 404-Fehler zurückgibt, stellt CloudFront die Datei index.html bereit, die eine gültige Route für das SPA darstellt. Um diese Probleme zu beheben, konfigurieren eine Fehlerantwort für 403- und 404-Fehler.

Führe die folgenden Schritte aus:

1. Öffne die CloudFront-Konsole.
2. Wähle im Navigationsbereich Distributionen und dann die Distribution aus.
3. Wähle die Registerkarte Fehlerseiten.
4. Wähle Benutzerdefinierte Fehlerantwort erstellen.
5. Wähle für den HTTP-Fehlercode entweder 403: Forbidden oder 404: Not Found aus.
6. Für Fehler beim Zwischenspeichern der TTL kannst du 0 oder deinen bevorzugten Wert eingeben.
7. Wähle für Fehlerantwort anpassen die Option Ja aus.
8. Gib für den Pfad der Antwortseite /index.html ein.
9. Wähle für den HTTP-Antwortcode 200: OK aus.
10. Wähle Benutzerdefinierte Fehlerantwort erstellen.
11. Wähle die Registerkarte Allgemein und warte, bis die Bereitstellung abgeschlossen ist.

Implementiere Caching-Strategien

Gehe wie folgt vor, um die Frische des Inhalts und die Liefergeschwindigkeit des SPA in Einklang zu bringen:

• Implementiere eine lange Cache-Dauer für unveränderliche Komponenten wie JavaScript- und CSS-Dateien. Um beispielsweise Ressourcen für ein Jahr zwischenzuspeichern, verwende einen Cache-Control-Header in den S3-Objektmetadaten mit dem Wert public, max-age = 31536000.
• Verwende für die Datei index.html eine kurze Gültigkeitsdauer (TTL), z. B. ** public, max-age = 60,** um Dateien 60 Sekunden lang zwischenzuspeichern. Verwende die kurze TTL mit stale-while-revalidate = 2592000, damit CloudFront abgelaufene zwischengespeicherte Versionen während der Revalidierung im Hintergrund bis zu 30 Tage lang bereitstellen kann.
• Verwende eine geeignete CloudFront-Cache-Richtlinie, die sowohl kurze TTLs für häufig aktualisierte Inhalte als auch lange TTLs für statische Komponenten berücksichtigt. Du kannst beispielsweise die Richtlinie Managed-CachingOptimized verwenden.

Weitere Informationen findest du unter Hosten von Single-Page-Anwendungen (SPA) mit mehrstufigen TTLs auf CloudFront und S3.

Wähle eine geeignete CloudFront-Preisklasse

Um die Kosten für die Bereitstellung deiner Inhalte zu senken, wähle eine Preisklasse, die den Standorten deiner Nutzer entspricht. Um festzustellen, wo sich die Mehrheit deiner Nutzer befindet, überprüfe deinen CloudFront-Nutzungsbericht. Wenn sich deine Benutzer hauptsächlich in einer AWS-Region befinden, wähle die Preisklasse 200 oder 100. Wenn Leistung jedoch wichtig ist, behalte die Standardpreisklasse „Alle“ bei, um deine Inhalte einem globalen Publikum zugänglich zu machen. Informationen zu den Regionen, die jede Preisklasse bedient, findest du unter Preisklasse.

Ähnliche Informationen

Bereitstellen einer reaktionsbasierten Single-Page-Anwendung auf Amazon S3 und CloudFront