🤘 ✍🏽 👩🏼‍🎓 サーバーレスアーキテクチャを使用して生産性を向上させる方法 👨‍🏭 📮 📘

写真： Unsplashの ジェシー・ ダーランド

この記事では、イメージの前処理プロセスをアプリケーションサーバーから完全にサーバーレスのAWSプラットフォームのアーキテクチャに移行する方法について説明します。

問題の本質

Webアプリケーションで画像のダウンロードが許可されている場合、ユーザーに表示する前に画像を処理する必要があります。

この記事では、AWSプラットフォームに基づいたサーバーレスアーキテクチャについて説明します。AWSプラットフォームは、広範なスケーラビリティを提供します。

私の最近のプロジェクトの1つ（ユーザーが製品の画像をアップロードする必要がある取引用のWebアプリケーション）では、最初に元の画像がアスペクト比4：3にトリミングされます。次に、さまざまなユーザーインターフェイス要素で使用される3つの異なる形式、800x600、400x300、および200x150に変換されます。

Ruby on Railsフレームワークの開発者として、私は最初に画像処理にImageMagickスイートを使用するRubyGemパッケージ、つまりPaperclipまたはDragonflyを試すことにしました。

これはかなり単純なアプローチですが、欠点があります。

画像はアプリケーションサーバーで処理されます。これにより、プロセッサの負荷が増加するため、全体的な応答時間が長くなる可能性があります。
アプリケーションサーバーのパフォーマンスは制限されており、断続的な要求処理には適していません。複数の画像を同時に処理する必要がある場合は、長時間完全に読み込まれる可能性があります。サーバーのパフォーマンスを向上させると、コストが増加します。
画像は順番に処理されます。繰り返しますが、多くの画像をすぐに処理したい場合は時間がかかります。
上記のパッケージが正しく構成されていない場合、処理されたイメージはディスクに保存され、すぐにサーバーの空き容量が不足する可能性があります。

一般に、アプリケーションが十分な数の画像を処理する場合、このソリューションはスケーリングしません。

解決策

画像の前処理プロセスをよく見ると、ほとんどの場合、アプリケーションサーバーで直接実行する必要がないことがわかります。これは、画像以外のデータを必要としない同じ変換が常に実行される場合に特に当てはまります。私の場合はそうでした。私はいつも、サイズの異なる複数の画像を作成し、品質レベルを最適化しました。

このタスクをアプリケーションロジックの残りの部分から簡単に分離できることが明らかになった直後、元のイメージを入力として単純に必要な変換をすべて実行するサーバーレスソリューションのアイデアがすぐに思い浮かびました。

AWS Lambdaはこの目的に最適であることがわかりました。 1秒間に数千のリクエストを処理することができ、実際の計算時間に対してのみ支払う必要があります。コードが実行されない場合、彼らはあなたからお金を要求しません。

AWS S3は低コストで無制限のストレージを提供し、AWS SNSはマイクロサービス、分散システム、およびサーバーレスアプリケーション向けの簡単なパブリッシャー/サブスクライバーメッセージングを提供します。最後に、AWS Cloudfrontは、S3に保存された画像のコンテンツ配信ネットワークとして使用されます。

これら4つのAWSサービスを組み合わせることで、低コストで強力な画像処理ソリューションが提供されます。

高レベルのアーキテクチャ

1つのソースから異なるバージョンのイメージを作成するには、AWS S3に元のイメージをロードします。次に、AWS SNSを使用して、AWS Lambda関数が起動します。これは、新しいバージョンを作成し、AWS S3に再ロードする役割を果たします。より詳細には、プロセスは次のようになります。

画像はAWS S3バケット内の特定のフォルダーにアップロードされます。
このフォルダーに新しいイメージがアップロードされるたびに、サービスはAWS SNSトピックで作成されたオブジェクトのS3キーを含むメッセージを送信します。
同じSNSトピックでユーザーとして設定されたAWS Lambdaは、メッセージを読み取り、このキーを使用して新しいイメージを取得します。
AWS Lambdaはイメージを処理し、必要な変換を実行してから、S3にアップロードします。
処理された画像はユーザーに表示されます。ダウンロード速度を最適化するために、AWS Cloudfrontコンテンツ配信ネットワークがこれに使用されます。

