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

Lesedauer: 9 Minute

Ich möchte Amazon API Gateway verwenden, um ein Bild oder eine PDF-Datei auf Amazon Simple Storage Service (Amazon S3) hochzuladen und dann abzurufen.

Kurzbeschreibung

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

Um API Gateway Zugriff auf deinen S3-Bucket zu gewähren, erstelle 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 deinem S3-Bucket auszuführen.

Lösung

Hinweis: Wenn du beim Ausführen von AWS Command Line Interface (AWS CLI)-Befehlen Fehlermeldungen erhältst, findest du weitere Informationen dazu unter Problembehandlung bei der AWS CLI. Stelle außerdem sicher, dass du die neueste Version von AWS CLI verwendest.

Erstellen einer IAM-Rolle für API Gateway

Führe die folgenden Schritte aus:

Öffne die IAM-Konsole.
Wählen Sie im Navigationsbereich Rollen aus.
Wähle Rolle erstellen aus.
Wähle für Typ vertrauenswürdiger Entitäten die Option AWS-Service aus.
Wähle für Service oder Anwendungsfall die Option API Gateway aus.
Wähle als Anwendungsfall die Option API Gateway aus.
Wähle Weiter aus. Wähle dann erneut Nächstes aus.
Gib unter Rollenname einen Namen für deine Richtlinie ein. Zum Beispiel, api-gateway-upload-to-s3 eingeben.
(Optional) Um der IAM-Rolle Tags hinzuzufügen, wähle Neues Tag hinzufügen aus.
Wähle Rolle erstellen aus.

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

Führe die folgenden Schritte aus:

Öffne die IAM-Konsole.
Wähle im Navigationsbereich Rollen aus.
Gib in das Suchfeld den Namen der IAM-Rolle für das API Gateway ein, und wähle dann die Rolle aus der Spalte Rollenname aus.
Wähle im Abschnitt Berechtigungsrichtlinien die Option Berechtigungen hinzufügen aus und wähle dann Inline-Richtlinie erstellen aus.
Wähle auf der Registerkarte Visueller Editor im Abschnitt Dienst auswählen die Option Dienst wählen.
Gib S3 ein und wähle dann S3.
Gib unter Zulässige Aktionen PutObject ein und wähle dann PutObject aus. Gib GetObject ein und wähle dann GetObject aus.
Erweitere Ressourcen und wähle dann Spezifisch.
Wähle ARN hinzufügen aus.
Gib unter Bucket-Name der Ressource den Namen deines Buckets ein. Gib gegebenenfalls das Präfix an.
Gib als Objektname der Ressource 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 findest du unter Allgemeiner Zweck der Benennungsregeln für Buckets und Übersicht über Amazon S3-Objekte.
Wähle ARNs hinzufügen aus.
Wähle Nächster Schritt aus.
Gib unter Name den Namen deiner Richtlinie ein.
Wähle Richtlinie erstellen.

Erstellen einer API Gateway REST-API

Gehe wie folgt vor, um eine API für die Übermittlung deiner Anfragen zu erstellen:

Öffne die API-Gateway-Konsole.
Wähle im Navigationsbereich APIs.
Wähle API erstellen aus.
Wähle auf der Seite API-Typ auswählen für REST-API die Option Build aus.
Gib unter API Name einen Namen für deine API ein und wähle dann API erstellen.

Gehe wie folgt vor, um Ressourcen für deine API zu erstellen:

