API ゲートウェイ経由で Amazon S3 に画像または PDF ファイルをアップロードするにはどうすればよいですか？

所要時間6分

Amazon API Gateway 経由で Amazon Simple Storage Service (Amazon S3) に画像または PDF ファイルをアップロードしたいと考えています。画像や PDF ファイルも取得したいです。これらのアクションを実行するにはどうすればよいですか?

簡単な説明

API ゲートウェイを使用して画像または PDF をバイナリファイルとして S3 バケットにアップロードするには、API ゲートウェイを使用してバイナリサポートを有効にします。

API が S3 バケットにアクセスできるようにするには、AWS Identity and Access Management（IAM）ロールを作成します。IAM ロールには、API ゲートウェイが S3 バケットで PutObject アクションと GetObject アクションを実行するためのアクセス許可が含まれている必要があります。

解決方法

API ゲートウェイの IAM ロールを作成します。

1. IAM コンソールを開きます。

2. ナビゲーションペインで [Roles] を選択します。

3. [ロールの作成] を選択します。

4. [Select type of trusted entity] セクションで、[AWS service] を選択します。

5. [Choose a use case] (ユースケースを選択する) セクションで、[API Gateway] (API ゲートウェイ) を選択します。

6. [Select your use case] (お客様のユースケースを選択する) セクションで、[API Gateway] (API ゲートウェイ) を選択します。

7. [次へ: アクセス許可] を選択します。

注: このセクションでは、API ゲートウェイがユーザーのアカウントにログをプッシュすることを許可する AWS managed service を表示します。Amazon S3 のアクセス権限は後で追加します。[Next: Tags] (次のステップ: タグ) を選択します。

8. (オプション) タグを追加し、続いて [Next: Review] (次のステップ: 確認) を選択します。

9. [Role name] (ロール名) に、ポリシーの名前を入力します。例: api-gateway-upload-to-s3

10. [ロールの作成] を選択します。

IAM ポリシーを作成して API ゲートウェイロールにアタッチします

1. IAM コンソールを開きます。

2. ナビゲーションペインで [Roles] を選択します。

3. 検索ボックスに、作成した新しい API ゲートウェイロールの名前を入力します。次に、[Role name] (ロール名) 列からそのロールを選択します。

4. 「ロール詳細ページ」タブで、「権限の追加」を選択します。

5. [インラインポリシーの作成] を選択します。

6. [Visual editor] (ビジュアルエディタ) タブの [Select a service] (サービスの選択) セクションで、[Choose a service] (サービスの選択) を選択します。

7. [S3] と入力し、[S3] を選択します。

8. [Specify the actions allowed in S3] (許可されるアクションを S3 で指定) ボックスに [PutObject] と入力し、[PutObject] を選択します。

9. GetObject から、[GetObject] を選択します。

10. [Resources] (リソース) を展開し、[Specific] (指定) を選択します。

11. [ARN の追加] を選択します。

12. [Bucket name] (バケット名) に、バケットの名前を入力します。該当する場合は、プレフィックスを含めてください。

13. [Object name] (オブジェクト名) に、オブジェクト名を入力します。

注: バケット名は、アップロードされたファイルの場所を指定します。オブジェクト名は、オブジェクトがポリシー調整のために遵守しなければならないパターンを指定します。詳細については、「バケット命名規則」と「Amazon S3 オブジェクトの概要」を参照してください。

14. [追加] を選択します。

15. [Next: Tags] (次のステップ: タグ) を選択し、オプションでタグを追加してから、[Next: Review] (次のステップ: 確認) を選択します。

16. [Name] (名前) に、ポリシーの名前を入力します。

17. [Create policy] を選択します。

18. ポリシー検索ボックスに、ステップ 17 で作成したポリシーの名前を入力し、そのポリシーを選択します。

19. [Policy Actions] (ポリシーアクション) を選択して、 [Attach] (アタッチ) を選択します。IAM ロールのリストが表示されます。

20. 前に作成した API ゲートウェイロールを検索し、そのロールを選択します。

21. [Attach policy] (ポリシーのアタッチ) を選択します。

API Gateway REST API を作成する

リクエストを処理する API を作成する

1. API Gateway Console にログインします。

2. ナビゲーションペインで、[APIs] (API) を選択します。

3. [Create API] (API の作成) を選択します。

4. [Choose an API type] (API タイプを選択) セクションにある [REST API] で [Build] (構築) を選択します。

5. [API Name] (API 名) に API の名前を入力し、[Next] (次へ) を選択します。

6. [Create API] (API の作成) を選択します。

API のリソースを作成する

1. API ページの [Resources] (リソース) パネルで、/ を選択します。