このアーキテクチャは、アップロードされた各イメージが特定のリクエストを処理するためにLambdaコードの新しい実行を開始するため、簡単に拡張できます。したがって、複数のコードを実行すると、一度に数千の画像を処理できます。

すべてのデータはS3に格納され、Lambdaサービスによって処理されるため、アプリケーションサーバーのディスク容量とコンピューティングリソースは使用されません。

最後に、S3用のコンテンツ配信ネットワークの設定は非常に簡単で、世界中のどこでも高いダウンロード速度を維持できます。

順を追った説明

このソリューションの実装はそれほど複雑ではありません。基本的に（イメージの前処理を実行するLambdaコードを除く）、構成のみを必要とするからです。この記事の残りの部分では、AWSアーキテクチャを構成する方法について詳しく説明します。また、その作業を十分に評価できるように、ダウンロードされたイメージのサイズを変更するためのAWS Lambdaコードも提供されています。

自分で試してみるには、AWSアカウントが必要です。ここで作成して、AWSの無料スターターパックを使用できます。

ステップ1：AWS SNSでトピックを作成する

まず、新しいSNS（Simple Notification Service）トピックを設定する必要があります。ここで、AWSは新しいイメージがS3にアップロードされるたびにメッセージを発行します。このメッセージには、オブジェクトのS3キーが含まれています。このキーは、その後、イメージを取得および処理するためにLambda関数によって使用されます。

AWSコンソールから、SNSページに移動し、[トピックの作成]をクリックして、トピック名（たとえば、image-preprocessing）を入力します。

次に、トピックポリシーを変更して、S3バケットがメッセージを発行できるようにする必要があります。

トピックページで、[アクション]-> [トピックポリシーの編集]をクリックし、[詳細表示]を選択して、次のJSONブロック（ResourceおよびSourceArn行で独自のAmazonリソース名（arn）を指定）をStatement配列に追加し、ポリシーを更新します。

{ "Sid": "ALLOW_S3_BUCKET_AS_PUBLISHER", "Effect": "Allow", "Principal": { "AWS": "*" }, "Action": [ "SNS:Publish", ], "Resource": "arn:aws:sns:us-east-1:AWS-OWNER-ID:image-preprocessing", "Condition": { "StringLike": { "aws:SourceArn": "arn:aws:s3:*:*:YOUR-BUCKET-NAME" } } }

完全なポリシーJSONテキストの例はこちら。

ステップ2：AWS S3フォルダー構造を作成する

次に、S3でフォルダー構造を準備する必要があります。フォルダー構造には、ソースおよび処理されたイメージが保存されます。この例では、800x600と400x300の2つのサイズの画像のバージョンを作成します。

AWSコンソールから、 S3ページを開き、新しいバケットを作成します。これをimage-preprocessing-exampleと呼びます。次に、バケットにオリジナル、800x600および400x300という名前のフォルダーを作成する必要があります。

ステップ3：AWS S3イベントを設定する

新しい画像が元のフォルダにアップロードされるたびに、S3は画像前処理トピックでメッセージを公開して、この画像を処理できるようにする必要があります。

このようなメッセージの発行を設定するには、AWSコンソールでS3バケットを開き、[プロパティ]-> [イベント]-> [通知の追加]をクリックして、次のフィールドに入力します。

ここでは、オリジナルフォルダー（プレフィックスフィールド）内に新しいオブジェクトが作成されるたびにイベントを生成するルールを設定し（ObjectCreateチェックボックス）、このイベントを画像前処理SNSトピックで公開します。

ステップ4：I3ロールを設定してLambdaにS3フォルダーへのアクセスを提供する

