HaneCa

独り立ちへ向けた長い道

API Gateway+LambdaでS3に格納された画像を返す

投稿日: 2018年10月7日 最終更新日: 2019年9月10日

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にアクセスすると、画像を表示することができます。

参考サイト

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください