ゴール

元画像はCloudFront ⇄ S3
diagram1.png
リサイズ画像はCloudFront ⇄ API Gateway ⇄ Lambda ⇄ S3
diagram2.png
で取得する。
※サイズの値はクエリパラメータで指定できるようにする。

S3

aws-image-testという名のバケットを作成。
imgフォルダ配下にaws.jpgをアップロードし、公開するを実行。
s3.png

Lambda

関数の作成で設計図からs3-get-object(nodejs6.10)を選択。
pythonでもOK
lambda1.png

名前、ロール名は任意。
ロールはテンプレートから新しいロールを作成
ポリシーテンプレートはS3オブジェクトの読み取り専用アクセス権限を選択。
lambda2.png

S3の設定。LambdaをどのS3と連携させるかということ。
今回はaws-image-testと入力し、関数を作成を実行。
lambda3.png

関数作成後、左側にS3が紐づいているが、不要なので削除。
lambda4.png

関数コードには下記を実装。

sample
'use strict';

const im = require('imagemagick');
const aws = require('aws-sdk');
const s3 = new aws.S3({ apiVersion: '2006-03-01' });

exports.handler = (event, context, callback) => {
    const key = event.filename;
    const bucket = "aws-image-test";
    const params = {
        Bucket: bucket,
        Key: key,
    };

    s3.getObject(params, (err, data) => {
        if (err) {
            callback(`Error getting object ${key} from bucket ${bucket}. Make sure they exist and your bucket is in the same region as this function.`);
        } else {
            im.resize({
                srcData: data.Body,
                format: "jpg",
                width: event.width
            }, function(err, stdout, stderr) {
                if (err) {
                    callback('resize failed', err);
                } else {
                    callback(null, new Buffer(stdout, 'binary').toString('base64'))
                }
            });
        }
    });
};

試しにテストを実行。
下記テストイベントを設定し、実行後に成功が確認できればLambdaの準備は完了。
lambda5.png

API Gateway

API名にaws-image-test、バイナリサポートの設定にimage/*を設定。
api-gateway1.png

アクションからリソースの作成を選択。
リソース名、リソースパスにresizeと入力。
api-gateway2.png

再度アクションからリソースの作成を選択。
2つのチェックボックスにチェックを入れて、リソース名にfilepath、リソースパスに{filepath+}と入力。
api-gateway3.png

するとANYOPTIONSというメソッドができるが、ANYは不要なので削除。
GETが必要なので、アクションからメソッドの作成を選択し、GETメソッドを作成。
api-gateway4.png

GETメソッドの統合リクエスト本文マッピングテンプレートから下記を定義。
api-gateway5.png

sample
{
 "filepath": "$input.params('filepath')",
 "width": "$input.params('width')"
}

CloudFront

Create Distributionから、作成したS3をDefaultに指定して作成。
Origin Custom Headersに、Content-Type: image/jpeg, Accept: image/jpegを指定。
cloudfront1.png

Create Distribution実行後、Create Originから下記のようにLambdaを指定。
Origin Custom HeadersはS3と同様。
cloudfront2.png

/resize/*のパスパターンでLambdaに振りたいので、Create Behaviorから下記のように設定。
Default TTLはキャッシュしない場合は0にする。
cloudfront3.png

※CloudFrontは更新に時間がかかるので、しばらく待つ。

実行

これで、
元画像取得: https://hogehoge.cloudfront.net/img/aws.jpg
リサイズ画像取得: https://hogehoge.cloudfront.net/resize/img/aws.jpg?width=100
が可能になりました。

参考

API Gatewayでサーバレスな画像リサイズAPIを作る
https://qiita.com/akitsukada/items/e6d8fe68c49973d1edf6

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.