2. [Actions] (アクション) で、[Create Resource] (リソースの作成) を選択します。

3. [Resource Name] (リソース名) に、folder を入力します。

4. [Resource Path] (リソースパス) に、{folder} を入力します。

5. [Create Resource] (リソースを作成) を選択します。

6. [Resources] (リソース) パネルで、ステップ 5 作成した /{folder} リソースを選択します。

7. [Actions] (アクション) を選択してから、[Create Resource] (リソースの作成) を選択します。

8. [Resource Name] (リソース名) に、object を入力します。

9. [Resource Path] (リソースパス) に、{object} を入力します。

10. [Create Resource] (リソースを作成) を選択します。

画像または PDF をアップロードするための API 用の PUT メソッドを作成する

1. [Actions] (アクション) を選択してから、[Create Method] (メソッドの作成) を選択します。

2. ドロップダウンリストから [PUT] を選択し、チェックマークアイコンを選択します。

3. 「統合タイプ」カテゴリで、「AWS サービス」を選択します。

4. AWS リージョンの場合は、us-east-1 またはバケットプロパティページに表示されている AWS リージョンを選択します。

5. [AWS Service] (AWS のサービス) には、[Simple Storage Service (S3)] を選択します。

6. [AWS Subdomain] (AWS サブドメイン) は空欄のままにします。

7. [HTTP method] (HTTP メソッド) には、[PUT] を選択します。

8. [Action Type] (アクションの種類) で [Use path override] (パス上書きの使用) を選択します。

9. [Path override (optional)] (パスの上書き (省略可能)) には、{bucket}/{key} と入力します。

10. [Execution role] (実行ロール) には、前に作成した IAM ロールの Amazon リソースネーム (ARN) を入力します。ARN の作成は、「IAM ポリシーを作成して API ゲートウェイロールにアタッチする」セクションの一部です。

11. [Handling] (コンテンツの処理) は、[Passthrough] (パススルー) を選択します。

12. [Save] (保存) を選択します。

PUT メソッドのパラメータマッピングを設定する

1. API ページの「リソース」パネルで、「PUT」を選択します。

2. [Integration Request] (統合リクエスト) を選択します。

3. [URL Path Parameters] (URL パスパラメータ) を展開します。

4. [Add path] (パスを追加) を選択します。

5. [Name] (名前) に bucket を入力します。

6. [Mapped from] (マップ元) に method.request.path.folder を入力します。

7. 行の最後にあるチェックマークアイコンを選択します。

8. 手順 4～7 を繰り返します。手順 5 では、[Name] (名前) を key に設定します。手順 6 では、[Mapped from] (マップ元) を method.request.path.object に設定します。

画像を取得するための API の GET メソッドを作成する

1. API ページの [Resources] (リソース) パネルで、**/{object}**を選択します。

2. [Actions] (アクション) を選択してから、[Create Method] (メソッドの作成) を選択します。

3. ドロップダウンリストから [GET] を選択し、チェックマークアイコンを選択します。

4. 「統合タイプ」カテゴリで、「AWS サービス」を選択します。

5. AWS リージョンの場合は、us-east-1、またはバケットプロパティページに表示されているリージョンを選択します。

6. [AWS Service] (AWS のサービス) には、[Simple Storage Service (S3)] を選択します。

7. [AWS Subdomain] (AWS サブドメイン) は空欄のままにします。

8. [HTTP method] (HTTP メソッド) で [GET] を選択します。

9. [Action Type] (アクションの種類) で [Use path override] (パス上書きの使用) を選択します。

10. [Path override (optional)] (パスの上書き (省略可能)) には、{bucket}/{key} と入力します。

11. [Execution role] (実行ロール) には、前に作成した IAM ロールの Amazon リソースネーム (ARN) を入力します。 ARN の作成は、「IAM ポリシーを作成して API ゲートウェイロールにアタッチする」セクションの一部です。

12. [Handling] (コンテンツの処理) は、[Passthrough] (パススルー) を選択します。

13. [Save] (保存) を選択します。

GET メソッドのパラメータマッピングを設定する

1. API ページの [Resources] (リソース) パネルで、[GET] を選択します。

2. [Integration Request] (統合リクエスト) を選択します。

3. [URL Path Parameters] (URL パスパラメータ) を展開します。

4. [Add path] (パスを追加) を選択します。

5. [Name] (名前) に bucket を入力します。

6. [Mapped from] (マップ元) に method.request.path.folder を入力します。

7. 行の最後にあるチェックマークアイコンを選択します。

レスポンスマッピングを設定して画像または PDF をブラウザに表示する

1. API ページの [Resources] (リソース) パネルで、[GET] を選択します。

