ヤマムギ

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認定 デベロッパーアソシエイト」という本を書きました。

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

 - AWS , ,

ad

ad

  関連記事

AWS CDKでクロススタックリファレンスをする

CloudFormationで複数のスタックで参照することがあります。 それをC …

AWS EC2 Amazon Linux にEC-CUBE3をnginx+MySql環境へインストール(手順検証中)

EC2インスタンスを作成する 少し古い記事で恐縮ですが試したい事があるのでAWS …

AWS DataLake 構築ハンズオンに行ってきました

AWSJ大阪が増床されて2019年10月限定でAWS pop-up loftとい …

RDSの証明書をrds-ca-2019に更新しました

クライアント接続で署名書使ってないので、必要ないのですが、古いままなのも気持ち悪 …

Intel 82599 VF インターフェイスで拡張ネットワーキングが有効なEC2インスタンスで帯域幅を確認してみました

拡張ネットワーキングが有効なEC2インスタンスとそうではないインスタンスの2セッ …

AWS Cloud9でJavaサンプルを実行する

リモートで共有開発ができるCloud9便利ですね。 Cloud9でJavaのサン …

VyOSにSSMエージェントをインストールしました

VyOSにSSHでログインするのも面倒なので、SSMエージェントをインストールし …

Backlogの課題チケット更新内容をMicrosoft Teamsに通知する(AWS Lambda Python)

BacklogにSlack連携が追加されました。 ですが、私の所属している会社で …

「雲勉 第1回【勉強会:新技術好き!】AWSマネージドサービス勉強会」に行ってきました

「雲勉 第1回【勉強会:新技術好き!】AWSマネージドサービス勉強会」に行ってき …

Amazon EC2のAMIイメージを自動取得して保持日数が過ぎたら削除

画像の保存をEC2に戻した事もあってEC2のバックアップの自動取得を勉強がてらや …