Wie kann ich mit CloudFront eine auf Amazon S3 gehostete statische Website bereitstellen?

Letzte Aktualisierung: 14.09.2021

Ich möchte eine statische Website in einem Amazon Simple Storage Service (Amazon S3)-Bucket hosten. Anschließend möchte ich meine Website über eine Amazon CloudFront-Verteilung bereitstellen. Wie gehe ich vor?

Kurzbeschreibung

Um eine statische Website bereitzustellen, die auf Amazon S3 gehostet wird, können Sie eine CloudFront-Verteilung mithilfe einer dieser Konfigurationen bereitstellen:

  • Verwenden eines REST-API-Endpunkts als Ursprung mit Zugriffsbeschränkung durch eine Ursprungszugriffsidentität (OAI)
  • Verwenden eines Website-Endpunkts als Ursprung mit anonymem (öffentlichem) Zugriff
  • Verwenden eines Website-Endpunkts als Ursprung, wobei der Zugriff durch einen Referenz-Header eingeschränkt ist
  • Verwenden von AWS CloudFormation zum Bereitstellen eines REST-API-Endpunkts als Ursprung mit eingeschränktem Zugriff durch eine OAI und eine benutzerdefinierte Domäne, die auf CloudFront verweist

Weitere Informationen zu den beiden Endpunkttypen finden Sie unter Hauptunterschiede zwischen einem Website-Endpunkt und einem REST-API-Endpunkt.

Lösung

Folgen Sie den Schritten zum Konfigurieren einer CloudFront-Verteilung mit dem S3-Endpunkttyp, den Sie als Ursprung verwenden möchten:

Verwenden eines REST-API-Endpunkts als Ursprung mit Zugriffsbeschränkung durch eine OAI

  1. Verwenden Sie die Amazon S3-Konsole, um einen Bucket zu erstellen und Ihre Website-Dateien hochzuladen.
    Hinweis: Für diese Konfiguration müssen Sie kein statisches Website-Hosting in Ihrem Bucket aktivieren. Diese Konfiguration verwendet den REST-API-Endpunkt des Buckets anstelle des Website-Endpunkts aus der statischen Website-Hosting-Funktion.
  2. Erstellen einer CloudFront-Web-Verteilung. Geben Sie zusätzlich zu den Verteilungseinstellungen, die Sie für Ihren Anwendungsfall benötigen, Folgendes ein:
    Wählen Sie für Ursprungs-Domain den Bucket aus, den Sie erstellt haben.
    Wählen Sie für den S3 Bucket-ZugriffJa, OAI verwenden (Bucket kann den Zugriff nur auf CloudFront einschränken).
    Wählen Sie für Ursprungszugriffsidentität die Option Neues OAI erstellen aus. Geben Sie dann den OAI-Namen ein und wählen Sie Erstellen.
    Wählen Sie für Bucket-RichtlinieJa, die Bucket-Richtlinie aktualisieren.
  3. Dies ist eine bewährte Methode, SSL (HTTPS) für Ihre Website zu verwenden. Um eine benutzerdefinierte Domäne mit HTTPS zu verwenden, wählen Sie Benutzerdefiniertes SSL-Zertifikat aus. Sie können Zertifikat anfordern auswählen, um ein neues Zertifikat anzufordern. Wenn Sie keine benutzerdefinierte Domain verwenden, können Sie weiterhin HTTPS mit dem Domainnamen „cloudfront.net“ für Ihre Verteilung verwenden.
    Wichtig: Wenn Sie alternative Domainnamen (CNames) für Ihre Verteilung eingegeben haben, müssen die CNames mit dem von Ihnen ausgewählten SSL-Zertifikat übereinstimmen. Informationen zur Behebung von Problemen mit Ihrem SSL-Zertifikat finden Sie unter Wie kann ich Probleme bei der Verwendung eines benutzerdefinierten SSL-Zertifikats für meine CloudFront-Verteilung beheben?
  4. Wählen Sie Verteilung anlegen.
  5. Aktualisieren Sie die DNS-Einträge für Ihre Domain, um den CNAME Ihrer Website auf den Domainnamen Ihrer CloudFront-Verteilung zu verweisen. Sie finden den Domainnamen Ihrer Verteilung in der CloudFront-Konsole in einem Format, das d1234abcd.cloudfront.net ähnelt.
  6. Warten Sie, bis Ihre DNS-Änderungen verteilt sind und bis die vorherigen DNS-Einträge abgelaufen sind.
    Hinweis: Die Dauer, bis die die vorherigen DNS-Werte abgelaufen sind, hängt vom TTL-Wert ab, der in Ihrer gehosteten Zone festgelegt wurde, und davon, ob Ihr lokaler Resolver diese TTL-Werte verwendet.

Verwenden eines Website-Endpunkts als Ursprung mit anonymem (öffentlichem) Zugriff

Diese Konfiguration ermöglicht den öffentlichen Lesezugriff auf den Bucket Ihrer Website. Weitere Informationen finden Sie unter Festlegen von Berechtigungen für den Zugriff auf die Website.

