【AWS】API Gateway経由でS3の画像ファイルを公開してみた【サーバーレス】

こんにちは！nomurabbitです。
この記事ではAPI Gatewayを経由して
S3に保存した画像ファイルを
公開してみたいと思います。

バイナリデータならではの設定項目に注意ですね。

まずはS3に公開する画像ファイルを準備します。
API Gatewayに参照権限を持ったロールをかぶせますので、
バケットは非公開のままにしておきましょう。

f:id:nomurabbit:20211204053635p:plain

S3の権限については下記の記事をご覧ください。

バケットが用意できたら
おもむろに画像ファイルを保存します。

f:id:nomurabbit:20211204053852p:plain

これで画像ファイルの準備は完了です。

次にAPI Gatwayの設定です。
ポイントはレスポンスヘッダーに
Content-Typeを含むことです。

メソッドレスポンス
f:id:nomurabbit:20211204054123p:plain

統合レスポンス
f:id:nomurabbit:20211204054146p:plain

この２点を設定しておきます。

過去にReactアプリを構築した
ときにも設定しましたね。

さあ！これで公開できるはず！
早速アクセスしてみましょう！…って
あれ？

f:id:nomurabbit:20211204060835p:plain

画像が表示されませんね。

そうなんです。
API Gateway経由でS3の画像ファイルを公開するには
もう一つ設定が必要なのです。

それがこちら。

API Gatewayのバイナリメディアタイプという
パラメータです。

ここにimage/*の設定を追加して
バイナリデータを扱えるようにしましょう。

f:id:nomurabbit:20211204054553p:plain

これで準備は完了です。
アクセスしてみると…。

f:id:nomurabbit:20211204060811p:plain

表示されたー！

以上でAPI Gateway経由で
S3の画像ファイルを公開ことができました。

バイナリメディアタイプの設定が
ポイントですね。

よかったら試してみてください。
では！

nomurabbitのブログ