第４回：LambdaとApiGatewayでRestAPIを構築して簡単なSPAを公開してみる¶

12/8(水)開催予定

第３回目ではS3とCloudFrontでシンプルなindex.htmlを公開してみました。
今回はSPA（SinglePageApplication）のフロントエンド側リソースをS3＋CloudFrontで配信します。
バックエンドをApiGateway＋LambdaでRestAPIを構築して公開し、フロント側のSPAからHTTPリクエストを行います。
LambdaからはデータベースとしてDynamoDBを使用してデータを保存・参照します。

簡易なSPAをAWSのサーバレスアーキテクチャの構成を使って構築してみます。

SPAの実装にはReactというライブラリを使用します。
Reactを使ったSPAの開発はNode.jsがインストールされている環境があれば普通にローカルで可能ですが、今回は環境構築の手順を省くためにCloud9という開発環境を使います。

※今回のようなアプリケーションのデモを構築する場合「AWS Amplify」というフレームワークを使うのがもっともてっとり早いかもしれませんが、今回は使いません。

第３回目と同様にリージョンはバージニア北部(us-east-1)を使うことにします。

• Cloud9環境の作成
• サンプルWebアプリケーションの構築
• バックエンドリソースの構築
• SPAアプリケーションの動作確認
• SPAアプリケーションをCloudFrontで公開
• リソース削除
  • CloudFrontディストリビューションの削除（無効→無効化が反映されるまで待ってから削除）
  • CloudFrontのOAI(OriginAccessIdentity)の削除、S3バケットのバケットポリシー（OAIにアクセス許可する設定）の削除
  • CloudFormationスタックの削除（Lambda、ApiGateway、DynamoDBのリソースが削除されます）
  • IAMRoleの削除
  • S3バケットの削除
  • Cloud9環境の削除

関連リンク¶

Amazon DynamoDB
Cloud9

コスト¶

無料枠内で利用するので、コストはかかりません。

S3の無料枠
CloudFrontの無料枠
Lambdaの無料枠
DynamoDBの無料枠

準備するもの¶

• ご自身のAWSアカウント（必須）