S3フォルダーからイメージをダウンロードして処理し、処理されたバージョンをS3にロードするLambda関数を作成する必要があります。ただし、最初に、Lambda関数が必要なS3フォルダーにアクセスできるように、IAMロールを設定する必要があります。

AWSコンソールから、IAMページに移動します。

[ ポリシーの作成]をクリックします。
JSONを押して、バケットの名前を入力します。

 { "Version": "2012-10-17", "Statement": [ { "Sid": "Stmt1495470082000", "Effect": "Allow", "Action": [ "s3:*" ], "Resource": [ "arn:aws:s3:::YOUR-BUCKET-NAME/*" ] } ] }

リソース行は、S3のバケットを指します。 [確認]をクリックし、AllowAccessOnYourBucketNameなどのポリシー名を入力して、ポリシーを作成します。

[役割]-> [役割の作成]をクリックします。
AWSサービス-> Lambda（ポリシーを使用するサービス）を選択します。
以前に作成したポリシー（AllowAccessOnYourBucketName）を選択します。
レビューをクリックし、名前（LambdaS3YourBucketName）を入力して、[ロールの作成]をクリックします。

Lambda

ロールを作成する

Lambda

ロールへのポリシーの添付

役割保存

ステップ5：AWS Lambda機能を作成する

次に、イメージ前処理トピックからメッセージを読み取り、イメージの修正バージョンを生成するようにLambda関数を構成する必要があります。

新しいLambda機能を作成することから始めましょう。

AWSコンソールからLambdaページに移動し、[関数の作成]をクリックして、新しい関数の名前（ImageResizeなど）を入力します。ランタイム（この場合はNode.js 6.10）と以前に作成したIAMロールを選択します。

次に、画像の前処理トピックで新しいメッセージが発行されるたびにLambda関数が呼び出されるように、トリガーの数にSNSを追加する必要があります。

これを行うには、トリガーのリストで[SNS]をクリックし、SNSトピックのリストで[イメージ前処理]を選択して、[追加]をクリックします。

ここで、S3 ObjectCreatedイベントを処理するコードをダウンロードする必要があります。これには、元のフォルダーからダウンロードした画像を受信し、処理し、変更した画像に適したフォルダーに再読み込みします。

コードはここからダウンロードできます。

Lambda関数にロードする必要がある唯一の要素は、index.jsファイルとnode_modulesフォルダーを含むversion1.1.zipアーカイブです。

Lambda関数に画像処理に十分なリソースを提供するには、メモリ容量を最大256 MBに、最大ランタイム（タイムアウト）を最大10秒に増やすことができます。リソースの必要性は、画像のサイズと変換の複雑さに依存します。

コード自体は非常にシンプルで、AWS統合を示すように設計されています。

最初に、ハンドラー関数（export.handler）が定義されます。外部トリガーによって呼び出されます。この場合、ダウンロードされた画像オブジェクトのS3キーを含むSNSで公開されたメッセージ。

まず、イベントメッセージのJSONテキストを分析して、S3バケットの名前、ダウンロードしたイメージオブジェクトのS3キー、およびファイル名（キーの最後の部分）を抽出します。

