サーバーなしのマイクロサービス（クラウドバージョン）

親愛なる読者の皆さん、こんにちは！



最も気をつけてください、私たちはマイクロサービスに関する革新的な本に取り組んでいますが、同時に、このトピックについてインターネットで書いたものを読むことを忘れないでください。 したがって、著者のTim Wagnerがマイクロサービスアーキテクチャに関する彼の見解を共有しているAmazonブログの興味深い記事を通過することはできませんでした。



多くのJava、JavaScript、スキーマ、推論、および大量のテキスト



LinuxCon / ContainerCon 2015カンファレンスで、 「 サーバーのないマイクロサービス 」というデモレポートを発表しました。 その中で、画像処理用のマイクロサービスの作成について説明し、いくつかの地域に展開し、このマイクロサービスをマシンインターフェイスとして使用するモバイルアプリケーションを作成し、Amazon API GatewayとWebサイトを使用してHTTPSベースのAPIを追加し、構築全体を実行しましたユニットおよび負荷テスト-すべてサーバーなし。



この記事では、前述のレポートを完全に復元し、いくつかの場所で、建築の繊細さを掘り下げています。 追加の図はスライドの選択にあります。 このアーキテクチャのもう1つの例は、gistリポジトリ内のSquirrelBin実行可能ファイルです。



サーバーレスアーキテクチャ



「サーバーレス」という用語は、明示的なアーキテクチャが不要であることを意味します。つまり、サーバーなしで、サーバーに展開せずに、プログラムをインストールせずに実行できます。 マネージドクラウドサービスとラップトップでのみ動作します。 以下の図は、主要なコンポーネントとその接続を示しています。マシンインターフェイスとしてのラムダ関数と、それに直接接続するモバイルアプリケーション、およびAmazon S3にある静的サイトにHTTPエンドポイントを提供するAmazon API Gateway。







AWS Lambdaを使用したモバイルおよびWebアプリケーション用のサーバーレスアーキテクチャ



それでは始めましょう！



ステージ1：画像処理用のサービスを作成します



プロセス全体を簡素化するために、Lambdaテクノロジーnodejsに組み込まれているImageMagickライブラリを使用します。 ただし、これは必須ではありません-独自のライブラリが必要な場合は、 JavaScriptまたはネイティブライブラリをロードしたり、 Pythonを実行したり、コマンドラインの実行可能ファイルにコードをラップしたりできます 。 次の例はnodejsに実装されていますが、 Java 、 Clojure 、 Scala、またはAWS Lambdaの別のjvm言語を使用してこのようなサービスを作成することもできます。



以下のコードは、ImageMagickの一種の「ハローワールド」と見なすことができます-コマンドの基本構造（このコマンドはスイッチオペレーター）に精通し、バラの埋め込み画像を抽出して返すことができます。 結果のコーディングとは別に、他のすべてをJSONで書くこともできます。

