API Gateway を使用して Amazon S3 に画像や PDF ファイルをアップロードする方法を教えてください。

簡単な説明

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

API Gateway に S3 バケットへのアクセスを許可するには、AWS Identity and Access Management (IAM) ロールを作成します。この IAM ロールには、API Gateway が S3 バケットで PutObject アクションと GetObject アクションを実行するためのアクセス許可が含まれている必要があります。

解決策

注: AWS コマンドラインインターフェイス (AWS CLI) コマンドの実行中にエラーが発生した場合は、「AWS CLI で発生したエラーのトラブルシューティング」を参照してください。また、AWS CLI の最新バージョンを使用していることを確認してください。

API Gateway 用の IAM ロールを作成する

次の手順を実行します。

1. IAM コンソールを開きます。
2. ナビゲーションペインで、[ロール] を選択します。
3. [ロールの作成] を選択します。
4. [信頼されたエンティティの種類を選択] セクションで **[AWS サービス] **を選択します。
5. [サービスまたはユースケース] セクションで [API Gateway] を選択します。
6. [ユースケース] セクションで [API Gateway] を選択します。
7. [次へ] を選択します。
8. [ロール名] にポリシーの名前を入力します。例: api-gateway-upload-to-s3
9. (オプション) IAM ロールにタグを追加します。
10. [ロールの作成] を選択します。

IAM ポリシーを作成して API Gateway ロールにアタッチする

次の手順を実行します。

1. IAM コンソールを開きます。
2. ナビゲーションペインで [ロール] を選択します。
3. 検索ボックスに API Gateway 用の IAM ロール名を入力し、[ロール名] 列からそのロールを選択します。
4. [ロールの詳細ページ] タブで [アクセス許可を追加] を選択します。
5. [インラインポリシーを作成] を選択します。
6. [ビジュアルエディタ] タブの [サービスの選択] セクションで、[サービスを選択] を選択します。
7. S3 と入力し、[S3] を選択します。
8. [許可するサービスからのアクションを指定] ボックスに PutObject と入力し、[PutObject] を選択します。
9. GetObject と入力し、[GetObject] を選択します。
10. [リソース] を展開し、[固有] を選択します。
11. [ARN の追加] を選択します。
12. [リソースバケット名] にバケットの名前を入力します。該当する場合は、プレフィックスを含めます。
13. [リソースオブジェクト名] にオブジェクト名を入力します。
    注: バケット名では、アップロードするファイルの場所を指定します。オブジェクト名では、ポリシー調整のためにオブジェクトが従う必要があるパターンを指定します。詳細については、「汎用バケットの命名規則」および「Amazon S3 オブジェクトの概要」を参照してください。
14. [ARN の追加] を選択します。
15. [次へ] を選択します。
16. [名前] にポリシーの名前を入力します。
17. [ポリシーを作成] を選択します。

API Gateway REST API を作成する

リクエストを配信する API を作成するには、次の手順を実行します。

1. API Gateway コンソールを開きます。
2. ナビゲーションペインで [API] を選択します。
3. [API の作成] を選択します。
4. [API タイプを選択] セクションの [REST API] で、**[ビルド] **を選択します。
5. [API 名] に API の名前を入力し、[API を作成] を選択します。

API のリソースを作成するには、次の手順を実行します。

1. API ページの [リソース] パネルで / を選択します。
2. [リソースの作成] を選択します。
3. [リソースパス] で / を選択します。
4. [リソースパス] に {folder} と入力します。
5. [リソースを作成] を選択します。
6. [リソース] パネルで /{folder} リソースを選択します。
7. [リソースを作成] を選択します。
8. [リソースパス] で /{folder}/ を選択します。
9. [リソース名] に {object} と入力します。
10. [リソースを作成] を選択します。

API で画像や PDF ファイルをアップロードするための PUT メソッドを作成するには、次の手順を実行します。

1. [メソッド] セクションで [メソッドを作成] を選択します。
2. [メソッドタイプ] で [PUT] を選択します。
3. [統合タイプ] カテゴリで [AWS サービス] を選択します。
4. [AWS リージョン] で、[us-east-1] または [バケットのプロパティ] ページに表示されている AWS リージョンを選択します。
5. [AWS サービス] で [Simple Storage Service (S3)] を選択します。
6. [AWS サブドメイン] は空のままにします。
7. [HTTP メソッド] で [PUT] を選択します。
8. **[アクションの種類]**で [パスオーバーライドを使用] を選択します。
9. [パス上書き (省略可能)] に {bucket}/{key} と入力します。
10. **[実行ロール]**に IAM ロールの ARN を入力します。
11. [コンテンツの処理] で [パススルー] を選択します。
12. [メソッドを作成] を選択します。

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

次の手順を実行します。

1. API ページの [リソース] パネルで、[PUT] を選択します。
2. [統合リクエスト] を選択し、[編集] を選択します。
3. [URL パスパラメータ] を展開します。
4. [パスパラメータの追加] を選択します。
5. [名前] に bucket と入力します。
6. [マッピング元] に method.request.path.folder と入力します。
7. 手順 4～6 を繰り返します。
   手順 5 で [名前] を [キー] に設定します。
   手順 6 で [マッピング元] を method.request.path.object に設定します。
8. [保存] を選択します。

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

次の手順を実行します。

