Erste Schritte mit einer sicheren statischen Website - Amazon CloudFront
Übersicht über die LösungBereitstellen der Lösung

Erste Schritte mit einer sicheren statischen Website

Sie können die in diesem Thema beschriebene Lösung für die ersten Schritte mit Amazon CloudFront verwenden und eine sichere statische Website für Ihren Domänennamen erstellen. Eine statische Website verwendet nur statische Dateien, wie HTML, CSS, JavaScript, Bilder und Videos, und benötigt keine Server oder serverseitige Verarbeitung. Mit dieser Lösung erhält Ihre Website folgende Vorteile:

  • Verwendet den dauerhaften Speicher von Amazon Simple Storage Service (Amazon S3) – Mit dieser Lösung wird ein Amazon S3-Bucket erstellt, um den Inhalt Ihrer statischen Website zu hosten. Um Ihre Website zu aktualisieren, laden Sie einfach Ihre neuen Dateien in den S3-Bucket hoch.

  • Wird durch das Netzwerk zur Bereitstellung von Inhalten (Content Delivery Network) von Amazon CloudFront beschleunigt – Diese Lösung erstellt eine CloudFront-Verteilung, um Ihre Website für Betrachter mit geringer Latenz bereitzustellen. Die Distribution ist mit einer Ursprungszugriffssteuerung (OAC) konfiguriert, um sicherzustellen, dass die Website nur über CloudFront und nicht direkt von S3 aus zugänglich ist.

  • Wird durch HTTPS und Sicherheitsheader gesichert – Diese Lösung erstellt ein SSL/TLS-Zertifikat in AWS Certificate Manager (ACM) und fügt es der CloudFront-Distribution an. Dieses Zertifikat ermöglicht es der Verteilung, die Website Ihrer Domäne sicher mit HTTPS zu bedienen.

  • Wird konfiguriert und bereitgestellt mit AWS CloudFormation – Diese Lösung verwendet eine CloudFormation-Vorlage, um alle Komponenten einzurichten, sodass Sie sich mehr auf den Inhalt Ihrer Website und weniger auf die Konfiguration von Komponenten konzentrieren können.

Diese Lösung ist Open Source auf GitHub. Um den Code anzuzeigen, eine Pull-Anforderung einzureichen oder ein Problemticket zu öffnen, gehen Sie zu https://github.com/aws-samples/amazon-cloudfront-secure-static-site.

Übersicht über die Lösung

Das folgende Diagramm zeigt einen Überblick über die Funktionsweise dieser statischen Website-Lösung:

Übersichtsdiagramm einer sicheren statischen Website mit CloudFront

  1. Der Betrachter fordert die Website unter www.example.com an.

  2. Wenn das angeforderte Objekt zwischengespeichert wird, gibt CloudFront das Objekt aus seinem Zwischenspeicher an den Betrachter zurück.

  3. Wenn sich das Objekt nicht im CloudFront-Zwischenspeicher befindet, fordert CloudFront das Objekt vom Ursprung (einem S3-Bucket) an.

  4. S3 gibt das Objekt an CloudFront zurück.

  5. CloudFront speichert das Objekt im Cache.

  6. Die Objekte werden an den Viewer zurückgegeben. Nachfolgende Anfragen für das Objekt, die an denselben CloudFront.edge-Standort kommen, werden aus dem CloudFront-Zwischenspeicher heraus behandelt.

Bereitstellen der Lösung

Um diese sichere statische Website-Lösung bereitzustellen, können Sie eine der folgenden Optionen auswählen:

  • Verwenden Sie die CloudFormation-Konsole, um die Lösung mit Standardinhalten bereitzustellen, und laden Sie dann Ihren Website-Inhalt zu Amazon S3 hoch.

  • Klonen Sie die Lösung auf Ihren Computer, um Ihre Website-Inhalte hinzuzufügen. Stellen Sie dann die Lösung mit AWS Command Line Interface (AWS CLI) bereit.

Anmerkung

Sie müssen die Region USA OST (Nord-Virginia) verwenden, um die CloudFormation-Vorlage bereitzustellen.

Voraussetzungen

Um diese Lösung verwenden zu können, müssen Sie die folgenden Voraussetzungen haben:

  • Ein registrierter Domänenname, z. B. example.com, der auf eine von Amazon Route 53 gehostete Zone verweist. Die gehostete Zone muss sich in demselben AWS-Konto befinden, in dem Sie diese Lösung bereitstellen. Wenn Sie keinen registrierten Domänennamen haben, können Sie einen bei Route 53 registrieren. Wenn Sie einen registrierten Domänennamen haben, der aber nicht auf eine von Route 53 gehostete Zone verweist, konfigurieren Sie Route 53 als Ihren DNS-Service.

  • AWS Identity and Access Management (IAM)-Berechtigungen zum Starten von CloudFormation-Vorlagen, die IAM-Rollen erstellen, und Berechtigungen zum Erstellen aller AWS-Ressourcen in der Lösung. Weitere Informationen finden Sie unter Steuern des Zugriffs mit AWS Identity and Access Management im Benutzerhandbuch für AWS CloudFormation.

