ヤマムギ

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入門ガイド」という本を書きました。

 - AWS , ,

ad

ad

  関連記事

API Gatewayから直接 DynamoDBに書き込む

やりたいこと WebページでOやXを押したときに、どっちを押したかをDynamo …

Pepperで撮影した写真をAmazon Rekognitionで分析してその結果をPepperがしゃべる ~(1)AWS編~

Pepperの機能を使えるところは使って、何かしたいなあと思ってまして。 目(カ …

プライベートサブネットのEC2でセッションマネージャを使うようVPCエンドポイントを構成する

インターネットゲートウェイへのルートがないルートテーブルに関連付けられたプライベ …

Developers Summit 2018 「AWSのフルマネージドな環境でCI/CDをやってみよう!AWS Cloud9からAWS Fargateへの継続的デプロイをご紹介」を聞きました

※写真は展示のAmazon Echoです。 以下は、思ったことや気になったことを …

slackのbotにWikipediaを調べてもらう(Python on AWS Lambda + API Gateway)

slackのbotに少しでも役に立ってもらおうと、Wikipediaを調べてもら …

ALBにWAFを関連付けて特定のヘッダー以外はブロックする

おかげさまで、ブログのアクセスも増えてきて、t3.nano EC2インスタンス単 …

AWS EC2 でインスタンスにIPアドレスを紐付ける

AWS EC2で作ったサーバは何もしなければ起動するたびにIPアドレスが変わって …

NATインスタンスを作成する

プライベートサブネットのEC2インスタンスからカスタムメトリクスとCloudWa …

LINE Bot APIのファーストステップをLambda+API Gatewayでやってみたらものすごく簡単で驚いた

トライアル当初はホワイトリストのしばりや、初回反応するまで時間がかかったりとみな …

AtomエディタでEC2のファイルを直接編集する

Webページを編集していてEC2のファイルをvimエディタでさわったりしています …