API Gatewayを使って、S3に格納された画像を返す方法を紹介します。
目次
やりたいこと
ブラウザ上で画像を表示させるために、S3に格納されたファイルを取得したいことがあると思います。今回は、S3に格納されたファイルに何か処理を加えて返したい場合の一例として、API GatewayとLambdaを利用してS3に格納されたファイルを処理してから返しました。
加える処理の例
ここで加える処理のとして、次のようなことが考えられます。
- 画像のサムネイルを作成する
- S3のパスを隠すため置き換える
- Cognitoの認証をチェックする
実現方法
過去には、LambdaではJSONにレスポンスを格納し、CloudFrontと組み合わせてアクセスさせる方法が取られていましたが、現時点ではそのようなことをする必要なく、Lambdaで返したレスポンスを画像としてブラウザ上に表示させられるようです。
0. S3に表示させたい画像を格納する
今回は、bucketをsample-bucket、keyをimage/sample.jpgとします。
1. Lambda関数を作成する
まず、Lambda関数を作成します。今回は次のように単純に固定のファイルを取得して返すようにしました。
var aws = require('aws-sdk');
var s3 = new aws.S3();
exports.handler = (event, context, callback) => {
const params = {
Bucket: "sample-bucket",
Key: "image/sample.jpg"
};
s3.getObject(params, function(err, res) {
callback(err, res.Body.toString('base64'));
});
};
2. API Gatewayを作成する
API Gatewayについては、次のSwaggerファイルのように設定します。
---
swagger: "2.0"
info:
version: "2018-10-07T07:46:05Z"
title: "sample"
host: "xxxxxx.execute-api.ap-northeast-1.amazonaws.com"
basePath: "/prod"
schemes:
- "https"
paths:
/:
get:
produces:
- "image/jpg"
- "application/json"
responses:
200:
description: "200 response"
schema:
$ref: "#/definitions/Empty"
headers:
Content-Type:
type: "string"
definitions:
Empty:
type: "object"
title: "Empty Schema"
これでhttps://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/prodにアクセスすると、画像を表示することができます。
