[レポート]サーバレスな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サービスのインタフェースをユーザーに提供します。また、このアプリケーションは、ユーザーがサービスに登録してログインするための機能も提供します。

ワークショップ資料

スライド

ワークショップ

レポート

ワークショップ概要

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

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

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

(※画像引用:https://webapp.serverlessworkshops.io/)

0. Setup

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

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

  • us-west-2(Oregon)
  • us-east-2(Ohio)
  • us-east-1(Northern Virginia)

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

1. Static Web Hosting

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

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

手順どおりに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でサーバレスアプリケーションの構築をやってみたい方におすすめのワークショップです。