Lambda@Edgeで画像をリアルタイムにリサイズする

久しぶりにAWS Lambda を使用しました。

概要

通信容量の削減および表示速度の向上を目的とした画像のリサイズをLambda@Edgeで行います。

Lambda@Edgeとは

Lambda@Edge は、Amazon CloudFrontの機能で、アプリケーションのユーザーに近いロケーションでコードを実行できるため、パフォーマンスが向上し、待ち時間が短縮されます。Lambda@Edge では、世界中の複数のロケーションでインフラストラクチャをプロビジョニングまたは管理する必要はありません

Amazon Web Services

環境の構築（パッケージ）

Node.js バージョンは 14 を使用

EC2 等の Amazon Linux 上で npm install します。

Node バージン14 インストール

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
$ . ~/.nvm/nvm.sh
$ nvm ls-remote
$ nvm install 14
$ node -v
v14.21.3

パッケージインストール

$ npm init -f -y
$ npm install sharp --save
$ npm install querystring --save
$ npm install --only=prod

生成された、node_modules はLambdaにアップロードするときに使用します。

ソース

以下を参考に作成

AWS Lambda@Edge で画像をリアルタイムにリサイズ＆WebP形式へ変換する

https://github.com/hkusu/lambda-edge-image-convert

Sharp(画像処理モジール)の使用方法変更

max や他の多くの操作は v0.21.0 で非推奨になり、v0.22.0 で削除されたようです。

• http://sharp.pixelplumbing.com/en/stable/changelog/#v0210-4th-october-2018
• http://sharp.pixelplumbing.com/en/stable/changelog/#v0220-18th-march-2019

修正ソースはGitHub に置いてあるので参考にしてください。

https://github.com/naoya-aja/lambda-edge-image-convert

関数のアップロード

生成された、node_modules と、ソース index.js をzipで圧縮し、Lambda@Edgeにアップロードします。

まとめ

• 取り急ぎ画像をリアルタイムにリサイズできるようになりました。
• Lambda@EdgeはNode.jsとPythonのみサポートされています。
• 今回はWeb上でゴリゴリ構築しましたが、CloudFormationを使うようにしたいです。
• Lambda@Edgeはローカル環境で開発できるようにしたいです。

参考サイト

Amazon CloudFront & Lambda@Edge で画像をリサイズする

Amazon Web Services ブログ