ヤマムギ

growing hard days.

*

AWS AmplifyでTodoアプリを作るハンズオンをやってみました

   

【お手軽ハンズオンで AWS を学ぶ】AWS Amplify で Todo アプリを作ろう! AWS AppSync & Amazon DynamoDB によるリアルタイムメッセージングを見ながら、AWS Amplify、AppSyncに触れてみました。

ハンズオン環境

開発環境はCloud9を使用しました。
Cloud9はインスタンスタイプをt3.nanoにしただけで他はデフォルトです。

まずnodeとnpmのバージョン確認です。

手順よりも上位バージョンなんでこのまま進めます。

インストールなどセットアップ

マネジメントコンソールへのログインが促されましたが、Cloud9なんですでにログイン済です。
このまま[Enter]キーを押下しました。

リージョンはバージニア北部、IAMユーザーはデフォルトのユーザーです。
その下のリンクをクリックすると、マネジメントコンソールのIAMユーザー作成画面です。
IAMユーザーにAWS管理ポリシーのAdministratorAccessを設定しました。
プログラムによるアクセスが設定されているので、アクセスキーIDとシークレットアクセスキーが発行されました。

amplify configureの続きでアクセスキーIDとシークレットアクセスキー、Profile Nameを設定しました。

ちょっと怖いので、Cloud9からのみ許可するように、ユーザーに以下のインラインポリシーを追加しました。
Cloud9のEC2にElasticIPアドレスを関連付けて、そこから以外はすべての操作を拒否するポリシーを追加しています。

手順どおりにvueをインストールして、

vueのプロジェクトを新規作成して、

プロジェクトディレクトリに移動しました。

AWS Amplify のAPI機能とメッセージング機能のモジュールをインストールしました。

私の環境はCloud9ですので、ブラウザからアプリにアクセスしました。
セキュリティグループでは8080ポートに対してのインバウンドルールを追加しました。

http://ElasticIPのアドレス:8080

画面が表示されました。

ハンズオン手順では、Cloud9の場合はプロジェクトのルートディレクトリにvue.config.js を以下の内容で追加しましょうとありましたが、なくても表示されました。
ですが、後の手順でうまくいかなくなってもと思い、念のために追加して、npm run serve を再実行しました。

サーバーレスバックエンドリソースの作成

amplify init を実行しました。
選択、入力したのは、環境名の「test」と、エディタのVimだけで、あとはデフォルトです。

IAMロール2つとS3バケット1つがCloudFormationスタックによって作成されました。

この段階で、amplify statusコマンドを実行して何も値が表示されなければ正常とのことです。

amplify add api コマンドでアプリケーションにAPI機能を追加します。

“Selected default editor not found in your machine. Please manually edit the file created at /home/ec2-user/environment/myamplifyproject/amplify/backend/api/myamplifyproject/schema.graphql”と出力されたので、vimコマンドで該当のファイルにアクセスしてみました。

手順の結果どおり作成されているので、特に編集はせずにこのまま進めました。

amplify status コマンドを実行すると、APIが追加されていました。

バックエンドリソースに反映するために amplify push コマンドを実行しました。

CloudFormation スタックが更新されて、API機能に必要な、DynamoDBテーブルや、AppSyncリソースが作成されました。

アプリケーションからAWS Amplifyを使ってバックエンドにアクセス

Todo追加ボタン

src/main.js に手順に沿って以下を追加しました。

API機能とメッセージング機能のモジュールをインポートしてawsconfigureで設定しているコードに見えます。

src/App.vueも手順に沿って以下に置換しました。

Add Todoボタンを押下すると、{ name: “Todo Title”, description: “あれをやる” + Date() }が、graphqlOperationのcreateTodoによって、DynamoDBテーブルに書き込まれるのですね。

やってみるとDynamoDBテーブルに新規データが登録されていました。

npm run serve コマンドを実行してブラウザから確認してみます。

Add Todoボタンが表示されました。
順調なようです。

このあたりで気づいたのですが、Cloud9の[Preview] – [Preview Running Application]でプレビュー見れるのですね。

