ヤマムギ

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スタックでまとめてやってくれました。
これで、開発者はフロントエンドの開発により注力することができますね。


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

【PR】 「AWS認定試験対策 AWS クラウドプラクティショナー」という本を書きました。

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

【PR】 「ポケットスタディ AWS認定 デベロッパーアソシエイト」という本を書きました。

 - AWS , ,

ad

ad

  関連記事

Amazon EC2 Auto Scalingのライフサイクルフック

EC2 Auto Scalingにライフサイクルフックという機能があります。 ス …

AWS Client VPNの接続ログを確認しました

AWS Client VPNを設定しましたで証明書とかせっかく作ったので、いろい …

Route 53で不要なドメインを削除

勢いで作ったけど結局使うのをやめたドメインがあります。 要らないので削除しました …

IAMユーザーのマネジメントコンソールログインパスワードを変更してDynamoDBに記録するLambda(Python)

やりたいこと IAMユーザーのマネジメントコンソールへのサインインパスワードを動 …

SendGridのイベントをAPI Gateway -> Lambda(Python) -> DynamoDBに格納する

SendGridのメールイベントログはコンソールで確認出来るのは直近7日分で一括 …

RDSの拡張モニタリングを有効にしました

RDS for MySQLです。 変更メニューで、[拡張モニタリングを有効にする …

特定AWSアカウント特定リージョンのCloudFormationスタックを削除するLambda(Python)

やりたいこと 特定アカウント内特定リージョン内のCloudFormationスタ …

Selenium, Headless ChromeとAWS Lambdaで夜な夜なスクレイピング

このようなアーキテクチャで、Alexaスキルの開発を進めていまして、元となる情報 …

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

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

AWS Toolkit for Eclipseで「Error Message: Unable to find a region via the region provider chain. Must provide an explicit region in the builder or setup environment to supply a region.」

AWS Toolkit for Eclipseをセットアップ(2021年版)の環 …