この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
本ブログは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アカウントへログインしてください。
ログインできたら、リージョンを次の３つから選択してください。私は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でサーバレスアプリケーションの構築をやってみたい方におすすめのワークショップです。
16
