AWSを使ってサーバレスWebアプリケーションを10分程度で作る方法

この記事はMisoca+弥生+ALTOA Advent Calendar 2018 12日目の記事です。

こんにちは、弥生のおおはしです。Webアプリケーションエンジニアとしてフロントエンド・バックエンドを担当しています。最近はオンプレからAWSへのデータベース移行なんかもやっています。

今回は、サーバレスWebアプリケーションをAWSを使って作成する方法を紹介します。

なぜサーバレス?

サーバレスとはサーバーを意識する必要が(比較的)要らないアプリケーションアーキテクチャのことです。 (『サーバーを使わない』ではありません。)

つまり、アプリケーションをサーバレスで開発することは、サーバー管理=運用にかける時間を削減して開発に注力できるという大きなメリットになります。

具体的には下記のような作業を減らすことができます。

  • サーバーへの各種パッケージインストール/依存関係管理
  • コードベースでのWebサーバソフトウェア(nginxやApache)の設定
  • ビルドパッケージなどのデプロイ操作

近年DevOps開発(運用と開発を一つのチーム内で行う開発)が増えた背景には、サーバーレスを実現するためのサービスの増加があると言われるほどです。

ただし、裏で色々とやってくれる反面、柔軟性に制限があるというデメリットもあるので注意が必要です。

実現方法

今回は下記構成の通り、AWSのLambda+API Gatewayの2サービスで簡単なサーバレスWebアプリケーションを実現します。 f:id:ym_AdventC:20181211145756j:plain

Lambdaとは

コンピューティングサービスです。では曖昧すぎるので簡単に言い換えると、他のAWSサービスをプログラミングで自由に操作することができるサービスです。
例えばDynamoDBにデータを登録したりS3からファイルを取得したりSQSにキューを登録したりとなんでもできます。
関数という単位でプログラムを作るので、今回は「HTMLを返却する関数」を作成します。

API Gatewayとは

APIのホスティングサービスです。
APIのI/Oと処理内容を設定すれば直ぐに利用可能なAPIを作成してくれます。
今回は処理内容を上記の「HTMLを返却するLambda関数」に設定し、レスポンスのcontent-typeをtext/htmlにすることでブラウザにHTMLを返却するWebアプリケーションを実現します。

因みに・・・

画像を表示したり、データストアを利用するようなしっかりしたアプリケーションを作る場合は下記の構成図のようにS3やDynamoDBが必要です。今回は割愛するので興味がある方はココココなどを参考にしてください。 f:id:ym_AdventC:20181211150630j:plain

作業手順

Lambdaでの関数作成方法

1.まずはAWSコンソールのLambda画面にいき、右上のオレンジボタン「関数の作成」を押下
2.適当な「関数名」を入力し、「ランタイム」で任意のプログラミング言語を選択し、「既存のロール」で任意のロールを作成(ロールはIAMで適当なものを作成してください。)
f:id:ym_AdventC:20181211161317j:plain 3.画面中部の「関数コード」部にエディタが表示されるので、下記コードを貼り付け

exports.handler = function(event, context){
    context.done(null, "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"><title>12/12</title></head><body><span  style=\"font-size : 80pt\">今日は平成最後のバッテリーの日</spam></body></html>")
}

API GatewayでのAPI作成方法

API Gatewayは設定項目が多くLambdaに比べてとっつきにくいですが、最低限の機能の実現であれば複雑な設定は不要です。

1.まずはAWSコンソールのAPI Gateway画面にいき、左上の青ボタン「APIの作成」を押下
2.適当なAPI名を入力し、エンドポイントタイプで「リージョン」を選択し、APIを作成
f:id:ym_AdventC:20181211160328j:plain 3.作成されたAPIの設定画面に遷移されるので、アクション>メソッドの作成でメソッドを作成
f:id:ym_AdventC:20181211160605j:plain 4.作成するメソッドを「GET」にしてチェックボタンを押下し、統合タイプに「Lambda関数」を選択、Lambda関数にさきほど作成したLambda関数名を入力して保存(メッセージボックスが表示されますが、OKで問題ありません。)
f:id:ym_AdventC:20181211162811j:plain 5.統合レスポンス>マッピングテンプレートでデフォルトの「application/json」を削除し、新たにcontent-typeが「text/html」でテンプレートが「$input.path('$')」のテンプレートを追加
6.メソッドレスポンス>200のレスポンス本文にコンテンツタイプが「text/html」でモデルがEmptyのレスポンスを設定
7.左上のアクション>APIのデプロイでメソッドを作成>デプロイされるステージで「新しいステージ」を選択してステージ名に任意の名前を入力してデプロイ
f:id:ym_AdventC:20181211175906j:plain 8.デプロイが完了すると画面上部にエンドポイントURLにアクセス

以上で作業は完了です。 画面は表示されましたか?

まとめ

今回は最低限の画面作成でしたが、10分程度でゼロからWebサイトの表示まで行うことができました。
上でも書いた通りサーバレスアプリケーションには柔軟性に制限がありますが、この手軽さは大きな魅力だと思います。
アプリケーションの規模や開発プロセス、メンバーのスキルなどを考慮してベストであればぜひ利用してみてください。

注意

AWSサービス全般で言えることですが、利用料金については十分ご注意ください。 今回作成したAPIはグローバルに公開されるので、誤ってURLをネット上に公開してアクセスされるとAWSから多額の請求をされる可能性があるので、取り扱いには注意しましょう。

次回予告

次回は@kaito_xgurxさんによる「HASHI-YASUME」の予定です!

Appendix

AWSを使った静的サイトの簡単な作り方

会社HPなどの完全に静的なサイトであればS3でもっと簡単に実現可能です。 詳しくはこちらなどを参考にしてください。