Wie lade ich ein Bild oder eine PDF-Datei über API Gateway auf Amazon S3 hoch?

Lesedauer: 11 Minute

Ich möchte ein Bild oder eine PDF-Datei über Amazon API Gateway auf Amazon Simple Storage Service (Amazon S3) hochladen. Ich möchte auch ein Bild oder eine PDF-Datei abrufen.

Kurzbeschreibung

Um ein Bild oder eine PDF-Datei als Binärdatei über API Gateway in einen Amazon S3-Bucket hochzuladen, aktivieren Sie die Binärunterstützung.

Um Ihrer API Zugriff auf Ihren S3-Bucket zu gewähren, erstellen Sie eine AWS Identity and Access Management (IAM)-Rolle. Die IAM-Rolle muss Berechtigungen für API Gateway enthalten, um die Aktionen PutObject und GetObject in Ihrem S3-Bucket auszuführen.

Lösung

Erstellen einer IAM-Rolle für API Gateway

1. Öffnen Sie die IAM-Konsole.

2. Wählen Sie im Navigationsbereich Roles (Rollen).

3. Wählen Sie Create role (Regel erstellen).

4. Wählen Sie im Abschnitt Select type of trusted entity (Typ der vertrauenswürdigen Entität auswählen) die Option AWS service.

5. Wählen Sie im Abschnitt Choose a use case (Wählen Sie einen Anwendungsfall) die Option API Gateway.

6. Wählen Sie im Abschnitt Select your use case (Wählen Sie Ihren Anwendungsfall aus) die Option API Gateway.

7. Wählen Sie Next: Permissions (Weiter: Genehmigungen).
Hinweis: Dieser Abschnitt zeigt den von AWS verwalteten Service, der es API Gateway ermöglicht, Protokolle an das Konto eines Benutzers zu übertragen. Sie fügen Berechtigungen für Amazon S3 später hinzu.

8. (Optional) Wählen Sie Next: Tags (Weiter: Schlagworte) zum Hinzufügen von Schlagwörtern.

9. Wählen Sie Next: Review (Weiter: Bewertung).

10. Geben Sie unter Role name (Rollenname) einen Namen für Ihre Richtlinie ein. Zum Beispiel: api-gateway-upload-to-s3.

11. Wählen Sie Create role (Regel erstellen).

Erstellen einer IAM-Richtlinie und anhängen an die API-Gateway-Rolle

1. Öffnen Sie die IAM-Konsole.

2. Wählen Sie im Navigationsbereich Roles (Rollen).

3. Geben Sie in das Suchfeld den Namen der neuen API-Gateway-Rolle ein, die Sie erstellt haben. Wählen Sie dann diese Rolle in der Spalte Role name (Rollenname).

4. Wählen Sie auf der Registerkarte Roles detail page (Seite mit Rollendetails) die Option Add permissions (Berechtigungen hinzufügen).

5. Wählen Sie Create inline policy (Inline-Richtlinie erstellen).

6. Wählen Sie auf der Registerkarte Visual editor im Abschnitt Select a service (Dienst auswählen) die Option Choose a service (Dienst wählen).

7. Geben Sie S3 ein und wählen Sie dann S3.

8. Geben Sie im Feld Specify the actions allowed in S3 (Geben Sie die in S3 zulässigen Aktionen an) den Text PutObject ein, und wählen Sie dann PutObject.

9. Geben Sie GetObject ein und wählen Sie dann GetObject.

10. Erweitern Sie Resources (Ressourcen) und wählen Sie dann Specific (Spezifisch).

11. Wählen Sie Add ARN (ARN hinzufügen).

12. Geben Sie unter Bucket name den Namen Ihres Buckets ein. Geben Sie gegebenenfalls das Präfix an.

13. Geben Sie für Object name einen Objektnamen ein.
Hinweis: Der Bucket-Name gibt den Speicherort der hochgeladenen Dateien an. Der Objektname gibt das Muster an, das das Objekt für die Richtlinienausrichtung einhalten muss. Weitere Informationen finden Sie unter Benennungsregeln für Buckets und Übersicht über Amazon S3-Objekte.

14. Wählen Sie Add (Hinzufügen).

15. (Optional) Wählen Sie Next: Tags (Weiter: Schlagworte) zum Hinzufügen von Schlagwörtern.

16. Wählen Sie Next: Review (Weiter: Bewertung).

17. Geben Sie unter name den Namen Ihrer Richtlinie ein.