Sie sind für die Kosten verantwortlich, die bei der Nutzung dieser Lösung entstehen. Weitere Informationen zu den Kosten finden Sie auf den Preisseiten des jeweiligen AWS-Service.

Verwendung der CloudFormation-Konsole

So funktioniert die Bereitstellung mithilfe der CloudFormation-Konsole

  1. Starten Sie diese Lösung in der CloudFormation-Konsole. Melden Sie sich bei Bedarf bei Ihrem AWS-Konto an.

  2. Der Assistent Stack erstellen wird in der CloudFormation-Konsole mit vorausgefüllten Feldern geöffnet, in denen die CloudFormation-Vorlage dieser Lösung angegeben wird.

    Wählen Sie unten auf der Seite Next aus.

  3. Geben Sie auf der Seite Specify stack details (Stackdetails angeben) Werte für die folgenden Felder ein:

    • SubDomain (Subdomäne) – Geben Sie die Subdomäne ein, die für Ihre Website verwendet werden soll. Wenn die Subdomäne beispielsweise www, ist, ist Ihre Website unter www.example.com verfügbar. (Ersetzen Sie example.com durch Ihren Domänennamen, wie in der folgenden Aufzählung erläutert.)

    • DomainName (Domänenname) – Geben Sie Ihren Domänennamen ein, z. B. example.com. Diese Domäne muss auf eine von Route 53 gehostete Zone verweisen.

    • HostedZoneId – die ID der von Route 53 gehostete Zone Ihres Domainnamens

    • CreateApex – (Optional) Erstellen Sie einen Alias für die Apex-Domain (example.com) in Ihrer CloudFront-Konfiguration.

  4. Wenn Sie fertig sind, wählen Sie Next (Weiter).

  5. (Optional) Auf der Seite Configure stack options (Stack-Optionen konfigurieren) können Sie Tags und andere Stack-Optionen hinzufügen.

  6. Wenn Sie fertig sind, wählen Sie Next (Weiter).

  7. Scrollen Sie auf der Seite Review (Überprüfen) zum Ende der Seite und wählen Sie dann die beiden Felder im Abschnitt Capabilities (Funktionen) aus. Diese Funktionen ermöglichen es CloudFormation, eine IAM-Rolle zu erstellen, die den Zugriff auf die Ressourcen des Stacks sowie die dynamische Benennung der Ressourcen ermöglicht.

  8. Wählen Sie Create stack (Stack erstellen) aus.

  9. Warten Sie, bis der Stack erstellt wurde. Der Stack erstellt einige verschachtelte Stacks. Dieser Vorgang kann einige Minuten dauern. Wenn der Vorgang fertig ist, wechselt der Status zu CREATE_COMPLETE.

    Wenn der Status CREATE_COMPLETE lautet, gehen Sie zu https://www.example.com, um Ihre Website anzuzeigen (ersetzen Sie www.example.com durch die Subdomäne und den Domänennamen, die Sie in Schritt 3 angegeben haben). Sie sollten den Standardinhalt der Website sehen:

    Der statische Website-Standardinhalt dieser Lösung. Dort steht: „Ich bin eine statische Website!“
So ersetzen Sie den Standardinhalt der Website durch Ihren eigenen

  1. Öffnen Sie die Amazon S3-Konsole unter https://console.aws.amazon.com/s3/.

  2. Wählen Sie den Bucket, dessen Name mit amazon-cloudfront-secure-static-site-s3bucketroot- beginnt.

    Anmerkung

    Stellen Sie sicher, dass Sie den Bucket mit s3bucketroot im Namen auswählen, nicht s3bucketlogs. Der Bucket mit s3bucketroot im Namen enthält den Inhalt der Website. Der Bucket mit s3bucketlogs im Namen enthält nur Protokolldateien.

  3. Löschen Sie den Standardinhalt der Website, und laden Sie dann Ihren eigenen hoch.

    Anmerkung

    Wenn Sie Ihre Website mit dem Standardinhalt dieser Lösung angezeigt haben, ist es wahrscheinlich, dass einige der Standardinhalte an einem CloudFront-Edge-Standort zwischengespeichert werden. Um sicherzustellen, dass Betrachter den aktualisierten Website-Inhalt sehen, machen Sie die Dateien ungültig, um die zwischengespeicherten Kopien von CloudFront-Edge-Standorten zu entfernen. Weitere Informationen finden Sie unter Aufheben der Gültigkeit von Dateien zum Entfernen von Inhalten.

Lokales Klonen der Lösung

Voraussetzungen