Hinweis: Wenn Sie den statischen Amazon S3-Website-Endpunkt verwenden, sind Verbindungen zwischen CloudFront und Amazon S3 nur über HTTP verfügbar. Um HTTPS für Verbindungen zwischen CloudFront und Amazon S3 zu verwenden, konfigurieren Sie einen S3-REST-API-Endpunkt für Ihren Ursprung.

  1. Verwenden Sie die Amazon S3-Konsole, um einen Bucket zu erstellen und statisches Website-Hosting im Bucket zu aktivieren.
  2. Kopieren Sie im Dialogfeld Statisches Website-Hosting den Endpunkt Ihres Buckets ohne das führende http://. Das Format ähnelt DOC-BEISPIEL-BUCKET.s3-website-region.amazonaws.com. Sie benötigen den Endpunkt in diesem Format für einen späteren Schritt.
  3. Fügen Sie eine Bucket-Richtlinie hinzu, die öffentlichen Lesezugriff auf den von Ihnen erstellten Bucket ermöglicht.
    Hinweis: Für diese Konfiguration müssen die Einstellungen für den öffentlichen Blockzugriff des S3 Buckets deaktiviert sein. Wenn für Ihren Anwendungsfall die Aktivierung der Block-Einstellungen für den öffentlichen Zugriff erforderlich ist, verwenden Sie den REST-API-Endpunkt als Ursprung und schränken Sie den Zugriff durch eine Ursprungszugriffsidentität (OAI) ein.
  4. Erstellen einer CloudFront-Web-Verteilung. Geben Sie zusätzlich zu den Verteilungseinstellungen, die Sie für Ihren Anwendungsfall benötigen, Folgendes ein:
    Geben Sie für Ursprungs-Domäne den Endpunkt ein, den Sie in Schritt 2 kopiert haben.
    Hinweis: Wählen Sie den Bucket nicht aus der Dropdown-Liste aus. Die Dropdown-Liste enthält nur die S3 Bucket-REST-API-Endpunkte, die in dieser Konfiguration nicht verwendet werden.
  5. Dies ist eine bewährte Methode, SSL (HTTPS) für Ihre Website zu verwenden. Um eine benutzerdefinierte Domäne mit HTTPS zu verwenden, wählen Sie Benutzerdefiniertes SSL-Zertifikat aus. Sie können Zertifikat anfordern auswählen, um ein neues Zertifikat anzufordern. Wenn Sie keine benutzerdefinierte Domain verwenden, können Sie weiterhin HTTPS mit dem Domainnamen cloudfront.net für Ihre Verteilung verwenden.
    Wichtig: Wenn Sie alternative Domainnamen (CNames) für Ihre Verteilung eingegeben haben, müssen die CNames mit dem von Ihnen ausgewählten SSL-Zertifikat übereinstimmen. Informationen zur Behebung von Problemen mit Ihrem SSL-Zertifikat finden Sie unter Wie kann ich Probleme bei der Verwendung eines benutzerdefinierten SSL-Zertifikats für meine CloudFront-Verteilung beheben?
  6. Wählen Sie Verteilung anlegen.
  7. Aktualisieren Sie die DNS-Einträge für Ihre Domain, um den CNAME Ihrer Website auf den Domainnamen Ihrer CloudFront-Verteilung zu verweisen. Sie finden den Domainnamen Ihrer Verteilung in der CloudFront-Konsole in einem Format, das d1234abcd.cloudfront.net ähnelt.
  8. Warten Sie, bis Ihre DNS-Änderungen verteilt sind und bis die vorherigen DNS-Einträge abgelaufen sind.
    Hinweis: Die Dauer, bis die die vorherigen DNS-Werte abgelaufen sind, hängt vom TTL-Wert ab, der in Ihrer gehosteten Zone festgelegt wurde, und davon, ob Ihr lokaler Resolver diese TTL-Werte verwendet.

Verwenden eines Website-Endpunkts als Ursprung, wobei der Zugriff durch einen Referenz-Header eingeschränkt ist

Diese Konfiguration schränkt den Zugriff ein, indem ein benutzerdefinierter Referer-Header für die Verteilung eingerichtet wird, und verwendet dann eine Bucket-Richtlinie, um den Zugriff nur für Anfragen mit dem benutzerdefinierten Referer-Header zu ermöglichen.

Wichtig: Prüfen Sie unbedingt, ob der von diesem Setup erlaubte Zugriff den Anforderungen Ihres Anwendungsfalls entspricht.

