はじめに
今回は AWS Amplify Studio を試します。
Amplify Studioで UIやデータを作成し、ReactのWebアプリケーションをホスティングします。
準備
- Amplify CLI 等、ローカル環境で Amplifyを使う準備をします。 参考:Amplify
- Figmaのアカウントを取得します。
プロジェクト作成
プロジェクトの名前を入力します
「Studioを起動する」 をクリックします。
Figmaと連携
UI Library画面の「Get started」をクリックします。
「Use our Figma template」をクリックします。
「Duplicate」をクリックします。
「Accept all」をクリックします。
データ作成
Data画面でデータモデルを追加します。
Content画面でデータを追加します。
データを入力し保存します。
コンポーネントとデータモデルの紐付け
UI Library画面の My Components から、今回は「CardA」をクリックします。
「Configure」 をクリックし、以下の設定をします。
-
画像のURL
-
タイトル
-
日付
ローカル環境での作業
Reactアプリケーションの初期化
mkdir amplify-studio-react
cd amplify-studio-react
npx create-react-app .
npm install aws-amplify @aws-amplify/ui-react
Amplify アプリケーションの Pull
AWSコンソールから pullコマンドを確認します。
amplify pull --appId {app_id} --envName {env_name}
GraphQL の追加
amplify update api
GraphQLのクエリーファイルの生成
amplify codegen add
src/App.jsの編集
import React, { useState, useEffect } from 'react';
import './App.css';
import { Amplify, API } from 'aws-amplify';
import awsconfig from './aws-exports';
import Card from "./ui-components/CardA";
import { listSampleModels } from './graphql/queries';
Amplify.configure(awsconfig);
function App() {
const [icons, setIcons] = useState([]);
useEffect(() => {
fetchIcons();
}, []);
async function fetchIcons() {
const apiData = await API.graphql({ query: listSampleModels });
setIcons(apiData.data.listSampleModels.items);
};
return (
<div className="App">
{
icons.map(item => (
<div key={item.id}>
<Card Sample={item}></Card>
</div>
))
}
</div>
);
}
export default App;
Webアプリケーションのホスティング・公開
ホスティング
amplify add hosting
公開
amplify publish
動作確認
終わりに
AWS Amplify Studio を試しました。
UIやデータ作成はブラウザ上で行えましたが、 App.jsの編集や公開作業はローカル環境で行う必要がありました。
アプリケーションを複数人で開発するためのツールとして、とても便利だと感じました。