はじめに

フロントエンドから API 経由で Amazon S3 へアップロードを行う機能を実装するための行った内容をまとめておこうと思います。

IAM ロール

まずは API Gateway で利用する IAM ロールの作成を行います。

IAM ロールの作成

「IAM > ロール」 から [ロールを作成] をクリック。

信頼されたエンティティを選択

「信頼されたエンティティタイプ」 で AWS のサービス を選択し、ユースケース では API Gateway を選び [次へ] をクリックします。

許可を追加

そのままの内容で [次へ] をクリック。

名前、確認、および作成

「ロール名」を入力 (ここでは api-gateway-upload-to-s3)し [ロールを作成] をクリック。

IAM ポリシーの設定

「IAM > ロール」 から先ほど作成したロールを選択(ここでは api-gateway-upload-to-s3)

「許可 > 許可を追加」 から [インラインポリシーを作成] をクリック

アクセス許可を設定

S3 の PutObject と GetObject (Get 操作は行わないためなくてもOK)にチェックを入れ、「Effect」 は許可にチェックを入れる。

リソースは [特定] を選択し object の ARN を追加 をクリック。

ARN を指定

Resource bucket name の YOUR_BUCKET_NAME の部分に今回アクセスさせたい S3 バケット名を入力し [ARN を追加] をクリック。

[次へ] をクリック。

確認して作成

「ポリシー名」 を入力 (ここでは api-gateway-upload-to-s3) し [ポリシーの作成] をクリック。

許可ポリシーに api-gateway-upload-to-s3 が付与されていることを確認。

API Gateway リソースの作成

「API Gateway > API」 から [API を作成] をクリック。

API タイプを選択

「REST API」 の [構築] をクリック。

REST API を作成

API の詳細 で 新しい API を選択し、 API 名 を入力 (ここでは api-gateway-upload-to-s3) し [次へ] をクリック。

リソースが作成されていることを確認。

アップロード先パスを受け取るリソースの作成

これから、API の URL で指定したファイル名をそのままアップロード先として扱えるようにする設定を行います。

作成したリソースより [リソースを作成] をクリック。

「リソースの詳細」のリソースパス / に リソース名 (今回は {proxy}) を入力し [リソースを作成] をクリック。

このリソース (ここでは {proxy})を使用することで、リクエスト URL のパスをパスパラメータとして受け取り、S3 連携時のオブジェクトキーへマッピングできるようにします。

PUT メソッドの作成

このステップでは、API Gateway で受け取った PUT リクエストを直接 S3 の PutObject API に連携し、URL のパスをアップロード先（S3 オブジェクトキー）として利用できるように設定します。

「リソース」 で {proxy} を選択し、[メソッドを作成] をクリック。

メソッドの詳細で以下を選択し [メソッドを作成] をクリック。

メソッドタイプ：PUT

統合タイプ：AWS のサービス

項目	設定
AWS リージョン	ap-norhteast-1
AWS のサービス	Simple Storage Service (S3)
HTTP メソッド	PUT
アクションタイプ	パスオーバーライドを使用・パスオーバーライド：{bucket}/{key} ・実行ロール：作成したロール ARN ※その他はデフォルトでOK

作成した PUT メソッドから 統合リクエスト の [編集] をクリック。

URL パスパラメータ に以下を入力し [保存] をクリック。

名前	マッピング先
bucket	'YOUR_BUCKET_NAME' ※バケット名は '' で囲う
key	method.request.path.proxy

bucket は常に指定した S3 バケットへアップロードするため、固定値を設定し、key は {proxy} リソースで受け取った URL のパス部分をそのまま S3 のオブジェクトキーとして利用。

パスオーバーライドと URL パスパラメータの対応関係

この設定では、S3 の PutObject API を呼び出す際の
リクエストパス {bucket}/{key} を API Gateway 側で明示的に指定しています。

その際、{bucket} と {key} は固定値やリクエスト情報からマッピングされ、
以下の対応関係で S3 へリクエストが送信されます。

パスオーバーライドとは

API Gateway の AWS サービス統合では、
バックエンドサービス（今回は S3）に対して送信するリクエストパスを
パスオーバーライドで指定します。

S3 の PutObject API は、以下の形式でリクエストを受け取ります。

/{bucket}/{key}

そのため、本設定ではパスオーバーライドに

{bucket}/{key}

を指定しています。

Content-Type の設定

API Gateway から S3 へ直接ファイルをアップロードする場合、リクエストヘッダーの Content-Type は自動では S3 に引き継がれません。

そのため、この設定を行わないと、S3 に保存されるオブジェクトの
Content-Type が以下のようになります。

Content-Type

application/octet-stream

これは「不明なバイナリデータ」を意味するため、次のような問題が発生します。

ブラウザで画像を開いてもダウンロード扱いになる
CloudFront 経由で配信した際に正しい MIME タイプとならない
将来的に Web 表示・配信用途で不具合が出る

そのため、本手順では API Gateway の統合リクエストにてクライアントから送信された Content-Type ヘッダーを、そのまま S3 に転送する設定を行います。

これにより、以下のように S3 オブジェクトへ正しいメタデータが設定されます。

アップロードファイル	S3 上の Content-Type
JPEG 画像	image/jpeg
PNG 画像	image/png
PDF	application/pdf

「メソッドリクエスト」 の [編集] をクリック。

「HTTP リクエストヘッダー」 に Content-Type を入力し [保存] をクリック。

統合リクエスト の [編集] をクリック。

「URL リクエストヘッダーのパラメータ」 で以下を入力し [保存] をクリック。

名前	マッピング先
Content-Type	method.request.header.Content-Type

API Gateway デプロイ

[API をデプロイ] をクリック。

Deploy API で ステージ は 新しいステージ を指定し、ステージ名に v1 (任意) と入力し [デプロイ] をクリックします。

画像アップロード

今回は curl コマンドを使ってアップロードを行います。

まずは ステージ よりアップロード先となる URL を確認します。

確認ができたら以下のコマンドでアップロードを行います。

curl

% curl -X PUT \
  "https://xxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/v1/sample.jpg" \
  -H "Content-Type: image/jpeg" \
  --data-binary @sample.jpg

正常に実行が完了すると、S3 バケットにファイルがアップロードされています。

おわりに

今回で API Gateway を使ってファイルアップロードができるようになりました。
ただ、これは基本的な部分なので、CORS 対応やその他のメソッドの設定など色々と試していきたいと思います。

参考