Wie kann ich Amazon S3 verwenden, um eine statische Website zu hosten, die API Gateway als Proxy verwendet?

Lösung

Sie können Amazon S3 verwenden, um statische Websites zu hosten. Sie können entweder die HTTP-Proxy-Integration oder die AWS-Service-Integration verwenden, um API Gateway als Proxy für die statische Amazon-S3-Website zu konfigurieren.

HTTP-Proxy-Integration

Wenn Ihre statische Amazon-S3-Website öffentlich zugänglich ist, verwenden Sie die HTTP-Integration und geben Sie die URL der statischen S3-Website für das API-Gateway an.

Falls noch nicht geschehen, folgen Sie dem Tutorial, um eine statische Website auf Amazon S3 zu konfigurieren.

Erstellen einer REST-API

1. Öffnen Sie die API-Gateway-Konsole.
2. Wählen Sie unter REST API die Option Erstellen aus.
3. Geben Sie unter API-Name einen Namen für Ihre REST-API ein.
4. Wählen Sie in der Dropdown-Liste Endpunkttyp Ihren Endpunkttyp aus und klicken Sie dann auf API erstellen.
5. Wählen Sie im Navigationsbereich unter Ihrem API-Namen Ressourcen aus.
6. Wählen Sie in der Dropdown-Liste Aktionen die Option Ressource erstellen aus.
7. Geben Sie einen Namen als Ressourcenname ein. Zum Beispiel key.
8. Geben Sie für Ressourcenpfad einen Pfadparameter ein. Zum Beispiel {key}.
9. Wählen Sie Ressource erstellen.

Erstellen der Methode für die Root-Ressource

1. Wählen Sie den Ressourcennamen {key} und dann in der Dropdown-Liste Aktionen die Option Methode erstellen aus.
2. Wählen Sie in der Dropdown-Liste {key} die Option GET und dann das Häkchensymbol aus.
3. Wählen Sie unter Integrationstyp die Option HTTP und HTTP-Proxy-Integration verwenden aus und behalten Sie GET als HTTP-Methode bei.
4. Geben Sie als Endpunkt-URL http://BUCKET_NAME.s3-website.REGION.amazonaws.com/{key} ein und wählen Sie dann Speichern.

Bereitstellen der REST-API

1. Wählen Sie in der Dropdown-Liste Aktionen die Option API bereitstellen aus.
2. Wählen Sie in der Dropdown-Liste Bereitstellungsstufe die Option**[New Stage]** aus.
3. Geben Sie unter Stage name einen Namen ein. Zum Beispiel Dev.
4. Wählen Sie Bereitstellen aus. Notieren Sie sich die Aufruf-URL aus dem Dev Stage Editor. Sie benötigen sie später, um Ihre API zu testen.
5. Verwenden Sie einen curl-Befehl wie den folgenden, um den API-Proxy für Ihre Amazon-S3-Website zu testen:

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/index.html

AWS-Service-Integration

Konfigurieren der statischen Amazon-S3-Website

Wenn Ihre statische Amazon-S3-Website für den öffentlichen Zugriff gesperrt ist, konfigurieren Sie sie so, dass nur über den API-Proxy darauf zugegriffen wird.

1. Falls noch nicht geschehen, folgen Sie dem Tutorial, um eine statische Website auf Amazon S3 zu konfigurieren.
   **Hinweis:**Überspringen Sie Schritt 3 des Tutorials und lassen Sie die Standardeinstellung Blockieren jeglichen öffentlichen Zugriffs aktiviert.

2. Ändern Sie die Bucket-Richtlinie in Schritt 4 des Tutorials, sodass der API-Proxy nur auf den Amazon-S3-Bucket zugreifen kann, ähnlich wie im folgenden Beispiel:

   {
     "Version": "2012-10-17",
     "Statement": [{
         "Sid": "APIProxyBucketPolicy",
         "Effect": "Allow",
         "Principal": {
           "Service": "apigateway.amazonaws.com"
         },
         "Action": "s3:GetObject",
         "Resource": "arn:aws:s3:::BUCKET_NAME/*",
         "Condition": {
           "ArnLike": {
             "aws:SourceArn": "arn:aws:execute-api:REGION:ACCOUNT:API_ID/*/GET/"
           }
         }
     }]
   }

3. Erstellen Sie eine AWS Identity and Access Management (IAM)-Richtlinie mit Genehmigung für die GetObject-API für den Amazon-S3-Bucket.

   {
     "Version": "2012-10-17",
     "Statement": [{
       "Effect": "Allow",
       "Action": ["s3:GetObject"],
       "Resource": "*"
     }]
   }

4. Erstellen Sie eine IAM-Rolle und fügen Sie die im vorherigen Schritt erstellte IAM-Richtlinie an diese neue Rolle an.

5. Kopieren Sie den ARN der IAM-Rolle. Sie werden ihn in einem späteren Schritt benötigen.
   Die IAM-Rolle muss die folgende Vertrauensrichtlinie enthalten, damit API Gateway die Rolle übernehmen kann:

   {
     "Version": "2012-10-17",
     "Statement": [{
       "Sid": "",
       "Effect": "Allow",
       "Principal": {
           "Service": "apigateway.amazonaws.com"
       },
       "Action": "sts:AssumeRole"
     }]
   }

Erstellen eines REST-API-Proxy für den Amazon-S3-Service

