ヤマムギ

growing hard days.

*

「AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる Amplify + Admin UI」に参加しました。

   

亀田さんが定期開催というか、高頻度開催されている「AWSの基礎を学ぼう 特別編 最新サービスをみんなで触ってみる Amplify + Admin UI」に参加しました。

「2020年12月にアナウンスされた、アプリケーションバックエンドを構成し、AWSコンソールの外部でアプリユーザーとコンテンツを管理するための新しいAWS Amplifyの管理UIである、Amplify Admin UIをみんなで触りましょう」というハンズオンです。

手順はこちらです。
AWS-Amplify-Admin-UI

ハンズオン環境構築

Cloud9で環境を作成しました。
私はバージニア北部でやりました。

Cloud9のEC2インスタンスにアタッチされているEBSボリュームは10GBなので、このあとのハンズオンのために、30GBにリサイズします。
resize.shを用意いただいてました。
中身はAWS CLIでボリュームのサイズ変更して、変更完了したら、growpartコマンドなどなどを実行して、Linuxで使えるようにすると。

次にCloud9デフォルトの認証情報を削除します。
aws configure listで見るとこうなっていました。
Cloud9構築時に.aws/credentialsができてるんですね。

Cloud9のAWS SettingsでAWS managed temporary credentialsをオフにしました。

全部設定がなくなるのですね。
ふむふむ。

で確認すると、AWS managed temporary credentialsをオンにすると、.aws/credentialsができて、オフにすると削除しているのですね。
なるへそなるへそ。

Amplify CLIのインストールと設定

Amplifyのインストールとハンズオン用のIAMユーザー作成と設定をしました。

React Appを作成

次にReact Appを作成しました。

Happy hacking!と出力されたら完了です。

プロジェクトの作成

別のターミナルを開いて次のコマンド。
amplify initでプロジェクトを作成して、CloudFormationスタックができました。

そして次に、Reactフロントエンド用UIライブラリをインストールしました。

できたindex.jsにGithubに用意された3行を足して次のようにしました。

APIのデプロイ

そしてpush

3つのネストされたCloudFormationスタックを作成する、CloudFormationスタックが作成されました。

アプリケーションの開発

App.jsをGithubで用意されたソースに変更しました。
Todoアプリのようです。

npm startをやり直すと、、、、、、、、

Todoアプリが右下のウインドウで表示されました!
適当にNameとDescriptionを書いて[Create Todo]しました。

DynamoDBテーブルにPutItemされました!
Cloud9上でのローカルテストはOKですね。

アプリをAmplify環境へのホスティング

CloudFormationスタックが更新されてアプリがデプロイされした。

アプリが起動できたので、テストデータを登録します。

DynamoDBテーブルにPutItemできました。

Admin UIの起動

いよいよ本日の本編Admin UIの起動です。

Amplifyコンソールにアプリが追加されています。

[Set up admin UI]を押下しました。

Enableをonにすると、有効化がはじまりました。

有効化が完了したので、[Open admin UI]を押下しました。

アプリの管理画面Admin UIにアクセスできました。
IAMユーザーとは別にAdmi UIのユーザーを招待して、アプリの管理をしてもらえます!

Hi!
You are invited to collaborate on the reactamplified (d3a3r31eanpk5t) project on AWS Amplify.
Your temporary credentials are:
Username:xxxxxx@gmail.com
Temporary Password: 4s9|ZGU8
Visit the Amplify admin UI to get started!

こんなメールが届いて、Admin UIへのログイン画面へアクセスできます。
一時パスワードでログインですね。

アプリで使っているDynamoDBテーブルのデータを管理したりできます。
マネジメントコンソールからDynamoDBテーブルをメンテナンスするのではなく、アプリの管理者としてデータメンテナンスができるのですね。
なるほど。
例えば商品マスタのメンテナンスとかですね。

Admin UIからアプリを作成するってこともできたりするそうです。

片付け

CloudFormationスタック削除とCloud9の環境削除です。

亀田さん、勉強会の開催ありがとうございました!


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

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

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

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

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

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

 - event, study , ,

ad

ad

  関連記事

第5回 八子クラウド座談会in関西 「関西まるっとIoTでやったらんかい♬」に行ってきました

SIMの契約変更のはざまで通信がほぼ使えず。 そんな状態なので、Twitterで …

「〜おじゃったもんせ!〜鹿屋ワーケーションサミット」に参加しました Day2

「〜おじゃったもんせ!〜鹿屋ワーケーションサミット」に参加しました Day1に続 …

Alexa Day 2018にサポーターの中の人として(初)参加しました

2018/2/11に神戸三ノ宮のスペースアルファ三宮で開催されたAlexa Da …

「JAWS-UG大阪 第18回勉強会 サーバーレス」の運営をしました

JAWS-UG大阪 第18回勉強会 サーバーレスを開催、運営しました〜。 事の発 …

「GCPUG Tokyo Container Builder Day February 2018」に行ってきました

GCPUGは神戸以来の2回目で参加させていただきました。 申し込もうかと思ったら …

「Fin-JAWS 第25回 ~Go to Fin-JAWS School! 2022~」で発表しました

「Fin-JAWS 第25回 ~Go to Fin-JAWS School! 2 …

VUI and IoT device(Alexa Day 2019でのブログ)

以下は、気になったことのメモとか感想を書いています。 登壇者、発表者、主催企業な …

TwilioJP-UG大阪 第二回 勉強会「Report SIGNAL2016」に行ってきました

TwilioJP-UG大阪 第二回 勉強会「Report SIGNAL2016」 …

Developers Summit 2024「エンジニアの成長とそれを支える組織の考え方」を見ました

株式会社ビッグツリーテクノロジー&コンサルティング CTO 高安 厚思さ …

「JAWS-UG佐賀 3年ぶり!re:Bootするよ!」に参加しました

全員自己紹介からスタートしました。 さくさくっとマイクをまわしてなんと10分まき …