18. Wählen Sie Create policy (Richtlinie erstellen).

19. Geben Sie in das Richtliniensuchfeld den Namen der Richtlinie ein, die Sie in Schritt 17 erstellt haben, und wählen Sie dann diese Richtlinie aus.

20. Wählen Sie Policy actions (Richtlinienaktionen) und dann Attach (Anhängen). Eine Liste der IAM-Rollen wird angezeigt.

21. Suchen Sie nach der API Gateway-Rolle, die Sie zuvor erstellt haben. Wählen Sie dann die Rolle aus.

22. Wählen Sie Attach policy (Richtlinien anhängen).

Erstellen Sie eine API Gateway REST-API

Erstellen einer API, um Ihre Anfragen zu bearbeiten

1. Öffnen Sie die API Gateway-Konsole.

2. Wählen Sie im Navigationsbereich APIs.

3. Wählen Sie Create API (API erstellen).

4. Wählen Sie im Abschnitt Choose an API type (Wählen Sie einen API-Typ) für REST API die Option Build (Erzeugen).

5. Geben Sie unter API Name einen Namen für Ihre API ein und wählen Sie dann Next (Weiter).

6. Wählen Sie Create API (API erstellen).

Erstellen von Ressourcen für Ihre API

1. Wählen Sie auf Ihrer API-Seite im Bereich Resources die Option /.

2. Wählen Sie für Actions die Option Create Resource (Ressource erstellen).

3. Geben Sie als Resource Name (Ressourcenname) folder (Ordner) ein.

4. Geben Sie für Resource Path (Ressourcenpfad) {folder} (Ordner) ein.

5. Wählen Sie Create resource (Ressource erstellen).

6. Wählen Sie im Bereich Resources die Ressource /{folder} aus, die Sie in Schritt 5 erstellt haben.

7. Wählen Sie Actions (Aktionen) und dann Create Resource (Ressource erstellen).

8. Geben Sie als Resource Name (Ressourcenname) object (Objekt) ein.

9. Geben Sie für Resource Path (Ressourcenpfad) {object} (Objekt) ein.

10. Wählen Sie Create resource (Ressource erstellen).

Erstellen einer PUT-Methode für Ihre API zum Hochladen von Bildern oder PDF-Dateien

1. Wählen Sie Actions (Aktionen) und dann Create Method (Methode erstellen).

2. Wählen Sie in der Dropdownliste PUT und dann das Häkchensymbol aus.

3. Wählen Sie unter der Kategorie Integration type (Integrationstyp) die Option AWS Service aus.

4. Wählen Sie für die AWSRegion us-east-1 oder die AWS-Region aus, die Sie auf der Seite Bucket properties (Bucket-Eigenschaften) sehen.

5. Wählen Sie für AWS Service Simple Storage Service (S3).

6. Lassen Sie die AWS Subdomain leer.

7. Wählen Sie als HTTP method (HTTP-Methode) PUT.

8. Wählen Sie als Action Type (Aktionstyp) die Option Use path override (Pfadüberschreibung verwenden) aus.

9. Geben Sie für Path override (optional) (Pfadüberschreibung optional) {bucket}/{key} ein.

10. Geben Sie für die Execution role (Ausführungsrolle) den ARN für die IAM-Rolle ein, die Sie zuvor erstellt haben. Die ARN-Erstellung ist Teil des Abschnitts Erstellen einer IAM-Richtlinie und anhängen an die API-Gateway-Rolle.

11. Wählen Sie für Content Handling (Inhaltsverarbeitung) die Option Passthrough (Durchleiten).

12. Wählen Sie Save (Speichern).

Konfigurieren der Parameterzuordnungen für die PUT-Methode

1. Wählen Sie auf Ihrer API-Seite im Bereich Resources (Ressourcen) die Option PUT.

2. Wählen Sie Integration Request (Integrationsanfrage).

3. Erweitern Sie URL Path Parameters (URL-Pfadparameter).

4. Wählen Sie Add path (Pfad hinzufügen).

5. Geben Sie als Name bucket ein.

6. Geben Sie für Mapped from (Zugeordnet von) method.request.path.folder ein.

7. Wählen Sie das Häkchensymbol am Ende der Zeile.

8. Wiederholen Sie die Schritte 4–7. Stellen Sie in Schritt 5 Name auf key (Schlüssel) ein. Stellen Sie in Schritt 6 Mapped from (Zugeordnet von) auf method.request.path.object ein.

