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

Lösung

Um Amazon S3 zum Hosten einer statischen Website zu verwenden, die API Gateway als Proxy verwendet, verwende eine HTTP-Integration oder eine AWS-Serviceintegration.

Verwenden einer HTTP-Integration

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

Konfiguriere 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 anschließend die REST-API bereit.

Erstellen einer REST-API

Gehe wie folgt vor:

1. Öffne die API-Gateway-Konsole.
2. Wähle API erstellen aus.
3. Wähle unter REST-API die Option Erstellen aus.
4. Gib als API-Name einen Namen für die REST-API ein.
5. Wähle in der Dropdown-Liste API-Endpunkttyp deinen Endpunkttyp aus und wähle dann API erstellen aus.
6. Wähle im Navigationsbereich unter deiner API Ressourcen aus.
7. Wähle Ressource erstellen aus.
8. Behalte für den Ressourcenpfad / bei.
9. Gib einen Namen als Ressourcenname ein. Zum Beispiel key.
10. Wähle Ressource erstellen aus.

Erstellen der Methode für die Root-Ressource

Gehe wie folgt vor:

1. Wähle unter Ressourcen die Ressource aus, die du erstellt hast. Zum Beispiel /key.
2. Wähle unter Methoden die Option Methode erstellen aus.
3. Wähle in der Dropdown-Liste Methodentyp die Option GET aus.
4. Wähle als Integrationstyp HTTP.
5. Wähle HTTP-Proxyintegration aus.
6. Wähle in der Dropdown-Liste der HTTP-Methode die Option GET aus.
7. Gib als Endpunkt-URL http://BUCKET_NAME.s3-website.REGION.amazonaws.com/key ein.<br id=hardline_break/> Hinweis: Ersetze BUCKET_NAME durch deinen Bucket-Namen, REGION durch die Region deines Buckets und key durch den Namen deiner Ressource.
8. Wähle Methode erstellen.

Bereitstellen der REST-API

Gehe wie folgt vor:

1. Wähle API bereitstellen aus.
2. Wähle aus der Dropdown-Liste Stufe *New Stage* (Neue Stufe) aus.
3. Gib unter Stufenname einen Namen ein. Zum Beispiel STAGE_NAME.
4. Wähle Bereitstellen.
5. Notiere dir unter Stufendetails die Aufruf-URL, um die API zu testen.
6. Führe den folgenden curl-Befehl aus, um den API-Proxy für deine S3-Website zu testen:

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

   Hinweis: Ersetze API_ID durch deine API-ID, REGION durch deine Region und STAGE_NAME durch den Namen deiner Stufe.

Eine AWS-Serviceintegration verwenden

Konfigurieren der statischen 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 werden kann.

Gehe wie folgt vor:

1. Konfiguriere eine statische Website auf Amazon S3.<br id=hardline_break/> Hinweis: Wenn du die statische Website konfigurierst, überspringe den Abschnitt Schritt 3: Einstellungen für das Blockieren des öffentlichen Zugriffs bearbeiten. Lasse die Standardeinstellung Blockieren des gesamten öffentlichen Zugriffs aktiviert.
2. Ändere eine Bucket-Richtlinie, die den Bucket-Inhalt öffentlich verfügbar macht, sodass der API-Proxy nur auf den S3-Bucket zugreifen kann. Beispiel für eine Bucket-Richtlinie:

   {  
     "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_ID:API_ID/*/GET/"
           }
         }
     }]
   }

   Hinweis: Ersetze BUCKET_NAME durch deinen Bucket-Namen, REGION durch deine Region, ACCOUNT_ID durch deine AWS-Konto-ID und API_ID durch deine API-ID.
3. Erstelle eine AWS Identity and Access Management (IAM)-Richtlinie, um der GetObject-API den Zugriff auf den S3-Bucket zu ermöglichen. Beispiel für eine IAM-Richtlinie:

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

   Hinweis: Ersetze BUCKET_NAME durch deinen Bucket-Namen.
4. Erstelle eine IAM-Rolle und füge dann die vorherige IAM-Richtlinie an.
5. Notiere dir den Amazon-Ressourcennamen (ARN) der IAM-Rolle.<br id=hardline_break/> Hinweis: 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-Proxys für den S3-Service

Gehe wie folgt vor:

