Amplify StudioでサクッとWebサイトを試してみた

はじめに

Amplify Studio で簡単にWebサイトが作成できるとのことでやってみた
GUIベースでサクッとWebサイトが作成できたのは凄かった
Figma使ったことない、React触ったことないというレベル感ですが、Amplify Studio側が良しなに吸収してくれるところが心強いと感じた

ゴール

商品画像や値段、都道府県や地域の情報をまとめて一覧にしたシンプルなWebページを作成

事前準備

Figmaのアカウント作成し一覧で表示するためのコンポーネントを作成しておく
ヘッダー右上にある共有を押して出てくるURLをコピーして控えておく（後ほどAmplify Studioと連携する時に利用）

Amplify Studio起動

AWS ConsoleからAmplifyを選択し、アプリを1つ作成する
するとStudioを起動すると表示されるので起動する

Studioが起動すると以下のような画面が表示される

Webサイトに表示させるデータを登録

左側のサイドナビにあるSet Up > Data もしくは オレンジ色のCreate data modelボタンを押すとData登録画面に遷移する
Webサイトに表示する項目を定義をしていく

入力後に登録するとDeployが実行される
裏側ではAmplify Backend環境が用意される(上記のデータ定義を持つDynamo Tableが作成され、そのDynamo Tableからデータを参照できるAppSyncも生成される)
ReactからはAmplify DataStoreを使ってAppSyncとのデータのやり取りしている
こちらにもあるようにDataStoreは細かなチューニングが難しいので、今回みたいな簡単なデータ構造のWebサイトを作るのに適していると感じた

デプロイが完了されると、使い方のガイドが表示される
各言語での使い方が見れるので便利

データ登録もStudioからできる

左サイドナビのContentからデータ登録できる
Auto-generate dataを選択すると簡単にサンプルデータが作成できるウィザードが出る
ただし英語なのと、作成されるデータの値がイメージに合わないものが多い

手動で適当に登録しておく

Figmaでコンポーネントを同期

左サイドナビのUI Libraryを押すと出てくる画面でFigmaとのSyncができる
事前準備しておいたFigmaのページのURLを入力すると作成したコンポーネントが出てくる
利用する場合はAcceptを押すとStudio側にComponetとして登録される

コンポーネントの各項目を選択すると右側にデータを紐付けるかどうか促される
各項目とデータの紐付けをしていくといい感じにプレビューができていくのがわかる
デザインとデータの紐付けが終わったら、右上のCreate collectionを押すと一覧用のComponentを作成してくる

一覧の見せ方の調整は左側の項目でできる
今回はGridで、1列に3つ並べるという設定にしてみた

Reactアプリに取り込む

Reactアプリを作成しておく

create-react-appコマンドを実行するとReactアプリの雛形ができる

npx create-react-app test-app

Amplify　Studioで登録したコンポーネントを取り込む

ガイドに出てくる部分を修正していく

localで動作確認

コンポーネントが取り込まれているか、またデータが参照できるかどうかを確認する

npm start

ホスティング

amplify publish

を実行すると手動で実行するかGitと連携するかどうか選択できる
とりあえず手動でpublishしてみるとAmplifyにホスティングしてくれる