[レポート]サーバレスなRide-Sharing Webアプリケーションを構築するハンズオン #SVS203 #reinvent

本ブログはAWS re:Invent 2019のワークショップ『Build a serverless ride-sharing web application』のレポートです。

現地でワークショップに参加はできていませんでしたが、ワークショップの資料が公開されていたので実際にやってみました。

セッション概要

In this workshop, you deploy a simple web application that lets users request unicorn rides from the Wild Rydes fleet. The application presents users with an HTML-based user interface for indicating the location where they would like to be picked up and interfaces on the backend with a RESTful web service to submit the request and dispatch a nearby unicorn. The application also provides facilities for users to register with the service and log in before requesting rides.

このワークショップでは、ユーザーがWild RydesにユニコーンをリクエストできるようにするシンプルなWebアプリケーションをデプロイします。このアプリケーションは、ピックアップする場所を示すHTMLベースのユーザーインタフェースと、リクエストを送信して近くのユニコーンを発送するRESTful Webサービスのインタフェースをユーザーに提供します。また、このアプリケーションは、ユーザーがサービスに登録してログインするための機能も提供します。

ワークショップ資料

スライド

• SVS203: Build a serverless ride-sharing web application

ワークショップ

• Wild Rydes :: My AWS Workshop

レポート

ワークショップ概要

このワークショップでは、サーバレスなWebアプリケーションの構築を一通り体験できます。

Wild Rydes というユニコーンを配送するサーバレスアプリケーションを、Amplify Consoleで作ります。

フロントになるSPAをAmplifyで作成し、ユーザー認証はCognitoで実現し、バックエンドのAPIはAPI Gateway + Lambda + DynamoDBで作成していきます。

（※画像引用：https://webapp.serverlessworkshops.io/）

0. Setup

ワークショップの手順では、AWS Event Engineへログインするよう書いてありますが、今回は個人のAWSアカウントを利用します。 自分が持っているAWSアカウントへログインしてください。

ログインできたら、リージョンを次の３つから選択してください。私はus-west-2（Oregon）で実施しています。

• us-west-2（Oregon）
• us-east-2（Ohio）
• us-east-1（Northern Virginia）

次に、開発統合環境として利用するCloud9を構築します。
Cloud9の構築手順は、先日ブログを書いたのでこちらをご参照ください。

• Cloud9からIAM Roleの権限でAWS CLIを実行する ｜ Developers.IO

1. Static Web Hosting

まず最初にAmplify Consoleを利用して、SPAのWebアプリケーションのフロントとして使用する静的Webサイトを構築します。

Amplify ConsoleはWebアプリを公開する環境を簡単にセットアップできるサービスです。 詳しくは弊社ブログをご参照ください。

• 新サービス「AWS Amplify Console」登場！簡単3ステップでWebアプリのCI/CD環境を構築！ #reinvent ｜ Developers.IO

手順どおりにAmplify Consoleでデプロイすると、こんな感じの楽しいトップページを構築できます。

本章の作業を実施することで、Amplify Consoleですごく簡単に静的WebサイトのCI/CDを構築できることが学べます。

2. User Management

次にユーザーのログイン機能を作っていきます。

Amplify CLIを使って、Cognitoユーザープールでユーザー管理ができるようにします。

注意点があります。ワークショップの手順を進めていくと、私の環境では amplify init コマンド実行時に次のようなエラーが発生しました。

エラーメッセージを読んで対応していくと、私の環境では追加で次の作業が必要でした。

• デフォルトプロファイルでのリージョンの指定（今回はus-west-2（Oregon）で実施していたため、us-west-2で指定）
• クレデンシャルキー用のファイルを作成（空ファイルで問題ありません）

この対応作業として、amplify init コマンド実行前に次のコマンドを実行しておきました。

$ echo 'region = us-west-2' >> ~/.aws/config
$ touch ~/.aws/credentials

手順どおりにAmplify Consoleでデプロイすると、こんな感じのログイン画面が構築できます。

本章の作業を実施することで、AmplifyとCognitoを利用して簡単にユーザー管理とログインのためのクレデンシャルキーを取り扱えることが学べます。

3. Serverless Backend

次にバックエンドのLambdaを作っていきます。

ユーザーからユニコーンのリクエストがあったときに、リクエストレコードをDynamoDBに記録するLambdaを実装します。

このLambdaは、API Gatewayを使ってブラウザから実行できるようにする想定です。API Gatewayは次の章で構築します。

4. RESTful APIs

最後にバックエンドのRESTful APIを作ります。

認証はCognitoに、コンピューティングはLambdaに任せて、サーバレスなAPIをAPI Gatewayで構築します。

API Gatewayを構築する際には、CORSを有効化するのを忘れないようにしてください。 私はこれの有効化を忘れていて、一時間ほどうまくいかなくて悩みました。
構築の際に忘れていた場合は、コンソールのここから構築後に変更できます。

手順どおりにAPI Gatewayを構築して、Amplify Consoleでデプロイすると、こんな感じのユニコーン配達サービスが構築できます。

9. Clean Up

これでワークショップは終了です。
ワークショップが終わった後は無駄にお金がかからないよう、次のAWSリソースを削除していきます。

• Module 4
  • API Gateway
• Module 3
  • Lambda
  • IAM Role
  • DynamoDB
• Module 2
  • Cognitoユーザープール
• Module 1
  • Amplify Console
  • CodeCommit
• CloudWatch Logs
• Cloud9

不要であれば、Cloud9用に作成したIAM Roleも削除してください。

この手順通りAWSリソースを削除すると、Amplify CLIで作ったCloudFormationスタックが削除されずに残る可能性があります。不要であればこれも削除してください。

感想

サーバレスなアプリケーションの構築をひととおり試してみることができました。

Amplify Consoleを利用することでCI/CD環境も合わせて構築できるので、デプロイ作業も簡単です。

AWSでサーバレスアプリケーションの構築をやってみたい方におすすめのワークショップです。