update.少しづつ広まってきているServerless技術を使って何かやろうとするとちょうどいい題材なのがS3に上げた画像を動的に縮小表示するというアプリです。https://xxx.cloudfront.net/somefile.jpeg?w=600のようなURLでアクセスするとS3にある画像を動的に縮小して幅600pxにして表示してくれるというものです。作るきっかけになったのは、自分のサイトで画像クチコミを載せていたのですが、圧縮すること無くそのまま上げてしまっていたので1ページ30MBみたいなサイズになって読み込み障害を起こすようになってしまったことでした。アップロード時に圧縮するのがセオリーだと思いますが、作った当時はそんなことは二の次としてたらあっという間に数が増えてしまったようです。今だとPietとかそういった選択肢もあるのかもしれません。お金があればAKAMAIやFastlyのようなCDNもアリでしょう。それも厳しい人向けにAWSのLambdaなどのサーバレステクノロジーでやったときの内容を公開します。以下設定画面とLambdaのソースになります。構成はこんな感じですが、面倒そうに一瞬見えるかもしれませんが、全体通してS3の画像を圧縮して表示するシステムと思えばそれほど大変でもないです。以下の設定内容に沿ってまずはやってみることをオススメします。気合い入れたら3時間位で出来るかもです。Gatewayの書き出した画像情報にContent-typeなどのヘッダ情報をつけてHTMLで表示出来るように修正となります。要はS3の画像をそのままURLにして表示するのでなく、AWSのAPI機能を使って自動化機能であるLambdaで圧縮かけて表示しているというところでしょうか。ここにBucketを用意して画像を置きます。S3の設定S3を開きます。Bucketの作成から行います。画像の置き場所となるfolderを作成します。ここではimagesとしています。以下参考にしてください。このimages配下に適当な画像を置いておいてください。次はLambdaです。functionを作成します。以下参照してください。今回は触れませんがIAMでS3にアクセスに行くためのアカウントとRoleも作成します。S3ReadOnly権限でいいかなと思います。その情報をLambdaでも設定します。LambdaのコードこちらはLambdaのコードです。Node.jsを想定しています。ここで注意があります。Nodeのバージョンは設定可能なのですが、折角なので最新(2018年4月時点)の8.10に対応しようと思います。するとライブラリとして使おうとしているimagemagickをNode8.10バージョンでビルドしたものを取り込む必要があります。その手順を書いてもいいですが、結構面倒で挫折してしまうと思われるので、私の方でビルドしたものをGithubにあげておきました。https://github.com/hardreggaecafe/resizeimage_im_node8.10使い方は簡単です。TypeからUploadするだけです。zipファイルが10MB以内ならここから直接あげられますが、10MB超えるときには一度S3にzipファイルを置いて、そのパスを指定する必要があります。今回は恐らく10MBにギリギリ収まるかと思います。こちらがindex.jsのコードです。必要な箇所は書き換えてください。Gatewayの設定です。GatewayとLambdaをまとめてテスト(※)となります。Resource、MethodそしてStageはここから作成。Resourceの作成方法はこちら。Requestをそれぞれ以下のように設定します。ここからはStageの設定。最後にAPIGateway全体の設定。ここまで作ったら本当に動くか確認したくなるのが人情。APIGatewayとLambdaをまとめてテストします。Gateway+Lambda+S3のテストGETの設定でこういうのがあります。こんな風にfilenameと幅指定(w)とヘッダ情報を入力してテストします。200とバイナリが返ってくれば成功です。ダメな場合何処かで失敗しています。CloudWatchのログの見方も下につけたのでこちらも参照しながら調査してみてください。最後はCloudFrontです。Distributionw作成します。General情報とOrigin情報を以下のように設定します。ここにAPIGatewayのURLが必要になってきます。Behaviorではキャッシュ情報とQueryStringの設定を行います。ここまで設定したらGeneralの設定情報にDomainNameという項目があるのでhttps://xxx.cloudfront.net/somefile.jpeg?w=600のようなURLをブラウザから入力してみてください。上手く行けばS3の置いている画像が圧縮されて表示されるはずです。上手く行かない場合は以下のCloudWatchのログを見て何が問題かを調べてみてください。ここに吐き出されない場合は今までの設定の何処かが間違っています。ログ出力の設定を見直してみてください。動作ログ&デバッグログを確認する方法としてはCloudWatchのログ欄を見るということになります。劇的に縮小できました。スマホで上げた画像はExifという画像の属性情報の読み取りが上手く行かない関係で上下を正しく認識しないままになってしまいます。これはとりあえず次回の課題ですが縮小には成功しました。$0なので占めて月間想定で$83ほど。Fastlyに月額20万も払うことを考えたら遥かに安いです。あっちはExifを認識して自動で回転(AutoOrient)機能とか色々ついているから一概に比較できないですが・・・。いいつつ実はImageMagickよりも5倍早く圧縮し、AutoOrient機能もついているSharpというNodeModuleを組み込んだバージョンも作りました。その話は次回に書きます。お役に立てれば幸いです。upLoginユーザーは見つかりませんでした。