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

Kurzbeschreibung

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

Auflösung

HTTP-Proxy-Integrationen

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

Wenn Sie dies noch nicht getan haben, folgen Sie dem Tutorial, um eine statische Website auf Amazon S3 zu konfigurieren.

Eine REST-API erstellen

1.    Öffnen Sie die API-Gateway-Konsole.

2.    Wählen Sie für REST-API die Option Entwickeln aus.

3.    Geben Sie als API-Name einen Namen für Ihre REST-API ein.

4.    Wählen Sie die Dropdownliste Endpunkttyp aus, wählen Sie Ihren Endpunkttyp aus und wählen Sie dann API erstellen aus.

5.    Wählen Sie im Navigationsbereich unter Ihrem API-Namen Ressourcen aus.

6.    Wählen Sie die Dropdownliste Aktionen und dann Ressource erstellen aus.

7.    Geben Sie unter Ressourcenname einen Namen ein. Zum Beispiel Schlüssel.

8.    Geben Sie für Ressourcenpfad einen Pfadparameter ein. Zum Beispiel {key}.

9.    Wählen Sie Ressource erstellen.

Erstellen der Methode für die Stammressource

1.    Wählen Sie den Ressourcennamen {key}, wählen Sie die Dropdown-Liste Aktionen und wählen Sie Methode erstellen aus.

2.    Wählen Sie in der Dropdownliste {key} die Option GET und anschließend das Häkchensymbol aus.

3.    Wählen Sie für Integrationstyp die Option HTTP, wählen Sie HTTP-Proxy-Integration verwenden und behalten Sie die HTTP-Methode für GET bei.

4.    Geben Sie für Endpunkt-URL http://.s3-website-.amazonaws.com/{key} ein und wählen Sie dann Speichern.

Bereitstellen der REST-API

1.    Wählen Sie in der Dropdownliste Aktionen die Option API bereitstellen aus.

2.    Wählen Sie in der Dropdownliste Bereitstellungsphase die Option [Neue Phase] aus.

3.    Geben Sie unter Bezeichnung dieser Phase einen Namen ein. Zum Beispiel Dev.

4.    Wählen Sie Bereitstellen. Notieren Sie sich im Dev Stage Editor die Aufruf-URL. Sie benötigen sie später, um Ihre API zu testen.

5.    Testen Sie den API-Proxy für Ihre Amazon S3-Website mit dem Befehl curl, ähnlich wie im folgenden Beispiel:

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 die Website so, dass nur über den API-Proxy auf sie zugegriffen werden kann.

1.    Wenn Sie dies noch nicht getan haben, 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 Gesamten öffentlichen Zugriff sperren aktiviert.

2.    Ändern Sie die Bucket-Richtlinie in Schritt 4 so, dass 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 Berechtigung 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 hängen Sie die im vorherigen Schritt erstellte IAM-Richtlinie an diese neue Rolle an.

5.    Kopieren Sie den ARN der IAM-Rollen. Sie brauchen ihn in einem späteren Schritt.

6.    Die IAM-Rolle muss die folgende Vertrauensrichtlinie enthalten, damit API Gateway die Rolle annehmen kann:

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

Erstellen Sie einen 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 Entwickeln.

4.    Geben Sie als API-Name einen Namen für Ihre REST-API ein.

5.    Wählen Sie den Endpunkttyp danach aus, woher der Großteil des Client-Datenverkehrs stammt.
Hinweis: Es ist eine bewährte Methode, Edge-optimierte Endpunkte für öffentliche Services zu verwenden, die über das Internet aufgerufen werden. Regionale Endpunkte werden vorwiegend für APIs verwendet, auf die von der gleichen AWS-Region aus zugegriffen wird.

6.    Wählen Sie API erstellen aus.

Erstellen der GET-Methode für die Stammressource

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

1.    Wenn die Stammressource „/“ ausgewählt ist, wählen Sie die Dropdown-Liste Aktionen und dann Methode erstellen aus.

2.    Wählen Sie in der Dropdown-Liste GET und dann das Häkchensymbol aus.

