[レポート] 15分以内にデータベースを使用したフルスタックのWebアプリケーションを作成する #Workshop #DAT330 #reinvnet 2019

特集

梶原大使

2020.01.17

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

AWS事業本部の梶原@福岡オフィスです。
「15分以内にデータベースを使用したフルスタックのアプリケーションを作成する」ワークショップ #DAT330-R の内容が公開されており、実際にやってみましたので内容、手順などをご紹介します。

やってみた感想ですがCloudFormation一撃でデモサイトを作成してみるになるかと思います。

なお、本ワークショップで作成する本屋さんのサイトが公開されていますので、どのようなものが作成されるか気になる方は下記のデモサイトにアクセスしてみてください。どのようなサイトをつくるのかイメージできると思います。（デモサイトは予告なく終了する可能性はありますが、その場合は本ワークショップの内容を実施すれば同じものが作成されると思います）

公開されているGithubのリポジトリとプレゼンテーション資料からやってみた内容となりますので実際、re:Inventで行われたワークショップとは異なる部分もあるかと思いますがあらかじめ、ご了承ください
ちなみに、CloudFormationでのスタック作成＆リソース作成は15分程度になりますが、ワークショップ自体の各工程を実際にやってみたら2時間～1日程度かかりましたのでこちらもご承知おきください。

Workshop 概要

DAT330-R - [REPEAT] Build full-stack apps in 15 minutes or less with AWS databases https://www.portal.reinvent.awsevents.com/connect/sessionDetail.ww?SESSION_ID=95815

AWSフルスタックテンプレートを使用すると、数回クリックするだけでWebアプリケーションを起動して実行し、それをカスタマイズして旅行予約ツールからエンタープライズSaaSアプリケーションまでのアプリケーションを作成できます。 AWS CloudFormationテンプレートは、データベース、認証、CRUD API、モニタリングなど、必要なすべてのインフラストラクチャを自動的に構築します。 このワークショップでは、両方のアプリケーションを起動し、独自のアプリケーションにします。 また、私たちが行ったアーキテクチャ上の決定と、フルスタックアプリケーションを数分で起動して実行する方法についても学びます。

ワークショップ資料

DEMO サイト(Bookstore Demo)

※注意 メールアドレスはMFAのコードが届きますので有効なメールアドレスを使用する必要がありますが、パスワードは他のサイトと同じものは共用しないようにご注意ください。

https://d2h3ljlsmzojxz.cloudfront.net/

  1. サインアップ（メールアドレス、パスワードを入力）
  2. メールで認証コードが届くのでサインアップの画面で入力
  3. サインイン（メールアドレス、パスワードを入力）
  4. 好きな本を選んでカートに追加(Add to Cart)
  5. 本を買ってみる(Checkout) （デモなので課金はされません）
  6. 本を検索してみる(Search)

など、サイトにアクセスし、作成するサイトの雰囲気を確認してみてください。

目次

  • Overview
  • Part 1: AWS Full-Stack Template
  • Part 2: Extensions
  • Part 3: AWS Bookstore Demo App
  • Part 4: Cleanup!
  • Part 5: Build on!

Overview：全体概要

  • このワークショップは、アプリケーションテンプレートを活用する方法を学ぶのに役立つように設計されています。
  • アプリケーションを変更および拡張する方法についてのアイデアを見つける事を目的としています。
  • AWSアカウントが必要になります
    • 管理者権限をもっていることを推奨します。(IAMの作成権限も必要です)
    • アカウントに5個未満のVPCと100個未満のS3バケットがあることを確認してください。
      • (CloudFormationテンプレートでVPCまた複数のバケットを作成しますので作成制限にかからないようにリソースが空いているか確認してください)
  • ワークショップの終了後は、AWSアカウントへの請求を回避するため、すべてのリソースを必ずシャットダウン/削除してください
    • Part 4を実行して、リソースを削除してください

Part 1: AWS Full-Stack Template

Section 1: Get to know the app ： アプリケーションを理解する

Step 1: Play with the deployed goals app

  • AWSフルスタックテンプレートは、シンプルなCRUD（作成、読み取り、更新、削除）アプリを作成し、基本的なWebアプリケーションを起動して実行するために必要な基本的なサービス、コンポーネント、およびパイプラインを提供するフルスタックのサンプルWebアプリケーションです。
  • こちらのサイトで作成するアプリケーションを試すことができます
  • メール/パスワードを登録して、サインアップすることができます
    • パスワードは他のサイトと同じものは共用しないようにしてください
  • サイトにサインインして、目標と説明を追加し、保存を選択します。
  • 目標を編集してから、目標を削除してください。
  • 単純なデータのCRUDを実施することができます。