Erstellen einer GET-Methode für Ihre API zum Abrufen eines Bildes

1. Wählen Sie auf Ihrer API-Seite im Bereich Resources (Ressourcen) /{object}.

2. Wählen Sie Actions (Aktionen) und dann Create Method (Methode erstellen).

3. Wählen Sie in der Dropdownliste GET und dann das Häkchensymbol aus.

4. Wählen Sie unter der Kategorie Integration type (Integrationstyp) die Option AWS Service aus.

5. Wählen Sie für die AWSRegion us-east-1 oder die Region aus, die Sie auf der Seite Bucket properties (Bucket-Eigenschaften) sehen.

6. Wählen Sie für AWS Service Simple Storage Service (S3).

7. Lassen Sie die AWS Subdomain leer.

8. Wählen Sie als HTTP method (HTTP-Methode) GET.

9. Wählen Sie als Action Type (Aktionstyp) die Option Use path override (Pfadüberschreibung verwenden) aus.

10. Geben Sie für Path override (optional) (Pfadüberschreibung optional) {bucket}/{key} ein.

11. Geben Sie für die Execution role (Ausführungsrolle) den ARN für die IAM-Rolle ein, die Sie zuvor erstellt haben. Die ARN-Erstellung ist Teil des Abschnitts Erstellen einer IAM-Richtlinie und anhängen an die API-Gateway-Rolle.

12. Wählen Sie für Content Handling (Inhaltsverarbeitung) die Option Passthrough (Durchleiten).

13. Wählen Sie Save (Speichern).

Konfigurieren der Parameterzuordnungen für die GET-Methode

1. Wählen Sie auf Ihrer API-Seite im Bereich Resources (Ressourcen) die Option GET.

2. Wählen Sie Integration Request (Integrationsanfrage).

3. Erweitern Sie URL Path Parameters (URL-Pfadparameter).

4. Wählen Sie Add path (Pfad hinzufügen).

5. Geben Sie als Name bucket ein.

6. Geben Sie für Mapped from (Zugeordnet von) method.request.path.folder ein.

7. Wählen Sie das Häkchensymbol am Ende der Zeile.

Einrichten der Antwortzuordnung, um das Bild oder die PDF-Datei im Browser anzuzeigen

1. Wählen Sie auf Ihrer API-Seite im Bereich Resources (Ressourcen) die Option GET.

2. Wählen Sie Method Response (Methodenantwort).

3. Erweitern Sie 200.

4. Entfernen Sie unter Response Body for 200 die Option application/json.

5. Wählen Sie unter Response headers for 200, die Option Add header (Header hinzufügen) aus.

6. Geben Sie als Name content-type (Inhaltstyp) ein.

7. Wählen Sie das Häkchensymbol, um zu speichern.

8. Wählen Sie Method execution, um zum Bereich Method execution (Methodenausführung) zurückzukehren.

9. Wählen Sie Integration Response (Integrationsantwort).

10. Erweitern Sie 200 und erweitern Sie dann Header Mappings.

11. Wählen Sie das Stiftsymbol am Ende der Zeile mit dem Namen content-type.

12. Geben Sie 'image/jpeg' ein, um eine Bilddatei zu sehen.
-oder-
Geben Sie 'application/pdf' ein, um eine PDF-Datei anzuzeigen.

Einrichten von binäre Medientypen für die API

1. Wählen Sie im Navigationsbereich Ihrer API-Seite Settings (Einstellungen) aus.

2. Wählen Sie im Abschnitt Binary Media Types (Binäre Medientypen) die Option Add Binary Media Type (Binären Medientyp hinzufügen) aus.

3. Fügen Sie in das Textfeld die folgende Zeichenfolge ein:*/*
Hinweis: Setze die Zeichenfolge nicht in Anführungszeichen. Sie können einen bestimmten MIME-Typ (Multipurpose Internet Mail Extensions) durch einen Platzhalter ersetzen, den Sie als binären Medientyp verwenden möchten. Damit API Gateway beispielsweise JPEG-Bilder als binäre Medientypen behandelt, wählen Sie 'image/jpeg'. Wenn Sie***/*** hinzufügen, verwendet API Gateway alle Medientypen als binäre Medientypen.

4. Wählen Sie Save Changes (Änderungen speichern).

Beheben Sie den CORS-Fehler mit binären Einstellungen für die API

1. Wenn Sie die zuvor genannten APIs (PUT und GET) in einer Webanwendung verwenden, kann ein CORS-Fehler auftreten. Weitere Informationen finden Sie unter CORS-Fehler auf der Mozilla-Website.