var im = require("imagemagick"); var fs = require("fs"); exports.handler = function(event, context) { if (event.operation) console.log("Operation " + event.operation + " requested"); switch (event.operation) { case 'ping': context.succeed('pong'); return; case 'getSample': event.customArgs = ["rose:", "/tmp/rose.png"]; im.convert(event.customArgs, function(err, output) { if (err) context.fail(err); else { var resultImgBase64 = new Buffer(fs.readFileSync("/tmp/rose.png")).toString('base64'); try {fs.unlinkSync("/tmp/rose.png");} catch (e) {} // discard context.succeed(resultImgBase64); } }); break; //     default: var error = new Error('Unrecognized operation "' + event.operation + '"'); context.fail(error); return; } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、サービスが機能することを確認しましょう。 これを行うには、次のJSONをAWS Lambdaコンソールのテストウィンドウに送信します。

 { "operation": "ping" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

必須の「ポン」応答を受信する必要があります。 次に、実際にImageMagick呼び出しに進み、そのようなJSONを送信します。

 { "operation": "getSample" }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このクエリは、base64でエンコードされたPNG PNGイメージの文字列表現を取得します：“” iVBORw0KGg ... Jggg ==”。 これらが単なるランダム文字ではないことを確認するには、それらを切り取り、Base64を画像に変換する便利なデコーダー（codebeautify.org/base64-to-image-converterなど）に（二重引用符なしで）貼り付けます。 バラの美しい画像を取得する必要があります。







サンプル画像（赤いバラ）



次に、画像処理サービスを追加して、nodejsラッパーの残りの使用を準備します。 さまざまな操作を提供します。

• ping：サービスの可用性を確認します。
• getDimensions：イメージの高さと幅を取得するために識別操作を呼び出す短縮版。
• 識別：画像のメタデータを取得します。
• サイズ変更：サイズ変更のための補助的な手順（「内部」変換呼び出し）
• thumbnail：サイズ変更の同義語。
• 変換：「ユニバーサル」手順-メディア形式の変換、変換の適用、サイズの再計算などが可能
• getSample：サンプル画像を取得します。 この操作は「hello world」に対応します

ここのコードのほとんどは非常に簡単です。 このコードは、nodejsに実装されたImageMagickプロシージャをラップし、それらの一部はJSONを受け入れます（この場合、Lambdaによって送信されたイベントはクリアされ、リダイレクトされます）が、文字列の配列として渡されるコマンドライン引数（いわゆる「カスタム」）を受け入れます。 ImageMagickを以前に使用したことがない場合、この機能の1つの側面は明らかではないかもしれません。つまり、コマンドラインのラッパーとして機能し、ファイル名にセマンティクスがあります。 競合する2つのニーズがあります。第1に、クライアントはセマンティクス（たとえば、JPEGに対するPNGなどの出力画像形式）を転送する必要があり、第2に、サービスの作成者はディスク上の一時ストレージを保存する場所を決定する必要があるため、詳細の漏洩を許可しません実装。 これらの両方の問題を同時に解決するために、JSONスキームで2つの引数「inputExtension」と「outputExtension」を定義し、クライアント部分（ファイル拡張子）とサーバー部分（ディレクトリ名およびベース名）を組み合わせて、ファイルの実際の場所を作成します。 完成したコードは、次の画像処理図面で確認できます（そして使用できます！）。



ここで実行できるテストは多数ありますが（以下で実行します）、操作性を簡単にテストするために、ローズの同じ画像を再度抽出し、ネガティブフィルターを使用して返します（色反転を実行します）。 Lambdaコンソールで同様のJSONファイルを使用できます。base64Imageフィールドの内容を画像に一致する文字に置き換えるだけです（このシーケンスは非常に長くなります）。

 { "operation": "convert", "customArgs": [ "-negate" ], "outputExtension": "png", "base64Image": "...fill this in with the rose sample image, base64-encoded..." }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

画像にデコードされた出力は、真の植物の洗練、青いバラです：







青いバラ（元の画像から赤いバラでネガ）



サービスの機能に関してはそれだけです。 原則として、ここから引用を開始し、「1回稼働」から「24時間稼働のモニタリングとプロダクションのロギングを備えたスケーラブルで信頼性の高いサービス」に切り替えます。 しかし、これがLambdaの美しさです。私たちの画像処理コードはすでに完全に展開されたマイクロサービスであり、実用化の準備が整っています。 それを呼び出すことができるモバイルアプリケーションを追加するには...



ステージ2：モバイルクライアントを作成する



アプリケーションを処理するためにマイクロサービスに連絡する方法はいくつかありますが、サンプルクライアントを示すために、Android用の小さなアプリケーションを作成します。 以下は、ContainerConレポートで使用されるクライアントコードです。 ここでは、画像とフィルターを取得できる単純なAndroidアプリケーションを作成します。その後、フィルターが「変換」操作で画像に適用され、最終的に何が得られるかがわかります。 フィルタリングは、AWS Lambdaで動作する画像処理マイクロサービスで行われます。



このアプリケーションの機能を明確にするために、AWS Lambdaアイコンを例にとります。







AWS Lambdaアイコンを表示するAndroidエミュレーター



「ネガティブ」フィルターを選択して、アイコンの色を反転します。







画像変換に「ネガ」フィルターを選択します



...そして、ここに結果があります：Lambdaモニカーの青いバージョン（元はオレンジでした）：







「否定」フィルターをAWS Lambdaアイコンに適用した結果



さらに、現代のシアトルのパノラマにビンテージの外観を与えることができます。 シアトルの写真を撮り、セピアトーンのフィルターを適用します。







セピア調のシアトルのパノラマ。



コードに渡します。 ここでは、Androidのプログラミングの基本を説明するつもりはありませんが、アプリケーションのLambda固有の要素に注意してください。 独自のアプリケーションを作成している場合は、AWS Mobile SDKアーカイブを有効にして、以下のコードサンプルを実行する必要があります。 概念的には、コードは4つの部分で構成されています。

1. POJOデータスキーマ
2. リモートサービスの定義（操作）
3. 初期化
4. サービスコール

すべての部品を順番に検討してください。



データスキームは、クライアントとサーバー間で転送する必要があるすべてのオブジェクトを定義します。 「ラムダ主義」はありません。 すべてのオブジェクトは、特別なライブラリやフレームワークのない通常のPOJO（Plain Old Java Object）です。 基になるイベントを定義し、それを展開して操作の構造を反映します。 上記の画像処理サービスを定義およびテストするときに使用したJSONの「javification」があると想定できます。 Javaサーバーも作成する場合は、通常、これらのファイルを共通イベント構造の定義の一部として共有します。 この例では、これらのPOJOはサーバー側のJSONに変換されます。



LambdaEvent.java

 package com.amazon.lambda.androidimageprocessor.lambda; public class LambdaEvent { private String operation; public String getOperation() {return operation;} public void setOperation(String operation) {this.operation = operation;} public LambdaEvent(String operation) {setOperation(operation);} }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ImageConvertRequest.java

 package com.amazon.lambda.androidimageprocessor.lambda; import java.util.List; public class ImageConvertRequest extends LambdaEvent { private String base64Image; private String inputExtension; private String outputExtension; private List customArgs; public ImageConvertRequest() {super("convert");} public String getBase64Image() {return base64Image;} public void setBase64Image(String base64Image) {this.base64Image = base64Image;} public String getInputExtension() {return inputExtension;} public void setInputExtension(String inputExtension) {this.inputExtension = inputExtension;} public String getOutputExtension() {return outputExtension;} public void setOutputExtension(String outputExtension) {this.outputExtension = outputExtension;} public List getCustomArgs() {return customArgs;} public void setCustomArgs(List customArgs) {this.customArgs = customArgs;} }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これまでのところ、すべては比較的単純です。 データモデルができたので、いくつかのJavaアノテーションを使用してサーバーエンドポイントを定義します。 ここでは、「ping」と「変換」という2つの操作を提供しています。 他の操作を追加してコードを拡張することは難しくありませんが、これは以下で説明するデモアプリケーションには必要ありません。



ILambdaInvoker.java

 package com.amazon.lambda.androidimageprocessor.lambda; import com.amazonaws.mobileconnectors.lambdainvoker.LambdaFunction; import java.util.Map; public interface ILambdaInvoker { @LambdaFunction(functionName = "ImageProcessor") String ping(Map event); @LambdaFunction(functionName = "ImageProcessor") String convert(ImageConvertRequest request); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、アプリケーションの主要部分に進む準備ができました。 ここでは、主にAndroidのステンシルコードと、クライアントリソースを簡単に管理するためのコードが表示されますが、Lambdaに関連するいくつかのフラグメントに個別に注目します。



これは「init」セクションです。 ここでは、Lambda APIを呼び出す認証プロバイダーが作成され、Lambda-invokerが作成されます。これにより、上記で定義されたエンドポイントを呼び出し、POJOオブジェクトをデータモデルに転送できます。

  //   CognitoCachingCredentialsProvider CognitoCachingCredentialsProvider cognitoProvider = new CognitoCachingCredentialsProvider( this.getApplicationContext(), "us-east-1:<YOUR COGNITO IDENITY POOL GOES HERE>", Regions.US_EAST_1); //  LambdaInvokerFactory,       Lambda. LambdaInvokerFactory factory = new LambdaInvokerFactory(this.getApplicationContext(), Regions.US_EAST_1, cognitoProvider); //  - Lambda         Json. lambda = factory.build(ILambdaInvoker.class);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

（非常に）興味深いもう1つのコードは、リモートプロシージャコール自体です。

  try { return lambda.convert(params[0]); } catch (LambdaFunctionException e) { Log.e("Tag", "Failed to convert image"); return null; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、すべての魔法（引数のシリアル化と結果の逆シリアル化）は暗黙的に進行し、ここでいくつかのエラー処理を実行するだけなので、それほど興味深いものではありません。

完全なソースファイルを次に示します。



MainActivity.java

 package com.amazon.lambda.androidimageprocessor; import android.app.Activity; import android.app.ProgressDialog; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.AsyncTask; import android.os.Bundle; import android.util.Base64; import android.util.Log; import android.view.View; import android.widget.ImageView; import android.widget.Spinner; import android.widget.Toast; import com.amazon.lambda.androidimageprocessor.lambda.ILambdaInvoker; import com.amazon.lambda.androidimageprocessor.lambda.ImageConvertRequest; import com.amazonaws.auth.CognitoCachingCredentialsProvider; import com.amazonaws.mobileconnectors.lambdainvoker.LambdaFunctionException; import com.amazonaws.mobileconnectors.lambdainvoker.LambdaInvokerFactory; import com.amazonaws.regions.Regions; import java.io.ByteArrayOutputStream; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import java.util.Objects; public class MainActivity extends Activity { private ILambdaInvoker lambda; private ImageView selectedImage; private String selectedImageBase64; private ProgressDialog progressDialog; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //   CognitoCachingCredentialsProvider CognitoCachingCredentialsProvider cognitoProvider = new CognitoCachingCredentialsProvider( this.getApplicationContext(), "us-east-1:2a40105a-b330-43cf-8d4e-b647d492e76e", Regions.US_EAST_1); //  LambdaInvokerFactory,       Lambda. LambdaInvokerFactory factory = new LambdaInvokerFactory(this.getApplicationContext(), Regions.US_EAST_1, cognitoProvider); //  - Lambda         Json. lambda = factory.build(ILambdaInvoker.class); //  lambda-,  ,    pingLambda(); } //  lambda- @SuppressWarnings("unchecked") private void pingLambda() { Map event = new HashMap(); event.put("operation", "ping"); //  Lambda-    . // ,       . new AsyncTask<Map, Void, String>() { @Override protected String doInBackground(Map... params) { //   "ping".   ,    //  LambdaFunctionException. try { return lambda.ping(params[0]); } catch (LambdaFunctionException lfe) { Log.e("Tag", "Failed to invoke ping", lfe); return null; } } @Override protected void onPostExecute(String result) { if (result == null) { return; } //    Toast.makeText(MainActivity.this, "Made contact with AWS lambda", Toast.LENGTH_LONG).show(); } }.execute(event); } //     "process image" public void processImage(View view) { //     if (selectedImageBase64 == null) { Toast.makeText(this, "Please tap one of the images above", Toast.LENGTH_LONG).show(); return; } //    String filter = ((Spinner) findViewById(R.id.filter_picker)).getSelectedItem().toString(); //    ImageConvertRequest request = new ImageConvertRequest(); request.setBase64Image(selectedImageBase64); request.setInputExtension("png"); request.setOutputExtension("png"); //     List customArgs = new ArrayList(); request.setCustomArgs(customArgs); switch (filter) { case "Sepia": customArgs.add("-sepia-tone"); customArgs.add("65%"); break; case "Black/White": customArgs.add("-colorspace"); customArgs.add("Gray"); break; case "Negate": customArgs.add("-negate"); break; case "Darken": customArgs.add("-fill"); customArgs.add("black"); customArgs.add("-colorize"); customArgs.add("50%"); break; case "Lighten": customArgs.add("-fill"); customArgs.add("white"); customArgs.add("-colorize"); customArgs.add("50%"); break; default: return; } // async-  lambda- new AsyncTask() { @Override protected String doInBackground(ImageConvertRequest... params) { try { return lambda.convert(params[0]); } catch (LambdaFunctionException e) { Log.e("Tag", "Failed to convert image"); return null; } } @Override protected void onPostExecute(String result) { //    ,    if (result == null || Objects.equals(result, "")) { hideLoadingDialog(); Toast.makeText(MainActivity.this, "Processing failed", Toast.LENGTH_LONG).show(); return; } //      base64         byte[] imageData = Base64.decode(result, Base64.DEFAULT); selectedImage.setImageBitmap(BitmapFactory.decodeByteArray(imageData, 0, imageData.length)); hideLoadingDialog(); } }.execute(request); showLoadingDialog(); } /*      */ public void selectLambdaImage(View view) { selectImage(R.drawable.lambda); selectedImage = (ImageView) findViewById(R.id.static_lambda); Toast.makeText(this, "Selected image 'lambda'", Toast.LENGTH_LONG).show(); } public void selectSeattleImage(View view) { selectImage(R.drawable.seattle); selectedImage = (ImageView) findViewById(R.id.static_seattle); Toast.makeText(this, "Selected image 'seattle'", Toast.LENGTH_LONG).show(); } public void selectSquirrelImage(View view) { selectImage(R.drawable.squirrel); selectedImage = (ImageView) findViewById(R.id.static_squirrel); Toast.makeText(this, "Selected image 'squirrel'", Toast.LENGTH_LONG).show(); } public void selectLinuxImage(View view) { selectImage(R.drawable.linux); selectedImage = (ImageView) findViewById(R.id.static_linux); Toast.makeText(this, "Selected image 'linux'", Toast.LENGTH_LONG).show(); } //   'id'  ,   base64 private void selectImage(int id) { Bitmap bmp = BitmapFactory.decodeResource(getResources(), id); ByteArrayOutputStream stream = new ByteArrayOutputStream(); bmp.compress(Bitmap.CompressFormat.PNG, 100, stream); selectedImageBase64 = Base64.encodeToString(stream.toByteArray(), Base64.DEFAULT); } //       public void reset(View view) { ((ImageView) findViewById(R.id.static_lambda)).setImageDrawable(getResources().getDrawable(R.drawable.lambda, getTheme())); ((ImageView) findViewById(R.id.static_seattle)).setImageDrawable(getResources().getDrawable(R.drawable.seattle, getTheme())); ((ImageView) findViewById(R.id.static_squirrel)).setImageDrawable(getResources().getDrawable(R.drawable.squirrel, getTheme())); ((ImageView) findViewById(R.id.static_linux)).setImageDrawable(getResources().getDrawable(R.drawable.linux, getTheme())); Toast.makeText(this, "Please choose from one of these images", Toast.LENGTH_LONG).show(); } private void showLoadingDialog() { progressDialog = ProgressDialog.show(this, "Please wait...", "Processing image", true, false); } private void hideLoadingDialog() { progressDialog.dismiss(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これがモバイルアプリケーション全体です。 これは、データモデル（Javaクラス）、制御モデル（いくつかのメソッド）、すべての種類を初期化する3つのコマンド、およびtry / catchブロックで囲まれたリモート呼び出しで構成されています...簡単です。



いくつかの地域での展開



これまでのところ、このコードが機能する場所に特に焦点を合わせていません。 Lambdaはコードをリージョン内にデプロイする責任がありますが、使用する他のリージョンを決定する必要があります。 最初のデモでは、米国東部で機能する関数を作成しました。たとえば、これはバージニア州のデータセンターに適用されます。 グローバルサービスを提供していることを上記で書きました。したがって、これらの地域からのモバイルアプリケーションが最小限の遅延でサービスに接続できるように、ヨーロッパ（アイルランド）および太平洋地域（東京）にカバレッジを拡大しましょう。







2つの追加リージョンにLambda関数をデプロイするためのサーバーレスメカニズム



サーバーレスWebアプリケーションパート1：APIエンドポイント



これで、モバイルアプリケーションと、そのマシンインターフェイスとして機能するグローバルに展開された画像処理サービスができました。 デバイスではなくブラウザで作業することを好む同志のために、サーバーレスWebアプリケーションの作成に移りましょう。 これは2段階で行います。 まず、画像処理サービスのAPIエンドポイントを作成します。 次に、次のセクションで、Amazon S3を使用してサイト自体を追加します。



AWS Lambdaを使用すると、コードをサービスに簡単に変換できます。これは、Webサービスクライアントインターフェイスがここで既に「組み込まれている」ためです。 ただし、これにはクライアント（前のセクションで作成したモバイルクライアントなど）がAWSから提供された認証情報でリクエストに署名する必要があります。 このタスクは、Androidアプリケーションで使用されるAmazon Cognito認証クライアントによって解決されますが、ウェブサイトを通じて画像処理サービスを共有したい場合はどうでしょうか？



これを行うには、別のサーバーであるAmazon API Gatewayを使用します 。 このサービスを使用すると、インフラストラクチャを必要とせずにAPIを定義できます。APIはAWSによって完全に管理されます。 APIゲートウェイを使用して、画像処理サービスで使用されるURLを作成します。これにより、Webユーザーがその機能のサブセットにアクセスできます。 Amazon API Gatewayは、さまざまなAPIへのアクセスを制御するさまざまな方法を提供します：API呼び出しはAWS認証情報で署名するか、OAuthトークンを使用してトークンヘッダーを検証にリダイレクトするだけで、APIキーを使用できます（セキュリティで保護されたアクセスが必要な場合はお勧めしません）またはAPIを完全に作成しますここに示すように、一般公開されています。



ゲートウェイAPIは、多様なアクセスモデルに加えて、この記事の範囲を超えた多くの機能も提供します。 それらの一部は組み込み（DDOS攻撃に対する保護など）で、その他はキャッシュなどにより、人気のあるイメージを繰り返し抽出する際の遅延とコストをさらに削減できます。 API Gatewayでは、クライアントと（マイクロ）サービス間の間接レベルを実装することにより、バージョン管理とプライマリデータの配置（ステージング）に別々の手順を使用して、それらを独立して開発することもできます。 それまでの間、主な問題の解決に焦点を当てます。画像処理サービスをAPIとして提供することです。



それでは、APIを作成しましょう。 AWSコンソールで、[API Gateway]をクリックし、[新しいAPI]を選択して、APIに名前を付けるか、説明を追加します。 「ImageAPI」という名前を選択しました。







次に、新しいAPIのリソースを作成し（「ImageProcessingService」と呼びます）、その中にPOSTメソッドを作成します。 統合のタイプとして「Lambda関数」を選択し、画像処理のサービスとして使用するLambda関数の名前を入力します。 「メソッド要求」構成で、許可タイプを「なし」に設定します（つまり、パブリックエンドポイントになります）。 以上です。







統合をテストするには、「テスト」ボタンをクリックします。







次に、テストペイロード{「操作」：「ping」}を指定します。 APIをLambda関数に正常に関連付けたことを示す、予想される「ポン」の結果を取得する必要があります。



注：以下では、より完全な（より深い）テストを行いますが、通常、pingなどの単純な操作に関連付けられたトップレベルリソースとしてGETメソッドをAPIに追加すると便利です。 これにより、どのブラウザーからでも、APIがLambda関数に正しく接続されていることをすばやく確認できます。 デモアプリケーション（および一般的に）では、これは必須ではありませんが、この手法を好む可能性は十分にあります。



次に来るもの（静的S3コンテンツ）については、CORSをアクティブにする必要もあります。 簡単ですが、いくつかのステップで行われます。 API Gatewayチームはこのプロセスを引き続き簡素化するため、ここでの指示をすぐに繰り返さないようにするために（まもなく期限切れになる可能性があります）、 ドキュメントを参照します。



[このAPIをデプロイ]ボタンをクリックします。 これで、サイトを作成する準備がすべて整いました！



-, 2: Amazon S3



: Javascript- S3, :

 var ENDPOINT = 'https://fuexvelc41.execute-api.us-east-1.amazonaws.com/prod/ImageProcessingService'; angular.module('app', ['ui.bootstrap']) .controller('MainController', ['$scope', '$http', function($scope, $http) { $scope.loading = false; $scope.image = { width: 100 }; $scope.ready = function() { $scope.loading = false; }; $scope.submit = function() { var fileCtrl = document.getElementById('image-file'); if (fileCtrl.files && fileCtrl.files[0]) { $scope.loading = true; var fr = new FileReader(); fr.onload = function(e) { $scope.image.base64Image = e.target.result.slice(e.target.result.indexOf(',') + 1); $scope.$apply(); document.getElementById('original-image').src = e.target.result; //   ! $http.post(ENDPOINT, angular.extend($scope.image, { operation: 'resize', outputExtension: fileCtrl.value.split('.').pop() })) .then(function(response) { document.getElementById('processed-image').src = "data:image/png;base64," + response.data; }) .catch(console.log) .finally($scope.ready); }; fr.readAsDataURL(fileCtrl.files[0]); } }; }]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

HTML- ( ) :

 <!DOCTYPE html> <html lang="en"> <head> <title>Image Processing Service</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,700"> <link rel="stylesheet" type="text/css" href="main.css"> </head> <body ng-app="app" ng-controller="MainController"> <div class="container"> <h1>Image Processing Service</h1> <div class="row"> <div class="col-md-4"> <form ng-submit="submit()"> <div class="form-group"> <label for="image-file">Image</label> <input id="image-file" type="file"> </div> <div class="form-group"> <label for="image-width">Width</label> <input id="image-width" class="form-control" type="number" ng-model="image.width" min="1" max="4096"> </div> <button type="submit" class="btn btn-primary"> <span class="glyphicon glyphicon-refresh" ng-if="loading"></span> Submit </button> </form> </div> <div class="col-md-8"> <accordion close-others="false"> <accordion-group heading="Original Image" is-open="true"> <img id="original-image" class="img-responsive"> </accordion-group> <accordion-group heading="Processed Image" is-open="true"> <img id="processed-image" class="img-responsive"> </accordion-group> </accordion> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.min.js"></script> <script type="text/javascript" src="main.js"></script> </body> </html>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

, CSS:

 body { font-family: 'Open Sans', sans-serif; padding-bottom: 15px; } a { cursor: pointer; } /** LOADER **/ .glyphicon-refresh { -animation: spin .7s infinite linear; -webkit-animation: spin .7s infinite linear; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

… S3:







URL S3 , ., “http://image-processing-service.s3-website-us-east-1.amazonaws.com/”. URL — :











API Gateway Lambda- , URL. . , , !

, API. : « HTTPS-» Lambda, POST , API Gateway:

 { "options": { "host": "fuexvelc41.execute-api.us-east-1.amazonaws.com", "path": "/prod/ImageProcessingService", "method": "POST" }, "data": { "operation": "getSample" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

. : Lambda- Amazon DynamoDB. Lambda, « »:

 { "operation": "unit", "function": "HTTPSInvoker", "resultsTable": "unit-test-results", "testId": "LinuxConDemo", "event": { "options": { "host": "fuexvelc41.execute-api.us-east-1.amazonaws.com", "path": "/prod/ImageProcessingService", "method": "POST" }, "data": { "operation": "getSample" } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

, , . Lambda, « »:

 { "operation": "load", "iterations": 100, "function": "TestHarness", "event": { "operation": "unit", "function": "HTTPSInvoker", "resultsTable": "unit-test-results", "testId": "LinuxConLoadTestDemo", "event": { "options": { "host": "fuexvelc41.execute-api.us-east-1.amazonaws.com", "path": "/prod/ImageProcessingService", "method": "POST" }, "data": { "operation": "getSample" } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

:











, , .. -, API Gateway HTTP, . , - DynamoDB, .



まとめ



, , . «» , , , - : , , API, . !