バケットの名前とオブジェクトのキーを受け取った後、ダウンロードされたイメージはs3.getObject操作を使用して抽出され、サイズ変更のために関数に渡されます。 SIZE変数には、取得する画像のサイズが含まれます。これらは、変換されたイメージがロードされるS3フォルダーの名前に対応します。

 var async = require('async'); var AWS = require('aws-sdk'); var gm = require('gm').subClass({ imageMagick: true }); var s3 = new AWS.S3(); var SIZES = ["800x600", "400x300"]; exports.handler = function(event, context) { var message, srcKey, dstKey, srcBucket, dstBucket, filename; message = JSON.parse(event.Records[0].Sns.Message).Records[0]; srcBucket = message.s3.bucket.name; dstBucket = srcBucket; srcKey = message.s3.object.key.replace(/\+/g, " "); filename = srcKey.split("/")[1]; dstKey = ""; ... ... // Download the image from S3 s3.getObject({ Bucket: srcBucket, Key: srcKey }, function(err, response){ if (err){ var err_message = 'Cannot download image: ' + srcKey; return console.error(err_message); } var contentType = response.ContentType; // Pass in our image to ImageMagick var original = gm(response.Body); // Obtain the size of the image original.size(function(err, size){ if(err){ return console.error(err); } // For each SIZES, call the resize function async.each(SIZES, function (width_height, callback) { var filename = srcKey.split("/")[1]; var thumbDstKey = width_height +"/" + filename; resize(size, width_height, imageType, original, srcKey, dstBucket, thumbDstKey, contentType, callback); }, function (err) { if (err) { var err_message = 'Cannot resize ' + srcKey; console.error(err_message); } context.done(); }); }); }); }

サイズ変更機能は、gmライブラリを使用して元の画像を変換します。特に、画像のサイズを変更し、必要に応じて切り取り、品質を80％に下げます。次に、s3.putObject操作を使用して変更したイメージをS3にアップロードし、ACL：public-readを指定して新しいイメージをパブリックにします。

 var resize = function(size, width_height, imageType, original, srcKey, dstBucket, dstKey, contentType, done) { async.waterfall([ function transform(next) { var width_height_values = width_height.split("x"); var width = width_height_values[0]; var height = width_height_values[1]; // Transform the image buffer in memory original.interlace("Plane") .quality(80) .resize(width, height, '^') .gravity('Center') .crop(width, height) .toBuffer(imageType, function(err, buffer) { if (err) { next(err); } else { next(null, buffer); } }); }, function upload(data, next) { console.log("Uploading data to " + dstKey); s3.putObject({ Bucket: dstBucket, Key: dstKey, Body: data, ContentType: contentType, ACL: 'public-read' }, next); } ], function (err) { if (err) { console.error(err); } done(err); } ); };

ステップ6：テスト

オリジナルのフォルダに画像をロードすることにより、すべてが正常に機能するかどうかを確認できるようになりました。すべてが正しく行われていれば、ダウンロードされた画像の対応する変換されたバージョンを800x600および400x300のフォルダーに取得します。

以下のビデオでは、3つのウィンドウを見ることができます。左側のオリジナルフォルダー、中央の800x600フォルダー、右側の400x300フォルダーです。ファイルが元のフォルダーにアップロードされた後、他の2つのウィンドウが更新され、イメージが作成されたかどうかが確認されます。

そして出来上がり、ここにあります;）

（オプション）ステップ7：Cloudfrontコンテンツ配信ネットワークを追加する

画像が作成され、S3にアップロードされたので、エンドユーザーに配信する必要があります。 Cloudfront Content Delivery Networkを使用して、ダウンロード速度を改善できます。これを行うには：

CloudFrontページを開きます。
[配布の作成]をクリックします。
配信方法の入力を求められたら、[Web配布]を選択します。
[Origin Domain Name]フィールドで、必要なS3バケットを選択し、[Create Distribution]をクリックします。

ネットワーク作成プロセスには時間がかかるため、CDNステータスがIn ProgressからDeployedに変わるまで待ちます。

ネットワークが展開された後、S3バケットへのリンクの代わりにドメイン名を使用できます。たとえば、 Cloudfrontドメイン名が1234-cloudfront-id.cloudfront.netの場合、 1234-cloudfront-id.cloudfront.net / 400x300 / FILENAMEおよび1234-cloudfront-id.cloudfrontにある処理済み画像フォルダーにアクセスできます。 .net / 800x600 /ファイル名

Cloudfrontには他にも多くの重要なパラメーターがありますが、この記事ではそれらについては説明しません。コンテンツ配信ネットワークのセットアップの詳細な手順については、 Amazonガイドを参照してください。

サーバーレスアーキテクチャを使用して生産性を向上させる方法