2. Um den CORS-Fehler bei aktivierten Binäreinstellungen zu beheben, starten Sie CORS von der API Gateway-Konsole aus.

3. Wählen Sie auf Ihrer API-Seite im Bereich Resources (Ressourcen) /{object} aus.

4. Wählen Sie für Actions (Aktionen) die Option Enable CORS (CORS aktivieren) aus.

5. Wählen Sie Enable CORS and replace existing CORS headers (CORS aktivieren und bestehende CORS-Header ersetzen).

6. Führen Sie den CLI-Befehl update-integration aus, um die Inhaltsverarbeitungs-Eigenschaft zu aktualisieren. Dieses Update ermöglicht es dem binären Inhalt, Preflight-Optionsanfragen mit Mock-Integration zu bearbeiten.

7. Aktualisieren Sie die API-ID, die Ressourcen-ID und die AWS-Region, um die folgenden beiden CLI-Befehle auszuführen. Um die API-ID und die Ressourcen-ID abzurufen, wählen Sie oben in der Gateway-API-Konsole die Ressource {object} aus.

aws apigateway update-integration --rest-api-id API_ID --resource-id RESOURCE_id --http-method OPTIONS --patch-operations op='replace',path='/contentHandling',value='CONVERT_TO_TEXT' --region AWS_REGION

aws apigateway update-integration-response --rest-api-id API_ID --resource-id RESOURCE_id --http-method OPTIONS --status-code 200 --patch-operations op='replace',path='/contentHandling',value='CONVERT_TO_TEXT' --region AWS_REGION

Bereitstellen Ihrer API

1. Wählen Sie im Navigationsbereich auf Ihrer API-Seite Resources (Ressourcen) aus.

2. Wählen Sie im Bereich Resources (Ressourcen) die Option Actions (Aktionen) und dann Deploy API (API bereitstellen) aus.

3. Wählen Sie im Fenster Deploy API (API bereitstellen) für die Deployment stage (Bereitstellungsphase) die Option [New Stage].

4. Geben Sie als Stage name (Phasennamen) v1 ein.

5. Wählen Sie Deploy (Bereitstellen).

6. Wählen Sie im Navigationsbereich Stages (Phasen).

7. Wählen Sie die Phase v1. Die Aufruf-URL für Anfragen an den bereitgestellten API-Snapshot wird angezeigt.

8. Kopieren Sie die Aufruf-URL.

Hinweis: Weitere Informationen finden Sie unter Bereitstellen einer REST-API in Amazon API Gateway.

Rufen Sie Ihre API auf, um eine Bilddatei auf S3 hochzuladen

Hängen Sie den Bucket-Namen und den Dateinamen des Objekts an die Aufruf-URL Ihrer API an. Stellen Sie dann eine PUT-HTTP-Anfrage mit einem Client Ihrer Wahl. Wählen Sie beispielsweise mit der externen Postman-Anwendung die PUT-Methode aus der Dropdown-Liste aus. Wählen Sie Body und dann binary (binär). Wenn die Schaltfläche Select File (Datei auswählen) angezeigt wird, wählen Sie eine lokale Datei zum Hochladen aus.

Weitere Informationen finden Sie unter Aufrufen einer REST-API in Amazon API Gateway.

Beispiel für einen curl-Befehl zum Senden einer PUT-HTTP-Anfrage zum Hochladen eines Bildes oder einer PDF-Datei

Im folgenden Beispiel ist abc12345 Ihre API-ID, testfolder ist Ihr S3-Bucket und testimage.jpeg ist die lokale Datei, die Sie hochladen:

curl -i --location --request PUT 'https://abc12345.execute-api.us-west-2.amazonaws.com/v1/testfolder/testimage.jpeg' --header 'Content-Type: text/plain' --data-binary '@/Path/to/file/image.jpeg'

Wichtig: Wenn */* in der Liste der binären Medientypen enthalten ist, können Sie eine PUT-Anfrage stellen, um die Datei hochzuladen. Wenn ** image.jpeg** in der Liste der binären Medientypen enthalten ist, müssen Sie Ihrer PUT-Anfrage den Content-Type-Header hinzufügen. Sie müssen den Content-Type-Header auf 'image/jpeg' setzen.

Sie sehen jetzt das Bild oder PDF in einem Webbrowser mit derselben URL. Dies liegt daran, dass der Webbrowser eine GET-Anfrage stellt.