1. API ページの [リソース] パネルで、/{object} を選択します。
2. [メソッド] セクションで [メソッドを作成] を選択します。
3. [メソッドタイプ] で [GET] を選択します。
4. [統合タイプ] カテゴリで [AWS サービス] を選択します。
5. [AWS リージョン] で [us-east-1] または [バケットのプロパティ] ページに表示されているリージョンを選択します。
6. [AWS サービス] で [Simple Storage Service (S3)] を選択します。
7. [AWS サブドメイン] は空のままにします。
8. [HTTP メソッド] で [GET] を選択します。
9. **[アクションの種類]**で [パスオーバーライドを使用] を選択します。
10. [パス上書き (省略可能)] に {bucket}/{key} と入力します。
11. **[実行ロール]**に IAM ロールの ARN を入力します。
12. [コンテンツの処理] で [パススルー] を選択します。
13. [メソッドを作成] を選択します。

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

次の手順を実行します。

1. API ページの [リソース] パネルで [GET] を選択します。
2. [統合リクエスト] を選択し、[編集] を選択します。
3. [URL パスパラメータ] を展開します。
4. [パスパラメータの追加] を選択します。
5. [名前] に bucket と入力します。
6. [マッピング元] に method.request.path.folder と入力します。
7. 手順 4～6 を繰り返します。
   手順 5 で [名前] を key に設定します。
   手順 6 で [マッピング元] を method.request.path.object に設定します。
8. [保存] を選択します。

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

次の手順を実行します。

1. API ページの [リソース] パネルで [GET] を選択します。
2. [メソッドレスポンス] を選択します。
3. [200 の応答] で [編集] を選択します。
4. [応答本文] から application/json を削除します。
5. [ヘッダー名] で [ヘッダーを追加] を選択します。
6. [名前] に content-type と入力します。
7. [保存] を選択します。
8. [統合レスポンス] を選択し、[編集] を選択します。
9. [メソッドレスポンスのステータスコード] の 200 で、画像ファイルに image/jpeg、PDF ファイルに application/pdf を入力します。
10. [保存] を選択します。

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

次の手順を実行します。

1. API ページのナビゲーションペインで [API 設定] を選択します。
2. [バイナリのメディアタイプ] セクションで [バイナリメディアタイプの管理] を選択します。
3. [バイナリのメディアタイプを追加] を選択し、テキストボックスに文字列 / を追加します。
   注: 文字列は引用符で囲まないでください。特定の Multipurpose Internet Mail Extensions (MIME) タイプをワイルドカードに置き換えると、バイナリメディアタイプとして管理できます。例えば、API Gateway で JPEG 画像をバイナリメディアタイプとして管理する場合は、image/jpeg を選択します。*/* を追加した場合は、API Gateway はすべてのメディアタイプをバイナリメディアタイプとして扱います。
4. [変更を保存] を選択します。

API のバイナリ設定での CORS エラーを解決する

注: ウェブアプリケーションで PUT および GET API を使用する場合、CORS エラーが発生することがあります。詳細については、Mozilla のウェブサイトで「CORS エラー」を参照してください。

バイナリ設定が有効時に発生する CORS エラーを解決するには、次の手順を実行します。

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

2. API を選択します。

3. CORS を有効にする

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

5. [CORS の有効化] を選択します。

6. ゲートウェイ応答の [デフォルトの 4xx] および [デフォルトの 5xx] を選択し、Access-Control-Allow-Methods で [GET] と [PUT] を選択します。

7. [保存] を選択します。

8. 次の update-integration コマンドを実行します。

   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

   注: 実際のものでそれぞれ、rest-api-id を REST API ID に、RESOURCE_id をリソース ID に、AWS_REGION をリージョンに置き換えます。API Gateway でオプションリクエストを実行するには、update-integration コマンドと update-integration-response コマンドを順番に実行する必要があります。

9. 次の update-integration-response コマンドを実行します。

   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

   注: 実際のものでそれぞれ、rest-api-id を REST API ID に、RESOURCE_id をリソース ID に、AWS_REGION をリージョンに置き換えます。

API をデプロイする

次の手順を実行します。

1. API ページのナビゲーションペインで [リソース] を選択します。
2. [API のデプロイ] を選択します。
3. [API のデプロイ] ウィンドウの [ステージ] で [新しいステージ] を選択します。
4. [ステージ名] に v1 と入力します。
5. [デプロイ] を選択します。
6. ナビゲーションペインで **[ステージ]**を選択します。
7. v1 ステージを選択します。
8. 表示される [呼び出し URL] を書き留めておきます。

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

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

次の手順を実行します。

1. バケット名とオブジェクトのファイル名を API の呼び出し URL に追加します。
2. 任意のクライアントを使用して PUT HTTP リクエストを行います。たとえば、Postman を Postman のウェブサイトからダウンロードして使用します。
3. [本文] を選択し、binary を選択します。[ファイルの選択] ボタンが表示されたら、アップロードするローカルファイルを選択します。

PUT HTTP リクエストを行い、画像または PDF をアップロードするための curl コマンド例を次に示します。

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'

注: 実際のものでそれぞれ、abc12345 を API ID に、testfolder を S3 バケットに、testimage.jpeg をアップロードするローカルファイルに置き換えます。

*/* がバイナリメディアタイプのリストに含まれている場合は、PUT リクエストを行うとファイルをアップロードできます。image.jpeg がバイナリメディアタイプのリストに含まれている場合は、Content-Type ヘッダーを PUT リクエストに追加し、image/jpeg に設定します。ウェブブラウザは GET リクエストを行うため、同じ URL を使用すると、ウェブブラウザで画像または PDF を表示できます。

関連情報

API Gateway REST API を使用してバイナリサポートを有効化する