Step 2: Deploy AWS Full-Stack Template in your own AWS account

  1. AWSコンソールにログインします
  2. ワークショップがサポートしているリージョンを選択します(自分は US West (Oregon)を選択しました）
  3. Launch Stackを押下して、CloudFormationのスタックを作成し、進めます
  4. パラメータを入力します。
  5. スタックを作成を押下後、15分程度待機します。

Step 3: Review architecture

  • リソースの作成中にREADMEを参照して、今回作成するアーキテクチャの確認をします。
  • https://github.com/awslabs/aws-full-stack-template/blob/master/README.md
  • 全体構成、また各項目の処理詳細が記載されていますので、確認します。
  • Front, Backendの構成
  • Deployのパイプラインの構成
  • Cognito, CloudFron, S3
  • AWS Lambda, API Gateway
  • DynamoDB
  • CodePipeline, CodeCommit, CodeBuild

Step 4: Open the endpoint from CloudFormation

Section 2: Explore the backend ： バックエンドの探求

  • 正常に動作することが確認出来たら、変更を加えてみます

Step 1: Change the details for one of your goals directly in DynamoDB

Step 2: Delete a user in Cognito

Step 3: Change the application into a notes application (optional)

  • このステップはオプションです
  • 目標アプリをメモアプリに変更します。その際にバックエンドの構成を変更する必要はありません。
  • コードに変更を加えたら、CodeCommitにコミットを実施して、CodePipelineの'リリースを押下して'反映します。

Section 3: Add on to the application ： アプリケーションのカスタマイズを実施

Step 1: Add a "Last updated" or "Last modified" parameter

  • 最終更新日をパラメータ項目に追加します。
  • まずはヒントを見ずに実施してみます。分からなくなったらヒントをみて実装します。

Step 2: Add a "Last updated" column to the goals list page

  • 最終更新日をパラメータ項目に追加します。
  • まずはヒントを見ずに実施してみます。分からなくなったらヒントをみて実装します。
  • CodeCommitに変更内容をコミットして、CodePiplineから更新をリリースします。
  • デプロイが終了したら、再度サイトにアクセスして、反映を確認します。

Part 2: Extensions ： 機能拡張

ここでは、既存のアプリケーション(Part1で作成したアプリケーション)に検索API拡張機能を追加する方法を学びます。また独自の機能を実装する方法を学びます。

Section 1: Deploy a search extension to AWS Full-Stack Template 検索機能を追加します

  • Part1同様にCloudFormationのスタックを作成して、各リソースをデプロイします。(15分程度かかります)
  • デプロイ中に作成するアプリケーションの内容を確認します
    • Amazon API Gateway, AWS Lambda, Amazon DynamoDB Streams,
    • Amazon VPC, Elasticsearch
    • API-Gatewayでリクエストをうけ、LambdaからElasticsearchを用いて、結果を取得します。
    • DynamoDB StreamsからLambda経由でElasticsearchのデータを更新します。
  • 作成したLambda関数のテストを実施します。
  • 作成したLambda関数を既存のアプリに追加します（検索バーを追加します）

Section 2: Build your own extension! (optional) ：機能拡張をしてみましょう（オプション）

  • Section 1で作成した各リソースを理解、分解して自分の機能に必要なものを作成します。
  • 独自の機能拡張を実装します。

Part 3: AWS Bookstore Demo App：本屋デモアプリ

  • AWS Bookstore Demo Appの完全なインスタンスを作成します。アーキテクチャ構造の理解、コンポーネントの変更またいくつかの機能追加を行います。基本的な手順はPart1の手順と同様になります。

Section 1: Get to know the app：アプリケーションを理解する

Step 1: Play with the deployed Bookstore

  • デモサイトにアクセスして、書籍の参照と検索、推奨事項とベストセラーの確認、カートの管理、チェックアウト、注文の表示などを実施します。
  • AWS Bookstore Demo Appは、顧客が架空の本を購入するためのストアフロント（およびバックエンド）を作成するフルスタックのサンプルWebアプリケーションです。書籍の参照と検索、推奨事項とベストセラーの確認、カートの管理、チェックアウト、注文の表示などを行うことができます。

Step 2: Deploy AWS Bookstore Demo App in your own AWS account

  • Part1同様にCloudFormationのスタックを作成して、各リソースをデプロイします。(20分程度かかります)

Step 3: Review architecture

  • リソースの作成中にREADMEを参照して、今回作成するアーキテクチャの確認をします。
  • 全体構成、また各項目の処理詳細が記載されていますので、確認します。
  • Front, Backendの構成
  • Deployのパイプラインの構成
  • Cognito, CloudFron, S3
  • AWS Lambda, API Gateway
  • DynamoDB, Elasticsearch, ElastiCache, Neptune
  • CodePipeline, CodeCommit, CodeBuild

Step 4: Open the endpoint from CloudFormation

Section 2: Explore the backend： バックエンドの探求

Step 1: Change the author of a book in DynamoDB

  • 好きな本を見つけて、DynamoDBのテーブルのレコードを見つけます、著者、編集します。
  • 好きな本の著者になってみます。

Step 2: Update search to reflect your new authorship

  • 著者名を更新した後に、自分の名前を検索します。
  • 更新した本（自分が著者）の本が結果に表示されます。

Step 3: Manually edit the leaderboard/Best Sellers list

  • ベストセラーを確認します。（自分がした注文と一致する）
  • DynamoDBのordersテーブルの値を変更します
  • 変更した値が自動でDyanamoDB Streamsを経由しElastiCacheのレコードが更新されベストセラーが更新されます。

Section 3: Change the application (optional)：アプリケーションを更新しましょう

  • オプションで以下の内容を実装してみましょう

Option 1: Use it for your own storefront (medium)

  • 自分自身のストアに変更する
  • 自分自身のストアを開きたいと思った場合、DynamoDBのテーブル構造を変更し、必要な属性、項目を更新します。
  • CodeCommitに保持されているフロントのコンテンツを更新し、CodePipelineからデプロイ実施できます。

Option 2: Add individual product pages (hard)

  • 個別のページを追加する
  • 個々の製品のページが不足しているため、DynamoDBの構造を変更して、個別のページを生成します

Option 3: Turn the bookstore into a blog (hard)

  • ブックストアをブログに変える
  • 個別のページが作成できれば、ブログとそれほど変わりはないのでブログを作成することができます
  • ベストセラーの構造は、もっとも人気のあるブログと同様になります。

Option 4: Use a different database (hardest)

  • 異なるデータベースを使用します。
  • バックエンドの構造を変更し、APIから異なるデータベースを呼び出すように変更します。

Option 5: Build out the “Friends” functionality in the Bookstore (hardest)

  • 本屋にフレンド機能を追加します。
  • フレンド管理システムを構築して、書店に追加します。

Part 4: Cleanup! ： クリーンアップ

  1. S3のコンソールを開いて、このワークショップで作成されたS3バケットを削除します。
    • 事前に削除を実施しない場合、次工程のスタック削除、オブジェクトが存在するためエラーが発生します。
  2. CloudFormationのコンソールから作成したスタックを削除します。

Part 5: Build on!： やってみよう！

  • AWSフルスタックテンプレート、AWS Bookstoreデモアプリを拡張して、独自のアプリケーションを作成してください。

まとめ

DAT(Databases)のワークショップらしく、DynamoDB, Elasticsearch, ElastiCache, Neptuneが含まれたAWS構成のデモだと思ってたんですが 実際にやってみたら、結構本格的なWebアプリケーションでした。 このまま、本番で使う事は想定されていませんが、各ＡＷＳリソースの構成の仕方、呼び方など参考になる部分は多くあるかと思います。 サーバレスな構成で実装されてますので、サーバレス構成に興味がある方もご参考になるかと思います。

オプションの部分はちょっとハードルが高かったですがいつかやってみたいと思います。

参考情報

AWSフルスタックテンプレート https://github.com/awslabs/aws-full-stack-template

AWS Bookstoreデモアプリ https://github.com/aws-samples/aws-bookstore-demo-app

AWS

関連記事

ElasticSearchのDemo環境で、Kibana DevToolsのConsoleからcat APIを一通り叩いてみた。

横山嵩人

2023.05.19

ElasticSearchのDemo環境で、cat APIについて学んでみた

横山嵩人

2023.05.19