Um Ihren Website-Inhalt hinzuzufügen, bevor Sie diese Lösung bereitstellen, müssen Sie die Artefakte der Lösung lokal verpacken, wofür Node.js und npm erforderlich sind. Weitere Informationen finden Sie unter https://www.npmjs.com/get-npm.

So fügen Sie Ihre Website-Inhalte hinzu und stellen die Lösung bereit

  1. Klonen oder laden Sie die Lösung von herunte https://github.com/aws-samples/amazon-cloudfront-secure-static-site. Öffnen Sie nach dem Klonen oder Herunterladen eine Eingabeaufforderung oder ein Terminal, und navigieren Sie zum Ordner amazon-cloudfront-secure-static-site.

  2. Führen Sie den folgenden Befehl aus, um die Artefakte der Lösung zu installieren und zu verpacken:

    make package-static

  3. Kopieren Sie den Inhalt Ihrer Website in den Ordner www und überschreiben Sie den Standard-Website-Inhalt.

  4. Führen Sie den folgenden AWS CLI-Befehl aus, um einen Amazon-S3-Bucket zu erstellen, der die Artefakte der Lösung speichert. Ersetzen Sie amzn-s3-demo-bucket-for-artifacts durch Ihren eigenen Bucket-Namen.

    aws s3 mb s3://amzn-s3-demo-bucket-for-artifacts --region us-east-1

  5. Führen Sie den folgenden AWS CLI-Befehl aus, um die Artefakte der Lösung als CloudFormation-Vorlage zu verpacken. Ersetzen Sie amzn-s3-demo-bucket-for-artifacts durch den Namen des Buckets, den Sie im vorherigen Schritt erstellt haben.

    aws cloudformation package \
    --region us-east-1 \ 
    --template-file templates/main.yaml \
    --s3-bucket amzn-s3-demo-bucket-for-artifacts \
    --output-template-file packaged.template

  6. Führen Sie den folgenden Befehl aus, um die Lösung mit CloudFormation bereitzustellen, und ersetzen Sie dabei die folgenden Werte:

    • your-CloudFormation-stack-name – Ersetzen Sie dies durch einen Namen für den CloudFormation-Stack.

    • example.com – Ersetzen Sie dies durch Ihren Domänennamen. Diese Domain muss auf eine von Route 53 gehostete Zone im selben AWS-Konto verweisen.

    • www – Ersetzen Sie dies durch die Subdomäne, die für Ihre Website verwendet werden soll. Wenn die Subdomäne beispielsweise www ist, ist Ihre Website unter www.example.com verfügbar.

    • hosted-zone-ID – Ersetzen Sie dies durch die ID der von Route 53 gehosteten Zone Ihres Domainnamens.

    aws cloudformation deploy \
    --region us-east-1 \
    --stack-name your-CloudFormation-stack-name \
    --template-file packaged.template \
    --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \
    --parameter-overrides DomainName=example.com SubDomain=www HostedZoneId=hosted-zone-ID

    1. (Optional) Um den Stack mit einem Domain-Apex bereitzustellen, führen Sie stattdessen den folgenden Befehl aus.

      aws --region us-east-1 cloudformation deploy \
    --stack-name your-CloudFormation-stack-name \
    --template-file packaged.template \
    --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \
    --parameter-overrides  DomainName=example.com SubDomain=www HostedZoneId=hosted-zone-ID CreateApex=yes

  7. Warten Sie, bis der CloudFormation-Stack die Erstellung abgeschlossen hat. Der Stack erstellt einige verschachtelte Stacks. Dieser Vorgang kann einige Minuten dauern. Wenn der Vorgang fertig ist, wechselt der Status zu CREATE_COMPLETE.

    Wenn sich der Status in CREATE_COMPLETE ändert, gehen Sie zu https://www.example.com, um Ihre Website anzuzeigen (ersetzen Sie www.beispiel.com durch die Subdomäne und den Domänennamen, die Sie im vorherigen Schritt angegeben haben). Sie sollten den Inhalt Ihrer Website sehen.

Suchen von Zugriffsprotokollen

Diese Lösung ermöglicht Zugriffsprotokolle für die CloudFront-Verteilung. Führen Sie die folgenden Schritte aus, um die Zugriffsprotokolle der Verteilung zu finden.

So finden Sie die Zugriffsprotokolle der Verteilung

  1. Öffnen Sie die Amazon S3-Konsole unter https://console.aws.amazon.com/s3/.

  2. Wählen Sie den Bucket, dessen Name mit amazon-cloudfront-secure-static-site-s3bucketlogs- beginnt.

    Anmerkung

    Stellen Sie sicher, dass Sie den Bucket mit s3bucketlogs im Namen auswählen, nicht s3bucketroot. Der Bucket mit s3bucketlogs im Namen enthält Protokolldateien. Der Bucket mit s3bucketroot im Namen enthält den Inhalt der Website.

  3. Der Ordner cdn enthält die CloudFront-Zugriffsprotokolle.