1. Öffne die API-Gateway-Konsole.
2. Wähle API erstellen aus.
3. Wähle für REST-API die Option Erstellen aus.
4. Gib als API-Name einen Namen für die REST-API ein.
5. Wähle aus der Dropdown-Liste API-Endpunkttyp den Endpunkttyp aus, der darauf basiert, woher der Großteil des Client-Datenverkehrs stammt.<br id=hardline_break/> Hinweis: Es hat sich bewährt, Edge-optimierte Endpunkte für öffentliche Services zu verwenden, auf die der Client-Datenverkehr über das Internet zugreift. Wenn dein Client-Datenverkehr nur innerhalb derselben AWS-Region auf die APIs zugreift, verwende regionale Endpunkte.
6. Wähle API erstellen aus.

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

Gehe wie folgt vor:

1. Wähle die Root-Ressource / aus.
2. Wähle Methode erstellen.
3. Wähle in der Dropdown-Liste Methodentyp die Option GET aus.
4. Wähle als Integrationstyp AWS-Service aus.
5. Wähle aus der Dropdown-Liste AWS-Region deine Region aus.
6. Wähle aus der Dropdown-Liste AWS-Service Simple Storage Service (S3) aus.
7. Lasse das Feld für AWS-Subdomain leer.
8. Wähle in der Dropdown-Liste der HTTP-Methode die Option GET aus.
9. Wähle als Aktionstyp die Option Pfadüberschreibung verwenden aus.
10. Gib für Pfadüberschreibung deinen S3-Bucket-Pfad ein. Zum Beispiel BUCKET_NAME/index.html.
11. Gib für Ausführungsrolle den ARN der IAM-Rolle ein.
12. Wähle Methode erstellen.

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

Erstellen eines API-Ressourcenobjekts

Gehe wie folgt vor:

1. Wähle Ressource erstellen aus.
2. Behalte für Ressourcenpfad den Wert / bei.
3. Gib einen Namen als Ressourcenname ein. Zum Beispiel object.
4. Wähle Ressource erstellen aus.

Konfigurieren einer GET-Methode für die Ressource

Gehe wie folgt vor:

1. Wähle unter Ressourcen die Ressource aus, die du erstellt hast. Zum Beispiel /object.
2. Führe die Schritte 2–12 im Abschnitt GET-Methode für die Root-Ressource erstellen aus.
3. Wähle GET und dann Integrationsanfrage aus.<br id=hardline_break/> Hinweis: Ersetze object durch den Namen deiner Ressource.
4. Wähle Bearbeiten aus.
5. Erweitere URL-Pfadparameter und wähle dann Pfadparameter hinzufügen aus.
6. Gib unter Name den Namen deiner Ressource ein.
7. Gib unter Zugewiesen von den Wert als method.request.path.object ein.<br id=hardline_break/> Hinweis: Ersetze object durch den Namen deiner Ressource.
8. Wähle Speichern aus.

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

Du musst den Backend-Parameterwert für den Inhaltstyp-Header dem Frontend-Gegenstück zuordnen, damit der Browser die Antwort mit dem Inhaltstyp verarbeitet.

Gehe wie folgt vor:

1. Wähle unter Ressourcen die Option / aus.
2. Wähle GET und dann Methodenantwort.
3. Wähle unter Response 200 (Antwort 200) die Option Bearbeiten.
4. Wähle unter Header-Name die Option Header hinzufügen.
5. Stelle den Namen als Inhaltstyp ein.
6. Wähle Speichern aus.
7. Wähle Integrationsantwort und dann Bearbeiten.
8. Gib unter Header-Zuweisungen neben Inhaltstyp den Zuweisungswert als integration.response.header.Content-Type ein.
9. Wiederhole die Schritte 2–8 für die GET-Methode unter der /object-Resource.<br id=hardline_break/> Hinweis: Ersetze object durch den Namen deiner Ressource.

Bereitstellen der REST-API

Gehe wie folgt vor:

1. Wähle API bereitstellen aus.
2. Wähle aus der Dropdown-Liste Stufe *New Stage* (Neue Stufe) aus.
3. Gib unter Stufenname einen Namen ein. Zum Beispiel STAGE_NAME.
4. Wähle Bereitstellen.
5. Notiere dir unter Stufendetails die Aufruf-URL, um die API zu testen.

Führe einen curl-Befehl aus, um den API-Proxy für die statische S3-Website zu testen.

Hinweis: Ersetze in den folgenden Beispielen API_ID durch deine API-ID, REGION durch deine Region und STAGE_NAME durch den Namen deiner Stufe.

Führe den folgenden curl-Befehl aus, um die Root-Ressource zu testen:

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

Führe den folgenden curl-Befehl aus, um die Objektressource zu testen:

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

Ähnliche Informationen

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

Hosten einer statischen Website mithilfe von Amazon S3

REST-APIs in API Gateway entwickeln

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