Hinweis: Wenn Sie den statischen Amazon S3-Website-Endpunkt verwenden, sind Verbindungen zwischen CloudFront und Amazon S3 nur über HTTP verfügbar. Um HTTPS für Verbindungen zwischen CloudFront und Amazon S3 zu verwenden, konfigurieren Sie einen S3-REST-API-Endpunkt für Ihren Ursprung.

  1. Verwenden Sie die Amazon S3-Konsole, um einen Bucket zu erstellen und statisches Website-Hosting im Bucket zu aktivieren.
  2. Kopieren Sie im Dialogfeld Statisches Website-Hosting den Endpunkt Ihres Buckets ohne das führende http://. Das Format ähnelt DOC-BEISPIEL-BUCKET.s3-website-region.amazonaws.com. Sie benötigen den Endpunkt in diesem Format für einen späteren Schritt.
  3. Erstellen einer CloudFront-Web-Verteilung. Geben Sie zusätzlich zu den Verteilungseinstellungen, die Sie für Ihren Anwendungsfall benötigen, Folgendes ein:
    Geben Sie für Ursprungs-Domäne den Endpunkt ein, den Sie in Schritt 2 kopiert haben. Hinweis: Wählen Sie den Bucket nicht aus der Dropdown-Liste aus. Die Dropdown-Liste enthält nur die S3 Bucket-REST-API-Endpunkte, die in dieser Konfiguration nicht verwendet werden.
    Wählen Sie unter Benutzerdefinierte Kopfzeile hinzufügen die Option Header hinzufügen.
    Geben Sie für Header-NameReferer ein.
    Geben Sie unter Wert einen benutzerdefinierten Headerwert ein, den Sie an den Ursprung (S3 Bucket) weiterleiten möchten. Um den Zugriff auf den Ursprung einzuschränken, geben Sie einen zufälligen oder geheimen Wert ein, den nur Sie kennen.
  4. Dies ist eine bewährte Methode, SSL (HTTPS) für Ihre Website zu verwenden. Um eine benutzerdefinierte Domäne mit HTTPS zu verwenden, wählen Sie Benutzerdefiniertes SSL-Zertifikat aus. Sie können Zertifikat anfordern auswählen, um ein neues Zertifikat anzufordern. Wenn Sie keine benutzerdefinierte Domain verwenden, können Sie weiterhin HTTPS mit dem Domainnamen „cloudfront.net“ für Ihre Verteilung verwenden.
    Wichtig: Wenn Sie alternative Domainnamen (CNames) für Ihre Verteilung eingegeben haben, müssen die CNames mit dem von Ihnen ausgewählten SSL-Zertifikat übereinstimmen. Informationen zur Behebung von Problemen mit Ihrem SSL-Zertifikat finden Sie unter Wie kann ich Probleme bei der Verwendung eines benutzerdefinierten SSL-Zertifikats für meine CloudFront-Verteilung beheben?
  5. Wählen Sie Verteilung anlegen.
  6. Öffnen Sie den Bucket Ihrer Website von der Amazon S3-Konsole aus. Fügen Sie dann eine Bucket-Richtlinie hinzu, die S3:GetObject unter der Bedingung zulässt, dass die Anforderung den benutzerdefinierten Referer-Header enthält, den Sie in Schritt 3 angegeben haben. Für diese Konfiguration müssen die Einstellungen für den öffentlichen Blockzugriff des S3 Buckets deaktiviert sein. (Amazon S3 betrachtet eine Bucket-Richtlinie, die anonymen Zugriff gewährt, der von einem Referer eingeschränkt wird, als öffentlich). Wenn für Ihren Anwendungsfall die Aktivierung der Block-Einstellungen für den öffentlichen Zugriff erforderlich ist, verwenden Sie den REST-API-Endpunkt als Ursprung, wobei der Zugriff durch eine Ursprungszugriffsidentität (OAI) eingeschränkt ist.
    Hinweis: Um den Zugriff für jede Anforderung zu blockieren, die nicht den benutzerdefinierten Referer-Header enthält, verwenden Sie eine Anweisung zur expliziten Zugriffsverweigerung in der Bucket-Richtlinie.
  7. Aktualisieren Sie die DNS-Einträge für Ihre Domain, um den CNAME Ihrer Website auf den Domainnamen Ihrer CloudFront-Verteilung zu verweisen. Sie finden den Domainnamen Ihrer Verteilung in der CloudFront-Konsole in einem Format, das d1234abcd.cloudfront.net ähnelt.
  8. Warten Sie, bis Ihre DNS-Änderungen verteilt sind und bis die vorherigen DNS-Einträge abgelaufen sind.
    Hinweis: Die Dauer, bis die die vorherigen DNS-Werte abgelaufen sind, hängt vom TTL-Wert ab, der in Ihrer gehosteten Zone festgelegt wurde, und davon, ob Ihr lokaler Resolver diese TTL-Werte verwendet.

Verwenden von CloudFormation zum Bereitstellen eines REST-API-Endpunkts als Ursprung mit eingeschränktem Zugriff durch eine OAI und eine benutzerdefinierte Domäne, die auf CloudFront verweist

Mit dieser Lösung geschieht auf Ihrer Website folgendes:

  • Sie wird mit CloudFormation bereitgestellt
  • Sie wird auf Amazon S3 gehostet
  • Sie wird über CloudFront verteilt
  • Sie verwendet ein SSL/TLS-Zertifikat von AWS Certificate Manager (ACM)
  • Sie verwendet Lambda @Edge, um jeder Serverantwort Sicherheitsheader hinzuzufügen

Anweisungen zur Bereitstellung dieser Lösung finden Sie unter Amazon CloudFront Secure Static Website auf der GitHub-Website.