1. Öffnen Sie die API-Gateway-Konsole.
2. Wählen Sie API erstellen aus.
3. Wählen Sie REST-API und dann Erstellen aus.
4. Geben Sie unter API-Name einen Namen für Ihre REST-API ein.
5. Wählen Sie unter Endpunkttyp den Endpunkttyp aus, je nachdem, woher der Großteil des Client-Datenverkehrs stammt.
   **Hinweis:**Es hat sich bewährt, für öffentliche Dienste, auf die über das Internet zugegriffen wird, Edge-optimierte Endpunkte zu verwenden. Regionale Endpunkte werden hauptsächlich für APIs verwendet, auf die von derselben AWS-Region aus zugegriffen wird.
6. Wählen Sie API erstellen aus.

Erstellen einer GET-Methode für die Root-Ressource

Die Root-Methode ist für Proxy-Anfragen an statische Amazon-S3-Websites konfiguriert.

1. Wählen Sie die Root-Ressource "/" und dann in der Dropdown-Liste Aktionen die Option Methode erstellen aus.
2. Wählen Sie in der Dropdown-Liste GET und dann das Häkchensymbol aus.
3. Wählen Sie für Integrationstyp die Option AWS-Service aus.
4. Wählen Sie Ihre Region in der Dropdown-Liste AWS-Region aus.
5. Wählen Sie Simple Storage Service (S3) in der Dropdown-Liste „AWS-Service“ aus.
6. Lassen Sie das Feld für AWS-Subdomäne leer.
7. Wählen Sie GET als HTTP-Methode aus.
8. Wählen Sie als Aktionstyp die Option Pfadüberschreibung verwenden aus.
9. Geben Sie für Pfadüberschreibung den Pfad des Amazon-S3-Buckets ein, ähnlich wie BUCKET_NAME/index.html.
10. Fügen Sie unter Ausführungsrolle den zuvor erstellten IAM-Rollen-ARN ein.
11. Wählen Sie Speichern.

Dieses Setup integriert die Frontend-API-Anfrage GET https://your-api-host/stage/ in das S3-Backend GET https://your-s3-host/index.html.

Erstellen eines API-Ressourcenobjekts

Um auf bestimmte Objekte aus einem S3-Bucket zuzugreifen, erstellen Sie eine Ressource namens {object}, die den Objektpfad in der Frontend-API-Anfrage abbildet. Beispiel: GET https://your-api-host/stage/home.html zum S3-Backend GET https://your-s3-host/home.html.

1. Öffnen Sie unter Ressourcen die Dropdown-Liste Aktionen und wählen Sie Ressource erstellen aus.
2. Geben Sie einen Namen als Ressourcenname ein. Zum Beispiel {object}.
3. Geben Sie einen Pfad als Ressourcenpfad ein. Zum Beispiel {object}.
4. Wählen Sie Ressource erstellen.

Konfigurieren einer GET-Methode für die Ressource

1. Wählen Sie die Ressource {object} und dann Methode erstellen in der Dropdown-Liste Aktionen.
2. Wählen Sie GET in der Dropdown-Liste und dann das Häkchensymbol aus.
3. Wählen Sie für Integrationstyp die Option AWS-Service aus.
4. Wählen Sie Ihre Region in der Dropdown-Liste AWS-Region aus.
5. Öffnen Sie die Dropdown-Liste AWS-Service und wählen Sie Simple Storage Service (S3) aus.
6. Lassen Sie das Feld für AWS-Subdomäne leer.
7. Wählen Sie GET als HTTP-Methode aus.
8. Wählen Sie als Aktionstyp die Option Pfadüberschreibung verwenden aus.
9. Geben Sie für Pfadüberschreibung den Pfad Ihres Amazon-S3-Buckets ein, ähnlich wie BUCKET_NAME/{object}.
10. Fügen Sie unter Ausführungsrolle den zuvor erstellten IAM-Rollen-ARN ein.
11. Wählen Sie Speichern.
12. Wählen Sie GET für Ressourcenname {object} und dann Integrationsanforderung.
13. Erweitern Sie URL-Pfadparameter, geben Sie ein Name value object und Mapped from value method.request.path.object ein und aktivieren Sie zum Speichern das Kontrollkästchen.

Einrichten der Antwort-Header-Zuordnungen für die GET-Methode

Ordnen Sie den Header-Parameterwert des Backend-Inhaltstyps dem Frontend-Gegenstück zu. Dadurch wird sichergestellt, dass der Browser die Antwort mit dem Inhaltstyp erfolgreich verarbeitet.

1. Wählen Sie GET und unter Resources / die Option Methodenantwort.
2. Erweitern Sie den Pfeil neben HTTP Status 200 und wählen Sie unter Response Headers for 200 die Option Header hinzufügen aus.
3. Wählen Sie den Namen des Headers als Inhaltstyp und aktivieren Sie zum Speichern das Kontrollkästchen.
4. Wählen Sie Methodenausführung.
5. Wählen Sie Integrationsantwort und erweitern Sie den Pfeil neben HTTP-Status-Regex.
6. Erweitern Sie Header-Zuweisungen und geben Sie für Inhaltstyp den Zuweisungswert integration.response.header.Content-Type ein.
7. Wiederholen Sie die Schritte 1–6 für die GET-Methode unter Resource/{object}.
8. Wiederholen Sie die Schritte im Abschnitt Bereitstellen der REST-API.

Testen des API-Proxy

Sie können einen Browser oder einen curl-Befehl verwenden, um den API-Proxy für Ihre statische Amazon-S3-Website zu testen:

Root (/)-Ressource

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/

{Object}-Ressource

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/home.html

Verwandte Informationen

Tutorial: Erstellen einer REST-API als Amazon S3-Proxy in API Gateway

Hosten einer statischen Website mit Amazon S3

REST-API in Amazon API Gateway erstellen

Bereitstellen einer REST-API über die API Gateway-Konsole