スキップしてコンテンツを表示
AWS re:Postを使用することにより、以下に同意したことになります AWS re:Post 利用規約
AWS re:Postre:Post
re:Postに関して

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

所要時間5分
0

Amazon API Gateway を使用して Amazon Simple Storage Service (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. S3 と入力し、[S3] を選択します。
  7. [許可するアクション] に PutObject と入力し、[PutObject] を選択します。GetObject と入力し、[GetObject] を選択します。
  8. [リソース] を展開し、[固有] を選択します。
  9. [ARN の追加] を選択します。
  10. [リソースバケット名] にバケットの名前を入力します。必要な場合は、プレフィックスを含めます。
  11. [リソースオブジェクト名] にオブジェクト名を入力します。
    注: バケット名により、ファイルのアップロード先が指定されます。オブジェクト名では、ポリシー調整のためにオブジェクトが従う必要があるパターンを指定します。詳細については、「汎用バケットの命名規則」および「Amazon S3 オブジェクトの概要」を参照してください。
  12. [ARN の追加] を選択します。
  13. [次へ] を選択します。
  14. [名前] にポリシーの名前を入力します。
  15. [ポリシーを作成] を選択します。

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. [リソース名] に {bucket} と入力します。
    注: Bucket は、ユーザーが変更できる変数名です。
  5. [リソースを作成] を選択します。
  6. [リソース] パネルで /{bucket} リソースを選択します。
  7. [リソースを作成] を選択します。
  8. [リソースパス] で /{bucket}/ を選択します。
  9. [リソース名] に {proxy+} と入力します。
  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}/{proxy} と入力します。
  10. [実行ロール] に IAM ロールの Amazon リソースネーム (ARN) を入力します。
  11. [コンテンツの処理] で [パススルー] を選択します。
  12. [メソッドを作成] を選択します。

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

次の手順を実行します。

  1. API ページの [リソース] パネルで [PUT] を選択します。
  2. [統合リクエスト] を選択し、[編集] を選択します。
  3. [URL パスパラメータ] を展開します。
  4. [パスパラメータの追加] を選択します。
  5. [名前] に bucket と入力します。
  6. [マッピング元] に method.request.path.bucket と入力します。
  7. 手順 4 ～ 6 を繰り返します。ただし、[名前] を key に設定し、手順 6 では [マッピング元] を method.request.path.proxy に設定します。
  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 を繰り返します。ただし、[名前] を 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 API と GET API を使用する場合、クロスオリジンリソース共有 (CORS) エラーが発生する可能性があります。詳細については、Mozilla のウェブサイトで「CORS エラー」を参照してください。

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

  1. API Gateway コンソールを開きます。
  2. API を選択します。
  3. API ページの [リソース] パネルで /{object} を選択します。
  4. [CORS の有効化] を選択します。
  5. [ゲートウェイレスポンス] で [デフォルトの 4xx] および [デフォルト の5xx] を選択します。
  6. [Access-Control-Allow-Methods] で [GET] および [PUT] を選択します。
  7. [保存] を選択します。
  8. AWS CLI コマンド 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 をリージョンに置き換えてください。
  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 Gateway でオプションリクエストを実行するには、update-integration コマンドと update-integration-response コマンドを順番に実行する必要があります。

API をデプロイする

次の手順を実行します。

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

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

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

次の手順を実行します。

  1. バケット名とオブジェクトのファイル名を API の呼び出し URL に追加します。
  2. 任意のクライアントを使用して PUT HTTP リクエストを行います (たとえば、Postman をダウンロードして使用します)。詳細については、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 を使用してバイナリサポートを有効化する

API Gateway コンソールを使用してリソースで CORS を有効化する

トピック
ServerlessFront-End Web & MobileNetworking & Content Delivery
タグ
Amazon API Gateway
言語
日本語

関連ビデオ

詳細については、Sumit のビデオをご覧ください (8:55)
詳細については、Sumit のビデオをご覧ください (8:55)
AWS公式更新しました 3ヶ月前
コメントはありません

関連するコンテンツ