はじめに
本記事は、AWSの練習を兼ねて簡易なWebアプリケーションを作成した備忘録です。フォームから送信したテキストをLambdaで処理するようなシステムを作ります。
複雑なテキスト処理の実装はしませんが、今後の記事で感情分析などの機械学習を用いた処理を追加しようと思います。
作りたいもの
ブラウザ上で入力したテキストを処理して、処理結果を返すAPIを作成します。
上図のように、フォームにテキストを入力して送信すると、Lambda関数で定義した処理が実行され、処理結果が表示されるような仕組みを作成します。
ネットワーク図は以下の通りです。API GatewayとLambdaを使用します。
なお、ネットワーク図の作成にはこちらの記事を参考にしました。
前提知識
今回使用するAWSの機能について簡単に述べます。
Amazon API Gateway
API Gatewayは、APIの作成・管理が可能なフルマネージドサービスです。HTTP API または REST API を使用して RESTful API を作成することができますが、APIの種類によって実現できる機能は異なります。RESTとREST APIについては、こちらの記事がわかりやすいです。
また、API Gatewayに関する詳細な情報は、公式サイトやこちらの解説記事がわかりやすいです。
API Gatewayは、クライアントからリクエストを受け取ってバックエンドに渡し、バックエンドからのレスポンスをクライアントに返します。なお、本記事のバックエンドはLambdaになります。
AWS Lambda
AWS Lambdaは、サーバーレスのコンピューティングサービスです。ユーザ自身でサーバーのプロビジョニングや管理をする必要なく、事前に作成しておいたプログラムをイベント駆動で実行することができます。イベントの例を挙げると、Amazon API Gateway 経由のHTTP リクエストやAmazon S3バケット内のオブジェクト変更などです。また、実行するプログラムは、Go、Java、Python（以下略）等の複数の言語で記述することができます。
AWSLambdaに関する詳細な情報は、公式サイトやこちらの解説記事がわかりやすいです。
作ってみる
フロント
フロントの実装ですが、以下の記事を参考にして作成しました。
HTMLファイルからPOSTでJSONデータを送信する
なお、実際に使用したコードは以下の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMLファイルからPOSTでJSONデータを送信する</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#response").html("Response Values");
$("#button").click( function(){
// ここのURLはAPIのデプロイ時に表示されるURL（後述）に差し替える
var url = "https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev";
var JSONdata = {
"key1": $("#text").val()
};
alert(JSON.stringify(JSONdata));
$.ajax({
type : 'post',
url : url,
data : JSON.stringify(JSONdata),
contentType: 'application/json',
dataType : 'json',
scriptCharset: 'utf-8',
success : function(data) {
// Success
alert("success");
alert(JSON.stringify(data));
$("#response").html(JSON.stringify(data));
},
error : function(data) {
// Error
alert("error");
alert(JSON.stringify(data));
$("#response").html(JSON.stringify(data));
}
});
})
})
</script>
</head>
<body>
<h1>HTMLファイルからPOSTでJSONデータを送信する</h1>
<p>入力テキスト: <input type="text" id="text" size="30" placeholder="テキストを入力してください"></p>
<p><button id="button" type="button">送信</button></p>
<textarea id="response" cols=120 rows=10 disabled></textarea>
</body>
</html>
Lambda関数の作成
コンソールにサインインしてLamnbdaのページを開きます。
そして、「関数の作成」ボタンをクリックします。
今回は既に用意されているサンプルコードを使用することにします。設計図の使用を選択して、設計図名は「Hello world function」のPythonを選択します。また、実行ロールはデフォルトの設定とします。
そして、ページ下部にある「関数の作成」ボタンを押します。
関数の作成に成功すると以下の画面が表示されます。
ページ下部のコードタブのコード欄には、実行したいコードを書くことができます。
テストタブからLambda関数の処理をテストすることができます。イベントJSONはlambda_hadler関数の引数のeventに対応しています。
実行に成功すると、所要時間や課金期間、ログとともに実行結果を確認することができます。
また、初回の関数実行には時間がかかります（コールドスタート）。これはLambdaの関数インスタンスの生成に時間がかかっているためです。二回目以降の実行では初回と比べて所要時間は短くなります。実行されていないインスタンスは一定時間後に消失してしまうため、サービス開発等でLambdaを利用する際には注意が必要です。
APIの作成
次に、API Gatewayのページを開きます。「APIを作成」のボタンをクリックします。
すると、APIのタイプを選択する画面に移ります。
APIタイプが複数ありますが、ここでは上から三つ目のREST APIを構築します。
設定はデフォルトのままでAPIの作成を行います。
アクションタブからメソッドの作成を選び、POSTを選択します。
するとセットアップ画面が表示されます。統合タイプにLambda関数を選び、先ほど作成したLambda関数を選択します。保存ボタンを押すと確認画面が表示されるので、OKを押して保存します。
次に、アクションタブからCORS（Cross-Origin Resource Sharing）の有効化を行います。設定はデフォルトのままで保存します。
CORSに関する話はこちらの記事がわかりやすいです。CORSを有効化することにより、先ほど作成したWebページからAPI Gatewayで作成したAPI（異なるオリジンにある）を動的に呼び出すことができるようになります。
次に、左側タブのゲートウェイのレスポンスを選択し、DEFAULT 4XXを選び、編集ボタンを押します。
レスポンスヘッダーに以下を追加します。
Access-Control-Allow-Origin: '*'
IT用語辞典によると、
Access-Control-Allow-Originはサーバからクライアントへの応答であるHTTPレスポンスで用いられるヘッダ項目の一つで、複数のサーバにまたがってコンテンツを組み合わせる「CORS」（Cross-Origin Resource Sharing：クロスオリジンリソース共有）を許可するかどうかを通知するのに用いられる。
と説明されています。
Access-Control-Allow-Origin: *と設定すると、すべてのオリジンからのリクエストを許可します。
保存を押して設定は完了です。
最後にアクションタブからAPIのデプロイを行います。ここでは、[新しいステージ]を選択しステージ名を決めてデプロイします。
デプロイが完了すると、画面上部にURLが表示されます。このURLでvar url = "https://xxxxxx.execute-api.ap-northeast-1.amazonaws.com/dev";の""内を書き換えます。
実行結果
無事APIを作成することができたので、実際にWebページからAPIを叩いてみます。
正常に動いていることが確認できました。
まとめ
POSTでjsonデータを送信し、API Gateway経由のリクエストがあったときに作成したLambda関数を呼び出し、実行結果をブラウザ上で確認するというシンプルなシステムを作成しました。
最小限の機能しか備えていませんが、ECRに独自のコンテナイメージをプッシュしてLambdaと連携させる等工夫のしどころはいろいろあると思うので、今後の記事でそのあたりにも触れていこうと思います。