API ゲートウェイを使用して Amazon S3 に画像や PDF ファイルをアップロードするには、どうすればよいですか?

所要時間5分

Amazon API Gateway を使用して Amazon Simple Storage Service (Amazon S3) に画像や PDF ファイルをアップロードしたいと考えています。また、画像や PDF ファイルの取得も行いたいと考えています。

簡単な説明

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

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

解決方法

API ゲートウェイ用の IAM ロールを作成する

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

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

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

4. [信頼されたエンティティの種類を選択] セクションで、**[AWS サービス] **を選択します。

5. [ユースケースの選択] セクションで、[API Gateway] を選択します。

6. [ユースケースの選択] セクションで、[API Gateway] を選択します。

7. [次へ: アクセス許可] を選択します。
**注:**このセクションには、API Gateway によるユーザーのアカウントへのログのプッシュを許可する AWS マネージドサービスが表示されます。Amazon S3 のアクセス許可は後で追加します。

8. (オプション)[次へ: タグ] を選択してタグを追加します。

9. [次へ: レビュー] を選択します。

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

11. [ロールを作成する] を選択します。

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

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

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

3. 検索ボックスに、作成した新しい API Gateway ロールの名前を入力します。その後、[ロール名] 列からそのロールを選択します。

4. [ロールの詳細ページ] タブで、[許可を追加] を選択します。

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

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

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

8. [S3 で許可されているアクションを指定] ボックスに「PutObject」と入力し、[PutObject] を選択します。

9. 「GetObject」と入力し、[GetObject] を選択します。

10. [リソース] を展開し、[特定] を選択します。

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

12. [バケット名] に、バケットの名前を入力します。該当する場合は、プレフィックスを含めます。

13. [オブジェクト名] に、オブジェクトの名前を入力します。
注: バケット名では、アップロードするファイルの場所を指定します。オブジェクト名では、ポリシー調整のためにオブジェクトが従う必要があるパターンを指定します。詳細については、「Bucket naming rules」と「Amazon S3 objects overview」を参照してください。

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

15. (オプション)[次へ: タグ] を選択してタグを追加します。

16. [次へ: レビュー] を選択します。

17. [名前] に、ポリシーの名前を入力します。

18. [ポリシーを作成] を選択します。

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

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

21. 先ほど作成した API Gateway ロールを検索します。その後、そのロールを選択します。

22. [ポリシーをアタッチ] を選択します。

API Gateway REST API を作成する

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

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

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

3. [API を作成] を選択します。

4. [API タイプを選択] セクションの [REST API] で、**[ビルド] **を選択します。

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

6. [API を作成] を選択します。

API 用のリソースを作成する

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

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

3. [リソース名] に、「folder」と入力します。

4. [リソースパス] に、「** {folder}**」と入力します。

5. [リソースの作成] を選択します。

6. [リソース] パネルで、手順 5 で作成した [/{folder}] リソースを選択します。

7. [アクション] を選択し、[リソースの作成] を選択します。

8. [リソース名] に、「object」と入力します。

9. [リソースパス] に、「{object}」と入力します。

10. [リソースの作成] を選択します。

画像または PDF をアップロードするための API 用の 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 を入力します。ARN の作成は、「IAM ポリシーを作成して API Gateway ロールにアタッチする」セクションの一部です。

11. [コンテンツの処理] で、[パススルー] を選択します。

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

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

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

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

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

4. [パスの追加] を選択します。

5. [名前] に、「bucket」と入力します。

6. [マッピング元] に、「method.request.path.folder」と入力します。

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

8. 手順 4～7 を繰り返します。手順 5 では、[名前] を [キー] に設定します。手順 6 では、[マッピング元] を [method.request.path.object] に設定します。

画像を取得するための 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 を入力します。ARN の作成は、「IAM ポリシーを作成して API Gateway ロールにアタッチする」セクションの一部です。

12. [コンテンツの処理] で、[パススルー] を選択します。

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

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

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

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

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

4. [パスの追加] を選択します。

5. [名前] に、「bucket」と入力します。

6. [マッピング元] に、「method.request.path.folder」と入力します。

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

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

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

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

3. [200] を展開します。

4. [200 のレスポンス本文] で、[application/json] を削除します。

5. [200 のレスポンスヘッダー] で、[ヘッダーの追加] を選択します。

6. [名前] に、「content-type」と入力します。

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

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

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

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

11. [content-type] という名前の行の端にある鉛筆アイコンを選択します。

12. 画像ファイルを表示するには、「image/jpeg」と入力します。
または
PDF ファイルを表示するには、「'application/pdf'」と入力します。

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

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

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

3. テキストボックスに、文字列「**\ */\ *」を追加します。
注:文字列は引用符で囲まないでください。バイナリメディアタイプとして扱う特定の MIME (Multipurpose Internet Mail Extensions) タイプの代わりにワイルドカードを使用できます。例えば、API Gateway に JPEG 画像をバイナリメディアタイプとして処理させるには、[image/jpeg] を選択します。「\ */\ ***」を追加すると、API Gateway はすべてのメディアタイプをバイナリメディアタイプとして扱います。

4. [変更を保存] を選択します。

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

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

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

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

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

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

6. コンテンツ処理プロパティを更新するには、CLI の update-integration コマンドを実行します。この更新により、バイナリコンテンツがモック統合によるプリフライトオプションのリクエストを処理できるようになります。

7. API ID、リソース ID、AWS リージョンを更新して、次の 2 つの CLI コマンドを実行します。API ID とリソース ID を取得するには、Gateway API コンソールの上部で [{object}] リソースを選択します。

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 ページのナビゲーションペインで、[リソース] を選択します。

2. [リソース] ペインで [アクション] を選択し、[API のデプロイ] を選択します。

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

4. [ステージ名] には、「v1」と入力します。

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

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

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

8. 呼び出し URL をコピーします。

**注:**詳細については、「Deploying a REST API in Amazon API Gateway」を参照してください。

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

API の呼び出し URL に、オブジェクトのバケット名とファイル名を追加します。その後、任意のクライアントで PUT HTTP リクエストを行います。例えば、Postman 外部アプリケーションでは、ドロップダウンから [PUT method] を選択します。[Body] を選択し、次に [binary] を選択します。[Select File] ボタンが表示されたら、アップロードするローカルファイルを選択します。

詳細については、「](https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-call-api.html)Invoking a REST API in Amazon API Gateway[」を参照してください。

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

次の例では、abc12345 は API ID、testfolder は 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 リクエストに追加する必要があります。コンテンツタイプヘッダーを [image/jpeg] に設定する必要があります。

これで、同じ URL の画像または PDF がウェブブラウザに表示されます。これは、ウェブブラウザが GET リクエストを行うためです。