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

Lösung

HTTP-Proxy-Integration

Wenn deine statische Website öffentlich zugänglich ist, verwende die HTTP-Integration und gib die URL der statischen S3-Website für die API an.

Konfiguriere zunächst eine statische Website auf Amazon S3. Verwende dann die API Gateway-Konsole, um eine REST-API und eine Methode für die Root-Ressource zu erstellen, und stelle die REST-API bereit.

Erstellen einer REST-API

Führe die folgenden Schritte aus:

1. Wähle für REST API die Option Erstellen aus.
2. Gib als API-Name einen Namen für die REST-API ein.
3. Wähle im Menü Endpunkttyp den Endpunkttyp aus und wähle dann API erstellen aus.
4. Wähle im Navigationsbereich unter dem API-Namen Ressourcen aus.
5. Wähle im Menü Aktionen die Option Ressource erstellen aus.
6. Gib für Ressourcenname einen Namen ein, z. B. Schlüssel.
7. Gib für Ressourcenpfad einen Pfadparameter ein, zum Beispiel {key}.
8. Wähle Ressource erstellen.

Erstellen der Methode für die Root-Ressource

Führe die folgenden Schritte aus:

1. Wähle den Ressourcennamen {key}b.
2. Wähle im Menü Aktionen die Option Methode erstellen aus.
3. Wähle im Menü {key} die Option GET und dann das Häkchensymbol.
4. Wähle unter Integrationstyp die Option HTTP und HTTP-Proxy-Integration verwenden aus und behalte GET als HTTP-Methode bei.
5. Gib als Endpunkt-URL http://BUCKET_NAME.s3-website.REGION.amazonaws.com/{key} ein und wähle dann Speichern.

Bereitstellen der REST-API

Führe die folgenden Schritte aus:

1. Wähle im Menü Aktionen die Option API bereitstellen aus.

2. Wähle im Menü Bereitstellungsstufe die Option [New Stage].

3. Gib als Stufenname einen Namen ein, zum Beispiel Dev.

4. Wähle Bereitstellen aus.

5. Notiere dir im Dev Stage Editor die Aufruf-URL, um die API zu testen.

6. Führe den folgenden Befehl aus, um den API-Proxy für die Amazon S3-Website zu testen:

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

   Hinweis: Ersetze die Beispiel-URL durch deine Aufruf-URL.

AWS-Service-Integration

Konfigurieren der statischen Amazon-S3-Website

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

Führe die folgenden Schritte aus:

1. Konfiguriere eine statische Website auf Amazon S3.
   Hinweis: Wenn du die statische Website konfigurierst, überspringe Schritt 3. Lasse die Standardeinstellung Blockieren des gesamten öffentlichen Zugriffs aktiviert.

2. Ändere die Bucket-Richtlinie in Schritt 4, damit der API-Proxy nur auf den Amazon S3-Bucket zugreifen kann:

   {
     "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. Erstelle eine AWS Identity and Access Management (IAM, Identitäts- und Zugriffsmanagement)-Richtlinie, um die GetObject-API für den Amazon S3-Bucket zuzulassen:

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

4. Erstelle eine IAM-Rolle und füge dann die vorherige IAM-Richtlinie an.

5. Notiere dir den ARN der IAM-Rolle, der in einem späteren Schritt verwendet werden soll.
   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"
     }]
   }

Verwende die API Gateway-Konsole, um die folgenden Schritte auszuführen.

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

Führe die folgenden Schritte aus:

1. Wähle API erstellen aus.
2. Wähle REST-API und dann Erstellen aus.
3. Gib als API-Name einen Namen für die REST-API ein.
4. Wähle als Endpunkttyp den Endpunkttyp aus, der darauf basiert, woher der Großteil des Client-Datenverkehrs stammt.
   Hinweis: Es hat sich bewährt, für öffentliche Services, 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.
5. Wähle API erstellen aus.

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

Gehe wie folgt vor, um die Root-Methode für Proxy-Anforderungen an statische Amazon S3-Websites zu konfigurieren:

