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

Letzte Aktualisierung: 05.01.2021

Ich möchte eine statische Website in einem Amazon-Simple-Storage-Service-Bucket (Amazon S3) hosten. Dann möchte ich meine Website über eine Amazon-CloudFront-Verteilung bereitstellen. Wie mache ich das?

Kurzbeschreibung

Um eine auf Amazon S3 gehostete statische Website bereitzustellen, können Sie eine CloudFront-Verteilung mit einer dieser Konfigurationen bereitstellen:

  • Verwenden eines REST-API-Endpunkts als Ursprung, wobei der Zugriff durch eine Ursprungszugriffsidentität (Origin Access Identity, OAI) eingeschränkt ist.
  • Verwenden eines Website-Endpunkts als Ursprung, mit anonymem (öffentlichem) Zugriff
  • Verwenden eines Website-Endpunkts als Ursprung, wobei der Zugriffsdurch einen Referenz-Header eingeschränkt ist
  • Verwenden von AWS CloudFormation zum Bereitstellen eines REST-API-Endpunkts als Ursprung, mit Zugriffsbeschränkung durch eine OAI und einer benutzerdefinierten 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.

Auflö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 um Ihre Websitedateien hochzuladen.
    Hinweis: Sie müssen für diese Konfiguration 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 Sie eine CloudFront-Webverteilung. Geben Sie zusätzlich zu den Verteilungseinstellungen, die Sie für Ihren Anwendungsfall benötigen, Folgendes ein:
    Wählen Sie für Ursprungsdomänenname den von Ihnen erstellten Bucket aus.
    Wählen Sie für Bucket-Zugriff einschränken die Option Ja.
    Wählen Sie für Ursprungszugriffsidentität die Option Neue Identität erstellen aus.
    Für Kommentar können Sie den Standardwert beibehalten. Oder Sie können ein benutzerdefiniertes Label für den OAI eingeben.
    Wählen Sie für Leseberechtigungen für Bucket erteilen die Option Ja, Bucket-Richtlinie aktualisieren.
  3. Es ist eine bewährte Methode, SSL (HTTPS) für Ihre Webseite zu nutzen. Wählen Sie zum Einrichten von SSL für das SSL-Zertifikat die Option Standard-CloudFront-Zertifikat aus, um den standardmäßigen CloudFront-DNS-Namen zu verwenden. Oder wählen Sie Benutzerdefiniertes SSL-Zertifikat, um Ihre eigene benutzerdefinierte Domäne zu verwenden. Sie können Zertifikat mit ACM anfordern oder importieren auswählen, um ein neues Zertifikat anzufordern.
    Wichtig: Wenn Sie alternative Domänennamen (CNAMEs) für Ihre Verteilung eingegeben haben, müssen die CNAMEs mit dem von Ihnen ausgewählten SSL-Zertifikat übereinstimmen. Um Probleme mit Ihrem SSL-Zertifikat zu beheben, lesen Sie Wie kann ich Probleme mit der Verwendung eines benutzerdefinierten SSL-Zertifikats für meine CloudFront-Verteilung beheben?
  4. Wählen Sie Verteilung erstellen aus.
  5. Aktualisieren Sie die DNS-Einträge für Ihre Domäne, um den CNAME Ihrer Website auf den Domänennamen Ihrer CloudFront-Verteilung zu verweisen. Sie finden den Domänennamen Ihrer Verteilung in der CloudFront-Konsole in einem ähnlichen Format wie d1234abcd.cloudfront.net.
  6. Warten Sie, bis sich Ihre DNS-Änderungen übertragen haben und auf die vorherigen DNS-Einträge ablaufen.
    Hinweis: Die Zeit bis zum Ablauf der vorherigen DNS-Werte hängt vom TTL-Wert ab, der in Ihrer gehosteten Zone festgelegt ist 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 Websitezugriff.

