AWSでウェブアプリケーション（クイズゲーム）作ってみた

はじめに

こんにちは！クラウド活用推進担当、新人の濱岡です。

3回目のブログ投稿です。よろしくお願いします！

今回のブログでは、AWSを活用してサーバレスなウェブアプリケーションの作成しましたのでその過程を紹介します！

AWS公式のハンズオンサイト【基本的なウェブアプリケーションを構築する】の応用編として独自のアプローチを加えたウェブアプリケーションを構築しました。

AWS歴がまだまだ浅いので、初めて使用するサービスも多くありました。

この記事が、同じような立場の方々にとって少しでも参考になれば嬉しいです。

目次

1. はじめに
2. 目次
3. アプリ概要
4. 使用するAWSサービス
5. アプリケーションのアーキテクチャ
6. 構築ステップ
7. 実践
   ・ステップ1：S3にクイズデータを保存する
   ・ステップ2：Lambda関数を作成し、クイズデータを取得する
   ・ステップ3：DynamoDBでテーブルを作成する
   ・ステップ4：Lambda関数を作成し、DynamoDBテーブルにデータを記録する
   ・ステップ5：Lambda関数を作成し、DynamoDBテーブルからランキングを作成する
   ・ステップ6：API Gatewayを作成し、APIをデプロイする
   ・ステップ7：ウェブページを作成し、APIを使用してLambdaと接続する
   ・ステップ8：クイズゲームをプレイ
8. まとめ
9. 参照
10. ライセンス情報

アプリ概要

今回はクイズゲームを作成していきたいと思います。

全10問の五択クイズゲームです。ランキング要素もつけたいと思います。

使用するAWSサービス

・AWS Amplify

ウェブアプリのバックエンドの構築、ホスティング、デプロイを担います。

・AWS Lambda

クイズデータの取得、スコアの記録、ランキング結果の取得の関数を作成します。

・Amazon API Gateway

ウェブページとLambda関数をつなげる役割を担います。

・Amazon DynamoDB

クイズゲームをプレイしたユーザのユーザ名とスコアを記録します。

・Amazon S3

クイズデータを保存します。

・AWS IAM

ロールを作成し、アクセス許可を管理します。

アプリケーションのアーキテクチャ

構築ステップ

1. S3にクイズデータを保存する
2. Lambda関数を作成し、クイズデータを取得する
3. DynamoDBでテーブルを作成する
4. Lambda関数を作成し、DynamoDBテーブルにデータを記録する
5. Lambda関数を作成し、ランキングを作成する
6. API Gatewayを作成し、APIをデプロイする
7. ウェブページを作成し、APIを使用してLambdaと接続する
8. クイズゲームをプレイ

実践

ステップ1：S3にクイズデータを保存する

まずは、クイズデータをダウンロードします。

【quiz_data.json】（ライセンス情報）

次に、AWS S3のコンソール画面から、「バケットを作成」をクリックします。

バケット名(例：quiz-data-○○○○)を入力し、「バケットを作成」をクリックします。

※基本的にデフォルト設定のまま

作成したバケット名を選択し、先ほどダウンロードしたファイルをアップロードします。

ステップ2：Lambda関数を作成し、クイズデータを取得する

まずは、Lambdaコンソール画面から「関数の作成」をクリックします。

「一から作成」を選び、関数名(例：quizdata-get-func)を入力します。

ランタイムは「Python3.x」を選んでください。

アクセス権限を設定するため、赤枠の「IAMコンソール」をクリックします。

「ロールを作成」の画面になったら、

信頼されたエンティティタイプは「AWSのサービス」、ユースケースは「lambda」を選択し、「次へ」をクリックします。

検索窓に「AmazonS3ReadOnlyAccess」と入力し、ポリシーにチェックを入れて、「次へ」をクリックします。

ロール名（例：lambda-S3ReadOnly）を入力し、「ロールを作成」をクリックします。

lambda関数の作成画面に戻り、実行ロールは「既存のロールを使用する」、既存のロールは「lambda-S3ReadOnly（先ほど作成したIAMロール）」を選択し、「関数の作成」をクリックします。

次のコードをコピーし、lambdaの「lambda_function.py」に貼り付け、デプロイします。

※7行目のバケット名を変更してください。必要があれば、ファイル名も変更します。

※コードの詳しい説明は省略します。

「設定」タブを開き、「一般設定」＞「編集」からタイムアウトを「5秒」に設定し「保存」をクリックします。

「テスト」タブを開き、「テスト」をクリックします。（成功とでたらOK）

これでS3からクイズデータを取得することができるようになりました。

ステップ3：DynamoDBでテーブルを作成する

まずは、DynamoDBコンソール画面から「テーブルの作成」をクリックします。

テーブル名（例：quiz-score-db）とパーティションキー（例：username）を入力し、「テーブルの作成」をクリックします。

※テーブル設定は「デフォルト設定」のまま

ステップ4：Lambda関数を作成し、DynamoDBテーブルにデータを記録する

まずは、Lambdaコンソール画面から「関数の作成」をクリックします。

「一から作成」を選び、関数名(例：quiz-score-record-func)を入力します。

ランタイムは「Python3.x」を選んでください。

アクセス権限を設定するため、赤枠の「IAMコンソール」をクリックします。

ステップ2のIAMロール作成と同じ手順で進め、許可（ポリシー）を追加せずに「次へ」をクリックします。

ロール名（例：lambda-dynamo-connect）を入力し、「ロールを作成」をクリックします。

IAMコンソール画面から、作成したロールを選択し、「インラインポリシーを作成」をクリックします。

