AWSサーバレスアーキテクチャでSPAを実装する（1）～SSLを経由してブラウザからLambda APIへアクセスするまでの下準備

サーバレスアーキテクチャによるアプリケーション開発実践入門 第2回

　本連載では、AWSを利用したSPA（Single Page Application）の開発を通じて、サーバレスアーキテクチャの考え方を知っていただき、Webアプリケーションとして作成していく際にどのような構成を取ればよいのか、開発環境やテストなどはどのように行えばよいか、実際のコードを交えながら解説していきます。今回からは、JavaScriptのブラウザ向けフレームワークにAngularを使い、AWSのサーバレスアーキテクチャ向けに用意された各種機能を使いながら、簡単な掲示板を作ることをゴールにします。

本連載で作るSPAのゴール

　開発する掲示板は以下のようなイメージです。

• スレッド一覧画面
  • スレッドの一覧画面で、今回のアプリケーションのトップページとなります
  • スレッドの一覧と他の画面へのリンクを持ちます
  • サインインしていなくてもアクセスできます

• スレッド詳細画面
  • スレッドの詳細とそのスレッドに対するコメントの一覧です
  • サインインしていなくてもアクセスできますが、コメントを投稿するにはサインインが必要です

• サインアップ画面
  • ユーザ登録を行うための画面です

• サインイン画面
  • 登録したユーザでサインインするための画面です

• スレッド作成画面
  • スレッドを作成するための画面です
  • サインインしなければアクセスすることができません

　第2回から第4回では、以下の内容を扱っていきます。

第2回

　第2回では、サーバレスSPAで最低限必要になる、以下2つの仕組みを整えていきます。

• S3＋CloudFrontとの連携
• API GatewayでSSLを経由する

　S3＋CloudFrontの組み合わせでは、簡単かつ安価に静的コンテンツからなるWebサイトを公開することができるため、既にこの組み合わせでWebサイトを公開した経験のある方も多いかと思います。

　今回作るアプリケーションでは、そこに留まることなく、サーバー側のAPIからデータを取得したり、データを登録することになります。そのため、第2回では、SSLを経由してAPIにアクセスできるところまでを目標にします。

第3回

　第3回では、ブラウザ上で動作しているSPAとAWS Lambda間で通信をする際に必要となる、認証周りの仕組みのうち、以下2つの仕組みを利用してログイン及びログアウトの機能を作成していきます。

• CookieやCredentialなどの認証方法
• Amazon Cognitoとの連携

　AWS Lambdaを利用したCookieやCredentialを利用したAPI通信を実現している例は少なく、また、サーバレスアーキテクチャの性質上、別途認証サーバーを作成するのはナンセンスです。

　そのため、第3回では、Amazon Cognitoを利用して認証の仕組みを構築していきます。また、セキュリティの観点から、CookieやCredentialの仕組みや設定についても考えていきます。

第4回

　第4回では、さらにもう一歩踏み込み、データの永続化機能を扱います。

• DynamoDBやElasticsearch、ORMなど、データの保持方法
• DataMapperの必要性と実装例

　ログインできるウェブアプリケーションを作っても、実際にデータを読み書きできないと、本来の力の半分も発揮できていないと言えるでしょう。

　第4回では、RDBMSではなく、サーバレスアーキテクチャ向けのKVMとされるDynamoDBや、大量のデータを検索／分析可能な分散型検索エンジンであるElasticsearchを用いたデータの永続化機能を実装していきます。

　さらに、第4回ではこれら複数のストレージを透過的に扱うため、DataMapperの実装例を紹介します。