Hinweis: Wenn Sie den statischen Website-Endpunkt von Amazon S3 verwenden, sind nur Verbindungen zwischen CloudFront und Amazon S3 ü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 das statische Website-Hosting für den Bucket zu erstellen.
  2. Kopieren Sie aus dem Dialogfeld Statisches Website-Hosting den Endpunkt Ihres Buckets ohne http :// am Anfang. Das Format ähnelt DOC-EXAMPLE-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.
  4. Erstellen Sie eine CloudFront-Webverteilung. Geben Sie zusätzlich zu den Verteilungseinstellungen, die Sie für Ihren Anwendungsfall benötigen, Folgendes ein:
    Geben Sie für Ursprungs-Domänenname den Endpunkt ein, den Sie in Schritt 2 kopiert haben.
  5. Es ist eine bewährte Methode, SSL (HTTPS) für Ihre Website zu verwenden. Wählen Sie zum Einrichten von SSL für das SSL-Zertifikat die Option Standard-CloudFront-Zertifikat aus, um den standardmäßigen CloudFront-DNS-Namen zu verwenden. Oder wählen Sie Benutzerdefiniertes SSL-Zertifikat, um Ihre eigene benutzerdefinierte Domäne zu verwenden. Sie können Zertifikat mit ACM anfordern oder importieren auswählen, um ein neues Zertifikat anzufordern.
    Wichtig: Wenn Sie alternative Domänennamen (CNAMEs) für Ihre Verteilung eingegeben haben, müssen die CNAMEs mit dem von Ihnen ausgewählten SSL-Zertifikat übereinstimmen. Um Probleme mit Ihrem SSL-Zertifikat zu beheben, lesen Sie Wie kann ich Probleme mit der Verwendung eines benutzerdefinierten SSL-Zertifikats für meine CloudFront-Verteilung beheben?
  6. Wählen Sie Verteilung erstellen aus.
  7. Aktualisieren Sie die DNS-Einträge für Ihre Domäne, um den CNAME Ihrer Website auf den Domänennamen Ihrer CloudFront-Verteilung zu verweisen. Sie finden den Domänennamen Ihrer Verteilung in der CloudFront-Konsole in einem ähnlichen Format wie d1234abcd.cloudfront.net.
  8. Warten Sie, bis sich Ihre DNS-Änderungen übertragen haben und auf die vorherigen DNS-Einträge ablaufen.
    Hinweis: Die Zeit bis zum Ablauf der vorherigen DNS-Werte hängt vom TTL-Wert ab, der in Ihrer gehosteten Zone festgelegt ist 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 und dann using a bucket policy eine Bucket-Richtlinie verwendet wird, um den Zugriff nur für Anfragen mit dem benutzerdefinierten Referenz-Header zuzulassen. Stellen Sie sicher, dass der von diesem Setup erlaubte Zugriff den Anforderungen Ihres Anwendungsfalls entspricht.

Hinweis: Wenn Sie den statischen Website-Endpunkt von Amazon S3 verwenden, werden Verbindungen zwischen CloudFront und Amazon S3 nur über HTTP verfügbar sein. 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 das statische Website-Hosting für den Bucket zu erstellen.
  2. Kopieren Sie aus dem Dialogfeld Statisches Website-Hosting den Endpunkt Ihres Buckets ohne http:// am Anfang. Das Format ähnelt DOC-EXAMPLE-BUCKET.s3-website-region.amazonaws.com. Sie benötigen den Endpunkt in diesem Format für einen späteren Schritt.
  3. Erstellen Sie eine CloudFront-Webverteilung. Geben Sie zusätzlich zu den Verteilungseinstellungen, die Sie für Ihren Anwendungsfall benötigen, Folgendes ein:
    Für den Ursprungsdomänennamen geben Sie den Endpunkt ein, den Sie in Schritt 2 kopiert haben.
    Für Benutzerdefinierte Ursprungsheader, geben Sie unter Header-Name Referer ein. Geben Sie unter Wert einen benutzerdefinierten Header ein, den Sie an den Ursprung (S3-Bucket) weiterleiten möchten. Um den Zugriff auf den Ursprung einzuschränken, können Sie einen zufälligen oder geheimen Wert eingeben, den nur Sie kennen.
  4. Es empfiehlt sich, SSL (HTTPS) für Ihre Website zu verwenden. Wählen Sie zum Einrichten von SSL für das SSL-Zertifikat die Option Standard-CloudFront-Zertifikat aus, um den standardmäßigen CloudFront-DNS-Namen zu verwenden. Oder wählen Sie Benutzerdefiniertes SSL-Zertifikat, um Ihre eigene benutzerdefinierte Domäne zu verwenden. Sie können Zertifikat mit ACM anfordern oder importieren auswählen, um ein neues Zertifikat anzufordern.
    Wichtig: Wenn Sie alternative Domänennamen (CNAMEs) für Ihre Verteilung eingegeben haben, müssen die CNAMEs mit dem von Ihnen ausgewählten SSL-Zertifikat übereinstimmen. Um Probleme mit Ihrem SSL-Zertifikat zu beheben, lesen Sie Wie kann ich Probleme mit der Verwendung eines benutzerdefinierten SSL-Zertifikats für meine CloudFront-Verteilung beheben?
  5. Wählen Sie Verteilung erstellen aus.
  6. Öffnen Sie den Bucket Ihrer Website über die Amazon-S3-Konsole. Fügen Sie dann eine Bucket-Richtlinie hinzu, die s3:GetObject unter der Bedingung zulässt, dass die Anfrage den benutzerdefinierten Referer-Header enthält, den Sie in Schritt 3 angegeben haben.
    Hinweis: To Blockieren Sie den Zugriff für alle Anfragen, die den benutzerdefinierten Referer-Header nicht enthalten, verwenden Sie eine explizite Zugriffsverweigerungs-Anweisung 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-Distribution zu verweisen. Sie finden den Domänennamen Ihrer Verteilung in der CloudFront-Konsole in einem ähnlichen Format wie d1234abcd.cloudfront.net.
  8. Warten Sie, bis sich Ihre DNS-Änderungen übertragen haben und auf die vorherigen DNS-Einträge ablaufen.
    Hinweis: Die Zeit bis zum Ablauf der vorherigen DNS-Werte hängt vom TTL-Wert ab, der in Ihrer gehosteten Zone festgelegt ist 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 wird Ihre Website:

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

Anweisungen zu Informationen zur Bereitstellung dieser Lösung finden Sie unter Sichere statische Amazon-CloudFront-Website auf der GitHub-Website.