Beginnen Sie mit einer sicheren statischen Website - Amazon CloudFront
Übersicht über die LösungStellen Sie die Lösung bereit

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Beginnen Sie mit einer sicheren statischen Website

Sie können mit Amazon beginnen, CloudFront indem Sie die in diesem Thema beschriebene Lösung verwenden, um eine sichere statische Website für Ihren Domainnamen zu 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 Amazon CloudFront Content Delivery Network beschleunigt — Diese Lösung erstellt eine CloudFront Distribution, um Ihre Website Zuschauern mit geringer Latenz zur Verfügung zu stellen. Die Verteilung ist mit Origin Access Control (OAC) konfiguriert, um sicherzustellen, dass auf die Website nur über CloudFront S3 und nicht direkt von S3 aus zugegriffen werden kann.

  • Ist durch HTTPS Sicherheitsheader gesichert — Diese Lösung erstellt ein SSL TLS /-Zertifikat in AWS Certificate Manager (ACM) und hängt es an die CloudFront Distribution an. Dieses Zertifikat ermöglicht es der Distribution, die Website Ihrer Domain sicher bereitzustellen. HTTPS

  • Wird konfiguriert und bereitgestellt mit AWS CloudFormation— Diese Lösung verwendet eine AWS CloudFormation Vorlage, um alle Komponenten einzurichten, sodass Sie sich mehr auf den Inhalt Ihrer Website und weniger auf die Konfiguration der 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 ist, wird das Objekt aus seinem Cache an den Viewer CloudFront zurückgegeben.

  3. Wenn sich das Objekt nicht im CloudFront Cache befindet, CloudFront wird das Objekt vom Ursprung (einem S3-Bucket) angefordert.

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

  5. CloudFront speichert das Objekt im Cache.

  6. Das Objekt wird an den Viewer zurückgegeben. Nachfolgende Anfragen für das Objekt, die an derselben CloudFront Edge-Position ankommen, werden vom CloudFront Cache aus bedient.

Stellen Sie die Lösung bereit

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

  • Verwenden Sie die AWS CloudFormation Konsole, um die Lösung mit Standardinhalten bereitzustellen, und laden Sie dann den Inhalt Ihrer Website auf 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 Hosting-Zone muss sich in derselben Zone befinden AWS-Konto , in der Sie diese Lösung bereitstellen. Wenn Sie keinen registrierten Domänennamen haben, können Sie einen bei Route 53 registrieren. Wenn Sie über einen registrierten Domainnamen verfügen, dieser jedoch nicht auf eine von Route 53 gehostete Zone verweist, konfigurieren Sie Route 53 als Ihren DNS Dienst.

  • AWS Identity and Access Management (IAM) Berechtigungen zum Starten von CloudFormation Vorlagen, mit denen IAM Rollen erstellt werden, 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 AWS CloudFormation Benutzerhandbuch.

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

Verwendung der AWS CloudFormation -Konsole

Zur Bereitstellung über die CloudFormation Konsole

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

  2. Der Assistent zum Erstellen von Stacks wird in der CloudFormation Konsole geöffnet. Er enthält vorausgefüllte Felder, die die CloudFormation Vorlage dieser Lösung angeben.

    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— Geben Sie die Subdomain ein, die Sie für Ihre Website verwenden möchten. Wenn die Subdomain beispielsweise www ist, ist Ihre Website verfügbar unter www.example.com. (Ersetzen Sie example.com durch Ihren Domänennamen, wie in der folgenden Aufzählung erläutert.)

    • DomainName— Geben Sie Ihren Domainnamen ein, zum Beispiel example.com. Diese Domäne muss auf eine von Route 53 gehostete Zone verweisen.

    • HostedZoneId— Die Route 53-Hosting-Zonen-ID Ihres Domainnamens.

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

  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 ermöglicht, und die Ressourcen dynamisch zu benennen.

  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 abgeschlossen ist, ändert sich der Status auf CREATE_ COMPLETE.

    Wenn der Status CREATE_ istCOMPLETE, gehen Sie zu https://www.example.com um Ihre Website aufzurufen (ersetzen Sie www.example.com durch die Subdomain und den Domainnamen, 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 S3-Konsole unter https://console.aws.amazon.com/s3/.

  2. Wählen Sie den Bucket aus, 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 angesehen haben, ist es wahrscheinlich, dass ein Teil des Standardinhalts an einem Edge-Speicherort zwischengespeichert wurde. CloudFront Um sicherzustellen, dass Zuschauer Ihre aktualisierten Website-Inhalte sehen, machen Sie die Dateien ungültig, um die zwischengespeicherten Kopien von CloudFront den Edge-Speicherorten zu entfernen. Weitere Informationen finden Sie unter Machen Sie Dateien ungültig, um Inhalte zu entfernen.

Klonen Sie die Lösung lokal

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 S3-Bucket zum Speichern der Lösungsartefakte zu erstellen. Ersetzen amzn-s3-demo-bucket-for-artifacts mit Ihrem 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 amzn-s3-demo-bucket-for-artifacts mit dem 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 bereitzustellen CloudFormation, und ersetzen Sie dabei die folgenden Werte:

    • your-CloudFormation-stack-name — Durch einen Namen für den CloudFormation Stack ersetzen.

    • example.com — Ersetze es durch deinen Domainnamen. Diese Domain muss auf eine von Route 53 gehostete Zone in derselben verweisen AWS-Konto.

    • www — Ersetzen Sie es durch die Subdomain, die Sie für Ihre Website verwenden möchten. Wenn die Subdomäne beispielsweise www ist, ist Ihre Website unter www.example.com verfügbar.

    • hosted-zone-ID — Ersetzen Sie es durch die Route 53-Hosting-Zonen-ID 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 die Erstellung des CloudFormation Stacks abgeschlossen ist. Der Stack erstellt einige verschachtelte Stacks. Dieser Vorgang kann einige Minuten dauern. Wenn der Vorgang abgeschlossen ist, ändert sich der Status auf CREATE_ COMPLETE.

    Wenn sich der Status auf CREATE_ ändertCOMPLETE, gehen Sie zu, https://www.example.com um Ihre Website aufzurufen (ersetzen Sie www.example.com durch die Subdomain und den Domainnamen, 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 Verteilung. CloudFront 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 S3-Konsole unter https://console.aws.amazon.com/s3/.

  2. Wählen Sie den Bucket aus, 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 mit dem Namen cdn enthält die Zugriffsprotokolle. CloudFront