AWS日記36 (Amplify Studio)

# はじめに
今回は [AWS Amplify Studio](https://aws.amazon.com/jp/amplify/studio/) を試します。
Amplify Studioで UIやデータを作成し、ReactのWebアプリケーションをホスティングします。


# 準備
 - Amplify CLI 等、ローカル環境で Amplifyを使う準備をします。 [参考:Amplify](https://qiita.com/tanaka_takurou/items/805917372ad215db5fc8)
 - [Figma](https://www.figma.com/)のアカウントを取得します。



# プロジェクト作成

##### プロジェクトの名前を入力します
![app_name.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/bfdd5b74-6e0b-f532-7d05-945e40a2a97e.jpeg)


##### 「Studioを起動する」 をクリックします。
![launch_studio.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/7d125756-b770-20ee-5d41-f9a94b916032.jpeg)


# Figmaと連携

##### UI Library画面の「Get started」をクリックします。
![ui_library.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/15845bba-8d5d-2f60-a61d-e2ce69a56775.jpeg)

##### 「Use our Figma template」をクリックします。
![sync_with_figma.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/d049d77b-fa53-136c-ceac-d4ef84296a8a.jpeg)

##### 「Duplicate」をクリックします。
![figma_duplicate.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/d81f16b6-c9db-5d45-dfe5-da14a6e08943.jpeg)

##### 「Accept all」をクリックします。
![figma_accept.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/61682cf7-f0ed-9984-6022-f76e3882612c.jpeg)


# データ作成

##### Data画面でデータモデルを追加します。
![data_modeling.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/1d988071-8c34-c0e4-897c-2813943f9e13.jpeg)


##### Content画面でデータを追加します。
![content.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/339d4c74-6155-74e5-9a8f-d199310b6b32.jpeg)

##### データを入力し保存します。
![add_data.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/7c4617dc-d297-79ae-8a30-1b641d8f0ea8.jpeg)


# コンポーネントとデータモデルの紐付け

##### UI Library画面の My Components から、今回は「CardA」をクリックします。
![ui_library_CardA.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/29d7dfd8-abe7-8a9a-89e0-c2771eeabffc.jpeg)

##### 「Configure」 をクリックし、以下の設定をします。

- 画像のURL
![CardA_url.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/627fa6de-d131-90d5-e0db-b8d34457a866.jpeg)

- タイトル
![CardA_title.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/d6adbfe8-3ba6-395a-afb9-fb4037babe5e.jpeg)


- 日付
![CardA_date.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/d0fa7da5-e807-f3af-b323-f591d4d0773f.jpeg)



# ローカル環境での作業


### Reactアプリケーションの初期化

```bash
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_command.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/508f04e5-9051-a640-0756-236f0274d40c.jpeg)



```bash
amplify pull --appId {app_id} --envName {env_name}
```

### GraphQL の追加

```bash
amplify update api
```

### GraphQLのクエリーファイルの生成

```bash
amplify codegen add
```

### src/App.jsの編集

```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アプリケーションのホスティング・公開

##### ホスティング

```bash
amplify add hosting
```

##### 公開

```bash
amplify publish
```

##### 動作確認

![hosting_check.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586707/5aa863db-a6ca-02ab-8fc1-668a06e42bbf.jpeg)


# 終わりに
AWS Amplify Studio を試しました。
UIやデータ作成はブラウザ上で行えましたが、 App.jsの編集や公開作業はローカル環境で行う必要がありました。
アプリケーションを複数人で開発するためのツールとして、とても便利だと感じました。

##### 以下の記事を参考にしました。

[Amplify Studioってホントにすごいの？](https://blog.serverworks.co.jp/amplify-studio-example)

[【多分初心者向け】AWS Amplify Studio に触ってみて、とりあえず1からwebページを作ってみた](https://dev.classmethod.jp/articles/aws-amplify-studio-maybe-beginner/)

[Amplify新機能(Studio)を触ってみた(プレビュー版)](https://zenn.dev/kobayashiyabako/articles/amplify-studio-test)