とりあえず、[Ctrl]-[C]でアプリケーションを終了して、ハンズオンを進めます。

Todoの一覧表示

次はDynamoDBに登録されているアイテムを画面に表示します。
src/App.vueを編集しました。

追加したのが、こちら。

graphqlOperationのlistTodosで、取得したアイテムを

<

ul>タグのとこに一覧表示しているようです。

表示されました。

一覧表示のリアルタイム更新

次は新しいアイテムが投稿されたときに、自動的に一覧に表示させる機能の追加です。
わかりやすくするために、一度DynamoDBのアイテムを削除しました。

src/App.vueを編集しました。

追加したのがこちらです。

npm run serve して手順にあるとおり、ブラウザ2つでテストしました。

できました!

アプリケーションのリリース

リリースすると、S3で静的なWebサイトとして公開できるとのことです。
いたれりつくせりですね。

今回はDEVのS3のみとしてますが、PRODにするとCloudFrontが使えるみたいです。
いたれりつくせりですね。

amplify status コマンドで確認すると、Hosting が追加されています。

完了しました。
最終行に出力されたS3の静的Webサイトエンドポイントでアプリケーションにアクセスできました。

AppSyncにはこちらのスキーマが作成されていました。

リソース削除

amplify deleteコマンドを実行して、CloudFormationスタックを削除します。
S3バケットはDELETE_SKIPPEDされてたので手動で削除しました。

最後にハンズオン環境として使ったCloud9を削除して終了です。

まとめ

AWS Amplifyを使うことで、AppSync、DynamoDB、S3バケットなど必要なリソースの作成と設定をCloudFormationスタックでまとめてやってくれました。
これで、開発者はフロントエンドの開発により注力することができますね。


最後までお読みいただきましてありがとうございました!

「AWS認定資格試験テキスト&問題集 AWS認定ソリューションアーキテクト - プロフェッショナル 改訂第2版」という本を書きました。

「AWS認定資格試験テキスト AWS認定クラウドプラクティショナー 改訂第3版」という本を書きました。

「ポケットスタディ AWS認定 デベロッパーアソシエイト [DVA-C02対応] 」という本を書きました。

「要点整理から攻略するAWS認定ソリューションアーキテクト-アソシエイト」という本を書きました。

「AWSではじめるLinux入門ガイド」という本を書きました。

 - AWS , ,

ad

ad

  関連記事

Amazon Connect 発信イベントをEventBridgeで確認

Amazon Connectから発信した電話に出たのか、出なかったのかを確認した …

Extend Switch Roles(Chromeのアドオン)で6つ以上のスイッチロール履歴

最近アカウントIDを忘れたりすることも多くなったので、切り替えに手間取ることがあ …

AWS Organizationsのルートユーザー管理(Root user management)でメンバーアカウントのルートユーザー認証を無効にしました

2024年11月発表のAWS Organizations を使用するお客様のため …

リザーブドインスタンス推奨事項を確認した

マネジメントコンソールで[AWSコスト管理]カテゴリの[AWS Cost Exp …

AWS Secrets ManagerのローテーションでLambda関数の管理が必要なくなりました

Amazon RDS と AWS Secrets Manager の統合を発表と …

AWS Transit GatewayのAcceleratedサイト間VPN接続確認

Transit GatewayでVPN接続を作成するときに、Global Acc …

DynamoDB IAMポリシーで特定項目だけを許可する

検証記録です。 対象テーブル 書籍のサンプルで作ったこちらです。 所属バンドの楽 …

WordPressのwp-login.php , xmlrpc.phpへのアクセスをAWS WAFで接続元IPアドレスを制限する

AWS CloudWatch LogsエージェントでAmazon EC2上のNg …

AWSアカウントルートユーザーのMFAでYubicoセキュリティキーを設定した

先日Yubico セキュリティキーを購入して、USBにささなければならないのがな …

特定AWSアカウント特定リージョンのCloud9環境を削除するLambda(Python)

やりたいこと 特定アカウント内特定リージョン内のCloud9環境を全部削除したい …