AWS Amplify Admin UI を使ってみる

AWS Amplify,IT記事Admin UI,AWS Amplify

AWS AmplifyのAdmin UIを使うとデータを変更しやすくなったりするかなぁと考えたので使ってみた。

使いつつできたホロライブ名前当てゲームはこちら

https://main.d3fbxa8hujijs9.amplifyapp.com/

Admin UI

AWS AmplifyにはAdmin UIという、データのモデリングやコンテンツの作成や認証機能・管理者などの管理をできるUIツールがある。

今回は主にゲームの問題文の作成、管理に使ってみた。

Admin UI起動の仕方

アプリページから起動すれば使える。

AWS Amplify Consoleにブラウザでアクセス。> アプリを選択。> アプリの画面のBackend environmentsタブをクリック > Admin UIを使うボタンをクリック。これでAdmin UIを起動できる。

なにか不具合が出たら、メニューのAdmin UI managementからoffにできるので、気楽に起動してみていいんじゃなかろうか。

(メニューのAdmin UI managementからonにして起動してもなんかうまくいかなかったから、 Backend environmentsタブ からいったほうがよい

モデリング

set upのDataからデータモデリングができる。

基本的な使い方は何となく分かる。いやList型とかカスタムタイプまわりがよくわからない。関係あたりはイメージ通り。

モデリングをしたあとSave and deployを押すとモデルからテーブルが作成される。

デプロイしたあとは、pullコマンドで反映できる。コマンドは画面右上のLocal setup instructionsなどをクリックすることでもわかる。

amplify pull --appId ### --envName dev

逆にローカルでスキーマファイルを編集してからpush。構築するボタンを押すとAdmin UIの画面反映することもできる。

List型とかAdmin UIから作る方法がわからなくてこっちでやった。

コンテンツ

メニューのContentという項目を押すと、テーブルにデータを入れることができる。

今回はこれでゲームの問題文を作った。

テーブルを選んで、Create テーブル名ボタンを押すと項目に入力していく感じで作れる。

Actionsの項目からauto-generateを選択すると、StringとかIntにランダムな文字列や数字を入れて複数作成してくれる。(1:1対応の他の型とのリンクとかはしてくれない。

文字列の項目ではマークダウン記法用の入力欄も選べる。簡単なブログ記事とかならこれで書けということだろう。

あとCSVデータを流し込んだりとかもできない。

Storage

AmplifyではStorageというコマンドでS3を管理することができる。今回はゲームの画像データをS3にいれることにした。

amplify add storageというコマンドをして質問に答えていくと作成される

amplify add storage

ゲストもreadできるように設定する。

コマンドで作成したあと、Admin UIのStorageのメニューを押すと、作ったStorageリソースが並ぶ。それだけ。とくにAdmin UIからストレージをいじったりする機能はない。

並んだStorageリソースをクリックするとS3に飛ぶ。

S3

S3画面でpublicというフォルダを作ってその配下に画像ファイルを入れると、画像が全体公開になる。

あとはファイル名をAmplifyのJSライブラリのStorage.getすると取得することができる。

await Storage.get(ファイル名);

S3には画像データを複数一度にアップロードできる。

ゲームでは、ブラウザで問題ページをレンダリングするたびにS3にアクセスして画像をダウンロードすることにした。

今回のまとめ

今回は認証や管理者側の機能は使わなかったのでまだまだ。

コンテンツの作成部分は、文字列や数字の変更だけであまりできることは少ない。でも個人的にはコンテンツの作成に集中できたかも。しかしcsvとか連番データを入れたりできないのでランダム作成以外は一つずつ作る必要がある。

あとpushとかのたびに、モデル構築ボタンを押さないとだめで時間を取られたりする。

しかし悪い感情もなくて簡単なコンテンツに絞ったり、プロジェクトのはじめから使ってみるといいのかも。

Posted by opvel