Wähle auf deiner API-Seite im Bereich Resources die Option / aus.
Wähle Ressource erstellen aus.
Wähle als Ressourcenpfad die Option**/** aus.
Gib als Ressourcenname {bucket} ein.
Hinweis: Bucket ist ein Variablenname, den der Benutzer ändern kann.
Wähle Ressource erstellen aus.
Wähle im Bereich Ressourcen die Ressource /{bucket} aus.
Wähle Ressource erstellen aus.
Wähle für den Ressourcenpfad /{bucket}/ aus.
Gib als Ressourcenname {proxy+} ein.
Wähle Ressource erstellen aus.

Gehe wie folgt vor, um eine PUT-Methode für deine API zum Hochladen von Bildern oder PDF-Dateien zu erstellen:

Wähle im Abschnitt Methoden die Option Methode erstellen.
Wähle als Methodentyp PUT aus.
Wähle unter Integrationstyp die Option AWS-Service aus.
Wähle für die AWSRegion us-east-1 oder die AWS-Region aus, die du auf der Seite Bucket-Eigenschaften siehst.
Wähle für AWS Service die Option Simple Storage Service (S3) aus.
Lass die AWS-Subdomain leer.
Wähle als HTTP-Methode PUT.
Wähle als Aktionstyp die Option Pfadüberschreibung verwenden aus.
Gib für Pfadüberschreibung {bucket}/{proxy} ein.
Gib für die Ausführungsrolle den Amazon-Ressourcennamen (ARN) für die IAM-Rolle ein.
Wähle für Inhaltsverarbeitung die Option Durchleiten.
Wähle Methode erstellen.

Konfigurieren der Parameterzuordnungen für die PUT-Methode

Führe die folgenden Schritte aus:

Wähle auf deiner API-Seite im Bereich Ressourcen die Option PUT.
WähleIntegrationsanforderung und dann Bearbeiten.
Erweitere URL-Pfadparameter.
Wähle Pfadparameter hinzufügen.
Gib als Name Bucket ein.
Gib für Zugeordnet von method.request.path.bucket ein.
Wiederhole die Schritte 4–6, setze jedoch für Schritt 5 den Namen auf key. Als Schritt 6, stelle Zugeordnet von auf method.request.path.proxy ein.
Wähle Speichern aus.

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

Führe die folgenden Schritte aus:

Wähle auf deiner API-Seite im Bereich Ressourcen /{object}.
Wähle im Abschnitt Methoden die Option Methode erstellen.
Wähle als Methodentyp GET aus.
Wähle unter Integrationstyp die Option AWS-Service aus.
Wähle für die AWSRegion us-east-1 oder die Region aus, die du auf der Seite Bucket-Eigenschaften siehst.
Wähle für AWS Service die Option Simple Storage Service (S3) aus.
Lass die AWS-Subdomain leer.
Wähle GET als HTTP-Methode aus.
Wähle als Aktionstyp die Option Pfadüberschreibung verwenden aus.
Gib für Pfadüberschreibung {bucket}/{key} ein.
Gib für die Ausführungsrolle den ARN der IAM-Rolle ein.
Wähle für Inhaltsverarbeitung die Option Durchleiten.
Wähle Methode erstellen.

Konfigurieren der Parameterzuordnungen für die GET-Methode

Führe die folgenden Schritte aus:

Wähle auf deiner API-Seite im Bereich Ressourcen die Option GET.
WähleIntegrationsanforderung und dann Bearbeiten.
Erweitere URL-Pfadparameter.
Wähle Pfadparameter hinzufügen aus.
Gib als Name Bucket ein.
Gib für Zugeordnet von method.request.path.folder ein.
Wiederhole die Schritte 4–6, setze jedoch für Schritt 5 den Namen auf key. Als Schritt 6, stelle Zugeordnet von auf method.request.path.object ein.
Wähle Speichern aus.

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

Führe die folgenden Schritte aus:

Wähle auf deiner API-Seite im Bereich Ressourcen die Option GET.
Wähle Methodenantwort.
Wähle für Response 200 die Option Bearbeiten.
Entferne unter Response Body die Option application/json.
Wähle unter Header-Name die Option Header hinzufügen.
Gib als Name Content-Type ein.
Wähle Speichern aus.
Wähle Integrationsantwort und dann Bearbeiten.
Gib für den Code für Methodenantwortstatus 200 image/jpeg für eine Bilddatei oder Anwendung/PDF für eine PDF-Datei ein.
Wähle Speichern aus.

Einrichten von binäre Medientypen für die API

Führe die folgenden Schritte aus:

Wähle im Navigationsbereich deiner API-Seite API-Einstellungen.
Wähle im Abschnitt Binäre Medientypen die Option Medientypen verwalten.
Wähle Binären Medientyp hinzufügen, und füge dann die Zeichenfolge**/** in das Textfeld ein.
Hinweis: Setze die Zeichenfolge nicht in Anführungszeichen. Du kannst einen bestimmten MIME-Typ (Multipurpose Internet Mail Extensions) durch einen Platzhalter ersetzen, um ihn als binären Medientyp zu verwalten. Damit API Gateway beispielsweise JPEG-Bilder als binäre Medientypen verwaltet, wähle image/jpeg. Wenn du***/*** hinzufügst, verwaltet API Gateway alle Medientypen als binäre Medientypen.
Wähle Änderungen speichern aus.

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

Hinweis: Wenn du die PUT- und GET-APIs in einer Webanwendung verwendest, wird möglicherweise ein CORS-Fehler (Cross-Origin Resource Sharing) angezeigt. Weitere Informationen findest du unter CORS-Fehler auf der Mozilla-Website.

Gehe wie folgt vor, um den CORS-Fehler bei aktivierten binären Einstellungen zu beheben:

Öffne die API-Gateway-Konsole.
Wähle deine API aus.
Wähle auf deiner API-Seite im Bereich Ressourcen /{object} aus.
Wähle CORS aktivieren.
Wähle für Gateway-Antworten Default 4xx, Default 5xx aus.
Wähle für Access-Control-Allow-Methods GET und PUT aus.
Wähle Speichern aus.

Führe den AWS-CLI-Befehl update-integration 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

Hinweis: Ersetze rest-api-id durch deine REST-API-ID, RESOURCE_id durch deine Ressourcen-ID und AWS_REGION durch deine Region.

Führe den Befehl update-integration-response aus:

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

Hinweis: Ersetze rest-api-id durch deine REST-API-ID, RESOURCE_id durch deine Ressourcen-ID und AWS_REGION durch deine Region. Damit API Gateway Optionsanfragen ausführen kann, musst du die Befehle update-integration und update-integration-response nacheinander ausführen.

Deine API bereitstellen

Führe die folgenden Schritte aus:

Wähle im Navigationsbereich auf deiner API-Seite Ressourcen aus.
Wähle API bereitstellen aus.
Wähle im Fenster API bereitstellen für die Bereitstellungsphase die Option [New Stage] aus.
Gib als Phasennamen v1 ein.
Wähle Bereitstellen aus.
Wähle im Navigationsbereich Phasen aus.
Wähle die Phase v1.
Notiere dir die angezeigte Aufruf-URL.

Weitere Informationen findest du unter Bereitstellen von REST-APIs in API Gateway.

REST-API aufrufen, um eine Bilddatei auf Amazon S3 hochzuladen

Führe die folgenden Schritte aus:

Füge den Bucket-Namen und den Dateinamen des Objekts zur Aufruf-URL deiner API hinzu.
Verwende deinen bevorzugten Client, um eine PUT-HTTP-Anfrage zu stellen. Du kannst beispielsweise Postman herunterladen und verwenden. Weitere Informationen findest du auf der Postman-Website unter Postman herunterladen.
Wähle Body und dann binär. Wenn die Schaltfläche Datei auswählen angezeigt wird, wähle eine lokale Datei zum Hochladen aus.

Im Folgenden findest du ein Beispiel für einen curl-Befehl, den du ausführen kannst, um eine PUT-HTTP-Anfrage zum Hochladen eines Bilds oder einer PDF-Datei zu stellen:

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'

Hinweis: Ersetze abc12345 durch deine API-ID, testfolder durch deinen S3-Bucket und testimage.jpeg durch die lokale Datei, die du hochlädst.

Wenn du */* in die Liste der binären Medientypen aufgenommen hast, kannst du eine PUT-Anfrage stellen, um die Datei hochzuladen. Wenn du image.jpeg in die Liste der binären Medientypen aufgenommen hast, füge deiner PUT-Anfrage den Content-Type-Header hinzu und setze ihn auf image/jpeg. Da der Webbrowser eine GET-Anfrage stellt, kannst du das Bild oder die PDF-Datei in einem Webbrowser mit derselben URL anzeigen lassen.