3.    Wählen Sie als Integrationstyp die Option AWS-Service aus.

4.    Wählen Sie die Dropdown-Liste AWS-Region und dann Ihre Region aus.

5.    Wählen Sie die Dropdownliste „AWS Service“ und dann Simple Storage Service (S3) aus.

6.    Lassen Sie dieses Feld für AWS-Subdomain leer.

7.    Wählen Sie als HTTP-Methode GET aus.

8.    Wählen Sie für Aktionstyp die Option Pfadüberschreibung verwenden.

9.    Geben Sie für Pfadüberschreibung den Amazon S3-Bucket-Pfad ein, der <bucket_name>/index.html ähnelt.

10.  Fügen Sie für Ausführungsrolle den ARN der IAM-Rolle ein, die Sie zuvor erstellt haben.

11.  Wählen Sie Speichern aus.

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

Erstellen eines API-Ressourcenobjekts

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

1.    Wählen Sie unter Ressourcen die Dropdownliste Aktionen und dann Ressource erstellen aus.

2.    Geben Sie unter Ressourcenname einen Namen ein. Zum Beispiel {object}.

3.    Geben Sie für Ressourcenpfad einen Pfad ein. Zum Beispiel {object}.

4.    Wählen Sie Ressource erstellen.

Konfigurieren einer GET-Methode für die Ressource

1.    Wenn die Ressource {object} ausgewählt ist, wählen Sie die Dropdown-Liste Aktionen und dann Methode erstellen aus.

2.    Wählen Sie in der Dropdown-Liste GET und dann das Häkchensymbol aus.

3.    Wählen Sie als Integrationstyp die Option AWS-Service aus.

4.    Wählen Sie die Dropdown-Liste AWS-Region und dann Ihre Region aus.

5.    Wählen Sie die Dropdown-Liste AWS Service und dann Simple Storage Service (S3) aus.

6.    Lassen Sie dieses Feld für AWS-Subdomain leer.

7.    Wählen Sie als HTTP-Methode die Option GET aus.

8.    Wählen Sie für Aktionstyp die Option Pfadüberschreibung verwenden.

9.    Geben Sie für Pfadüberschreibung Ihren Amazon-S3-Bucket-Pfad ein, der**<bucket_name>/{object}** ähnelt.

10.  Fügen Sie für Ausführungsrolle den ARN der IAM-Rolle ein, die Sie zuvor erstellt haben.

11.  Wählen Sie Speichern aus.

12.  Wählen Sie GET für Ressourcenname {object} und dann Integrationsanfrage aus.

13.  Erweitern Sie URL-Pfadparameter, geben Sie ein Name-Wert-Objekt und Zugeordnet aus Wert method.request.path.object ein und aktivieren Sie das Kontrollkästchen zum Speichern.

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

Ordnen Sie den Wert des Header-Parameters 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 Ressourcen/ die Option Methodenantwort aus.

2.    Erweitern Sie den Pfeil neben HTTP-Status 200, wählen Sie unter Antwort-Header für 200 die Option Header hinzufügen.

3.    Wählen Sie den Header Name als Inhaltstyp aus und aktivieren Sie dann das Kontrollkästchen zum Speichern.

4.    Wählen Sie Methodenausführung aus.

5.    Wählen Sie Integrationsantwort und erweitern Sie den Pfeil neben HTTP-Status-Regex.

6.    Erweitern Sie Header-Zuordnungen, geben Sie für Content-Type den Zuordnungswert integration.response.header.Content-Type ein.

7.    Wiederholen Sie die Schritte 1 bis 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 den API-Proxy für Ihre statische Amazon S3-Website mit einem Browser oder einem curl-Befehl testen, der dem folgenden ähnelt:

Ressource Root (/)

curl -X GET https://API_ID.execute-api.region.amazonaws.com/<stage_name>/

Ressource {Object}

curl -X GET https://API_ID.execute-api.region.amazonaws.com/<stage_name>/home.html

---

Relevante 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