1. Wähle die Root-Ressource „/“.
2. Wähle im Menü Aktionen die Option Methode erstellen aus.
3. Wähle GET und dann das Häkchensymbol.
4. Wähle als Integrationstyp AWS-Service aus.
5. Wähle im Menü AWS-Region deine Region aus.
6. Wähle im Menü AWS-Service Simple Storage Service (S3) aus.
7. Lasse das Feld für die AWS-Subdomain leer.
8. Wähle GET als HTTP-Methode aus.
9. Wähle als Aktionstyp die Option Pfadüberschreibung verwenden aus.
10. Gib für Pfadüberschreibung den Amazon S3-Bucket-Pfad ein, zum Beispiel BUCKET_NAME/index.html.
11. Gib für die Ausführungsrolle den ARN der IAM-Rolle ein.
12. Wähle Speichern.

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

Erstellen eines API-Ressourcenobjekts

Um von einem S3-Bucket aus auf bestimmte Objekte zuzugreifen, erstelle eine Ressource mit dem Namen {object}, die den Objektpfad in der Frontend-API-Anforderung zuordnet. Ordne beispielsweise GET https://your-api-host/stage/home.html dem GET-S3-Backend https://your-s3-host/home.html zu.

Führe die folgenden Schritte aus:

1. Wähle Ressourcen.
2. Wähle im Menü Aktionen die Option Ressource erstellen aus.
3. Gib als Ressourcennname einen Namen ein, zum Beispiel {object}.
4. Gib als Ressourcenpfad einen Pfad ein, zum Beispiel {object}.
5. Wähle Ressource erstellen.

Konfigurieren einer GET-Methode für die Ressource

Führe die folgenden Schritte aus:

1. Wähle das {object} aus.
2. Wähle im Menü Aktionen die Option Methode erstellen aus.
3. Wähle **GET ** und dann das Häkchensymbol.
4. Wähle als Integrationstyp AWS-Service aus.
5. Wähle im Menü AWS-Region deine Region aus.
6. Wähle im Menü AWS-Service Simple Storage Service (S3) aus.
7. Lasse das Feld für die AWS-Subdomain leer.
8. Wähle GET als HTTP-Methode aus.
9. Wähle als Aktionstyp die Option Pfadüberschreibung verwenden aus.
10. Gib für Pfadüberschreibung deinen Amazon S3-Bucket-Pfad ein, zum Beispiel BUCKET_NAME/{object}.
11. Gib für die Ausführungsrolle den ARN der IAM-Rolle ein.
12. Wähle Speichern.
13. Wähle GET für den Ressourcennamen {object} und wähle dann Integrationsanfrage.
14. Erweitere die URL-Pfadparameter, gib ein Name Value Object ein, das vom Wert method.request.path.object zugeordnet wird, und aktiviere dann das Kontrollkästchen zum Speichern.

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

Ordne den Header-Parameterwert für den Backend-Inhaltstyp dem Frontend-Gegenstück zu, damit der Browser die Antwort mit dem Inhaltstyp erfolgreich verarbeitet.

Führe die folgenden Schritte aus:

1. Wähle GET.
2. Wähle unter Resources / die Option Methodenantwort aus.
3. Erweitere den Pfeil neben HTTP Status 200.
4. Wähle unter Response headers for 200 (Antwort-Header für 200), die Option Header hinzufügen aus.
5. Wähle den Namen des Headers als Inhaltstyp und aktiviere zum Speichern das Kontrollkästchen.
6. Wähle Methodenausführung.
7. Wähle Integrationsantwort aus, und erweitere dann den Pfeil neben HTTP status regex.
8. Erweitere Header-Zuweisungen.
9. Gib für Inhaltstyp den Zuweisungswert als integration.response.header.Content-Type ein.
10. Wiederhole die Schritte 1–6 für die GET-Methode unter Resource /{object}.
11. Wiederhole die Schritte im Abschnitt Bereitstellen der REST-API dieses Artikels.

Testen des API-Proxys

Verwende einen Browser oder einen curl-Befehl, um den API-Proxy für die 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

Hosten einer statischen Website mit Amazon S3

REST-APIs in API Gateway entwickeln

Eine Bereitstellung für eine REST-API in API Gateway erstellen