2. [Method Response] (メソッドレスポンス) を選択します。

3. 200 を拡張します。

4. 200 のレスポンスボディで、application/json を削除します。

5. 200 の応答ヘッダーで、[ヘッダーを追加] を選択します。

6. [Name] (名前) に Content-Type と入力します。

7. チェックマークアイコンを選択して保存します。

8. [メソッド実行] を選択して [メソッド実行] ペインに戻ります。

9. [Integration Response] (統合レスポンス) を選択します。

10. 200 を展開し、次に [ヘッダーマッピング] を展開します。

11. content-type という名前の行の最後にあるペンシルアイコンを選択します。

12. 画像ファイルを表示するには、image/jpeg と入力します。

または -
アプリケーション/pdf と入力して PDF ファイルを見ます。

API のバイナリメディアタイプを設定する

1. API ページのナビゲーションペインで、[Settings] (設定) を選択します。

2. [Binary Media Types] (バイナリメディアタイプ) セクションで、[Add Binary Media Type] (バイナリメディアタイプの追加) を選択します。

3. テキストボックスに、次の文字列を追加します: */*

注: 文字列を引用符で囲まないようにします。バイナリメディアタイプとして扱いたい特定の多目的インターネットメール拡張 (MIME) タイプの代わりにワイルドカードを使用できます。例えば、「image/jpeg」を選択すると、API ゲートウェイで JPEG 画像がバイナリメディアタイプとして扱われます。*/* を追加すると、API ゲートウェイはすべてのメディアタイプをバイナリメディアタイプとして扱います。

4. [Save changes] (変更を保存) を選択します。

API のバイナリ設定による CORS エラーの解決

1. 前述の API (PUT と GET) をウェブアプリケーションで使用する場合、CORS エラーが発生する可能性があります。

2. バイナリ設定を有効にして CORS エラーを解決するには、API Gateway コンソールから CORS を起動します。

3. API ページのリソースパネルで、/{object} を選択します。

4. [アクション] で [CORS を有効にする] を選択します。

5. [CORS を有効にする] を選択し、既存の CORS ヘッダーを置き換えます。

6. 統合の更新 CLI コマンドを使用して、コンテンツ処理プロパティを更新します。今回の更新により、モックインテグレーションによるプリフライトオプションリクエストのバイナリコンテンツを処理できるようになりました。

7. 続く 2 つの CLI コマンドを実行して、API ID、リソース ID、および AWS リージョンを更新します。{object} リソースを選択すると、ゲートウェイ API コンソールの上部から API ID とリソース ID を取得できます。

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>

API をデプロイする

1. API ページのナビゲーションペインで、[Resources] (リソース) を選択します。

2. [Resources] (リソース) ペインで、[Actions] (アクション) 、[Deploy API] (API のデプロイ) の順に選択します。

3. [Deploy API] (API のデプロイ) ウィンドウの [Deployment stage] (デプロイステージ) で、[New Stage] (新しいステージ) を選択します。

4. [Stage name] (ステージ名) に、v1 と入力します。

5. [デプロイ] を選択します。

6. ナビゲーションペインで、[Stages] (ステージ) を選択します。

7. v1 ステージを選択します。これで、デプロイされた API スナップショットへのリクエストを実行するための呼び出し URL が表示されます。

8. Invoke URL をコピーしておきます。

注: 詳細については、「Amazon API Gateway での REST API のデプロイ」を参照してください。

API を呼び出してイメージファイルを S3 にアップロードする

API の呼び出し URL に、オブジェクトのバケット名とファイル名を追加します。次に、任意のクライアントを使用して PUT HTTP リクエストを作成します。例えば、Postman アプリケーションでは、ドロップダウンから PUT メソッドを選択します。「Body」を選択し、次に「バイナリ」を選択します。[ファイルを選択] ボタンが表示されたら、アップロードするローカルファイルを選択します。

詳細については、「Amazon API Gateway での REST API の呼び出し」を参照してください。

画像または PDF をアップロードするための PUT HTTP リクエストを行う curl コマンドの例

注: この例では、abc12345 は API ID、テストフォルダーは S3 バケット、testimage.jpeg はアップロードするローカルファイルです。

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'

重要: */* がバイナリメディアタイプリストに含まれている場合は、PUT リクエストを行ってファイルをアップロードできます。image.jpeg がバイナリメディアタイプリストに含まれている場合は、Content-Type ヘッダーを PUT リクエストに追加する必要があります。[Content-Type header] (Content-Type ヘッダー) を image/jpeg に設定する必要があります。

これで、Web ブラウザーが GET リクエストを行うため、同じ URL を使用して Web ブラウザーで画像または PDF を表示できます。