「JSON」タブに切り替え、次のテキストをコピー＆貼り付けし、「次へ」をクリックします。

ポリシー名（例：lambda-dynamo-connect）を入力し、「ポリシーの作成」をクリックします。

lambda関数の作成画面に戻り、実行ロールは「既存のロールを使用する」、既存のロールは「lambda-dynamo-connect（先ほど作成したIAMロール）」を選択し、「関数の作成」をクリックします。

次のコードをコピーし、lambdaの「lambda_function.py」に貼り付け、デプロイします。

※5行目のテーブル名を作成したものに変更してください。

※コードの詳しい説明は省略します。

「テスト」タブを開き、イベントJSONのエディタに次のテキストをコピー＆貼り付けし、「テスト」をクリックします。（成功とでたらOK）

※ステップ5のテストのため、下記のテキストで後2回テストをしてください。

dynamoDBコンソール画面で「項目を探索」＞「quiz-score-db（ステップ3で作成したテーブル）」をクリックし、入力したデータが確認できればOK

これでDynamoDBのテーブルにlambda関数からデータを書き込むことができるようになりました。

ステップ5：Lambda関数を作成し、DynamoDBテーブルからランキングを作成する

まずは、Lambdaコンソール画面から「関数の作成」をクリックします。

「一から作成」を選び、関数名(例：quiz-ranking-get-func)を入力します。

ランタイムは「Python3.x」を選んでください。

アクセス権限の実行ロールは「既存のロールを使用する」、既存のロールは「lambda-dynamo-connect（ステップ4で作成したIAMロール）」を選択します。

「関数の作成」をクリックします。

次のコードをコピーし、lambdaの「lambda_function.py」に貼り付け、デプロイします。

※コードの詳しい説明は省略します。

「テスト」タブを開き、「テスト」をクリックします。（成功とでたらOK）

これでDynamoDBのテーブルからランキングを作成することができるようになりました。

ステップ6：API Gatewayを作成し、APIをデプロイする

まずは、API Gatewayコンソール画面から「APIを作成」をクリックします。

APIタイプを選択の画面で「REST API」の「構築」をクリックします。

REST APIを作成の画面で「新しいAPI」を選択し、API名（例：quiz-game-API）を入力して「APIを作成」をクリックします。

リソースを2つ作成します。

「API」＞「リソース」＞「リソースを作成」を選択し、リソース名（例：quiz-data, score-ranking）の入力して「リソースを作成」をクリックします。

メソッドを作成します。

「/quiz-data」を選択し、「メソッドを作成」をクリックします。

メソッドタイプは「GET」、統合タイプは「lambda関数」、lambda関数は「quizdata-get-func（ステップ2で作成したlambda関数）」を選択し、「メソッドを作成」をクリックします。

※あとはデフォルト設定のまま

「/quiz-data」を選択し、「CORSを有効にする」をクリックします。

「Access-Control-Allow-Headers」の「GET」にチェックを入れて、「保存」をクリックします。

あと2つのメソッドを作成します。流れは同じです。

/score-ranking

メソッドタイプ：POST

統合タイプ：lambda関数

lambda関数：quiz-score-record-func（ステップ4で作成した関数）

CORS：有効

/score-ranking

メソッドタイプ：POST

統合タイプ：lambda関数

lambda関数：quiz-ranking-get-func（ステップ5で作成した関数）

CORS：有効

「APIデプロイ」をクリックし、新しいステージでステージ名（例：dev）を入力し、デプロイをクリックします。

次の画像の赤枠部分のURLをコピーして、メモ帳等に控えておきます。

これでウェブサイトとlambda関数を繋げる準備が整いました。

ステップ7：ウェブページを作成し、APIを使用してLambdaと接続する

まずは、下記のファイルをダウンロード＆編集します。

【index.txt】

【編集箇所】

ファイル拡張子を.htmlに変更

107行目、131行目、147行目のURLをステップ6で作成したAPI URLに変更

このとき末尾の"/"以降に気を付ける

編集した「index.html」をzip圧縮します。

AWS Amplifyコンソール画面で「すべてのアプリ」＞「新しいアプリを作成」をクリックします。

「Gitなしでデプロイ」を選択し、次へをクリックします。

アプリケーションの名前（例：QuizGame）を入力し、「index.zip」をアップロードしたら、保存してデプロイをクリックします。

ステータスが「デプロイ済み」になれば、成功です。

ステップ8：クイズゲームをプレイ

「デプロイされたURLにアクセス」をクリックします。

ゲーム開始です。クイズを10問回答すると結果とランキングが表示されます。

まとめ

AWS Amplifyを使用してサーバレスなウェブアプリケーションを構築してみました。

最初は構成や設定を理解するのに時間がかかりましたが、構築のハードルは低いかなと感じます。

さまざまな種類のWebサイトを試したり、公開する際に、Amplifyを活用してみてはいかがでしょうか。

参照

AWS公式ハンズオンサイト:基本的なウェブアプリケーションを構築する

ライセンス情報

クイズデータ引用元：https://sites.google.com/view/project-aio/dataset

当ブログで使用している「quiz_data.json」の引用元となる「第1回コンペティション 開発用データ1」は、株式会社キュービックおよびクイズ法人カプリティオに依頼して作成されたクイズ問題です。

このデータは、クリエイティブ・コモンズ 表示-継承 4.0 国際 ライセンス（CC BY-SA 4.0）に基づき提供されています。

なお、当ブログで掲載しているデータは、元のデータを改変したものであることを明記いたします。

改変後のデータについても、クリエイティブ・コモンズ 表示-継承 4.0 国際 ライセンスに基づき、元のデータの出典を明示し、ライセンス条件を遵守しております。