[レポート] テーマパーク用のサーバーレスWebアプリを構築する #SVS201 #reinvent

2019.12.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

CX事業本部@札幌の佐藤です。

ラスベガスで開催されている re:Invent 2019 ワークショップ「Build a serverless web app for a theme park」のレポートです。

ワークショップ概要

Innovator Island is a popular theme park that’s rolling out a mobile app for thousands of visitors. The app provides wait times, photo opportunities, notification alerts, and language translation for visitors who need it. However, the lead developer has disappeared, and in this workshop, you’re part of a development team that’s assembling the pieces left behind. Learn and practice building a scalable serverless web app with limited development resources.

イノベーターアイランドは人気のあるテーマパークで、何千人もの訪問者にモバイルアプリを提供しています。 このアプリは、必要な訪問者に待ち時間、写真撮影の機会、通知アラート、および言語翻訳を提供します。 ただし、主任開発者は姿を消しました。このワークショップでは、あなたは残されたピースを組み立てる開発チームの一員です。 開発リソースが限られているスケーラブルなサーバーレスWebアプリの構築を学び、実践します。

ワークショップURL

以下のURLから、自分のAWSアカウントを使って、ワークショップを体験することができます。

cloud9 setup

Innovator Island Workshop

レポート

ワークショップのテーマ

このワークショップのテーマは、「Innovator Island」という遊園地を舞台にして、遊園地のゲストが使うWebアプリケーションをサーバーレスで開発するというものです。このWebアプリケーションは、遊園地の地図上にアトラクションとその待ち時間を表示する機能やカメラの写真をアップロードすることで、背景をアレンジした写真をダウンロードすることができる機能などがあります。アプリケーション自体はできているため、それをAWS上にデプロイするという流れです。

AWSサービス

以下のAWSサービスを使用します。

  • デプロイ & 開発者ツール
    • AWS Amplify
    • AWS CodeCommit
    • AWS Cloud9
  • バックエンドサービス
    • AWS Lambda
    • Amazon API Gateway
    • Amazon S3
    • Amazon DynamoDB
    • Amazon SNS
    • AWS IoT Core

アーキテクチャ

以下のようなアーキテクチャをデプロイします。

待ち時間表示

ライドフォト(写真をアップロードしたら、Innovator Island風にアレンジされた写真がダウンロードできるようになる)

感想

遊園地の待ち時間表示Webアプリをベースにサーバーレスを学ぶことができます。Webアプリ自体もVue.jsで作られたSPA(シングルページアプリケーション)でそのアプリケーションをAWS Amplifyを使ってホスティング、バックエンドは、API Gateway→Lambdaはもちろんのこと、SNS→Iot Coreを使った双方向通信など盛り沢山な内容でした。