AWS Amplify StudioでReactアプリを作成してみました

この記事は公開されてから半年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

AWS Amplify StudioでReactアプリを作成してみました。

手順の概要

Figma無料アカウント作成
Amplify CLIのインストール
Amplify StudioへFigmaデザインをインポート
データモデルの作成とコンポーネントへの紐づけ
ローカルへの取り込みと動作確認

実行環境

Windows 10
Node.js v16.13.2
Chrome 97.0.4692.71
FireFox 96.0.3

手順

Figma無料アカウント作成

Figmaのサイトにアクセスします。
http://www.figma.jp/ja/figma/

「Try Figma for free」をクリックします。

お好きな方法でSignUpしてください。

今回は「Skip this step」をクリックしました。

「Start for free」をクリックします。

今回は「I'll explore by myself」をクリックしました。

以上でFigmaのアカウント作成は完了です。

Amplify CLIのインストール

npmコマンドでインストールします。

npm install -g @aws-amplify/cli

awsアカウントの設定をします。

amplify configure

ブラウザが起動してAWSのログイン画面が表示されます。

アカウントでログインしてコンソールに戻ってEnterします。

Follow these steps to set up access to your AWS account:

Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue

リージョンの選択が表示されるので、東京リージョンの場合はap-northeast-1を選択してEnterします。

Specify the AWS Region
? region:
eu-west-2
eu-west-3
eu-central-1
ap-northeast-1
ap-northeast-2
ap-southeast-1
ap-southeast-2
(Move up and down to reveal more choices)

そのままEnterするとAWSにログインしたブラウザにIAMユーザを作成する画面が開きます。

? region: ap-northeast-1
Specify the username of the new IAM user:
? user name: (amplify-l962z)

必要な項目は入力されているので、そのままユーザを作成します。

コンソールに戻ってEnterします。

Complete the user creation using the AWS console
Press Enter to continue

先ほど作成したIAMユーザのaccessKeyIdを入力してEnterします。

Enter the access key of the newly created user:
? accessKeyId: [hidden]

secretAccessKeyを入力してEnterします。

? secretAccessKey: [hidden]

ローカルに保存するAWSプロファイルの名前を入力します。ユーザ名と同じ「amplify-l962z」にしておきます。

This would update/create the AWS Profile in your local machine
? Profile Name: (default)

Successfully set up the new user.

以上でAmplify CLIのインストールとアカウントの設定は完了です。

FigmaのデザインをAmplify Studioにインポート

Management Console にログインしてAWS Amplifyにアクセスします。

Amplify Studioの「使用を開始する」をクリックします。

アプリケーションの名前を入力して「Confirm deployment」をクリックします。

少し待っていると出来上がります。
「Studioを起動する」をクリックします。

Select an envelopmentでstagingを選択します。

Amplify Studioが起動できました。

次はFigmaでデザインを作成するのですが、今回はAWS Amplify UI Kitを使用します。
Amplify Studioの「UI Library」を選択して「Get Started」をクリックします。

「Use our Figma template」をクリックします。

Figmaの画面が開くので「Duplicate」をクリックします。

「Share」をクリックします。

「Copy link」をクリックします。

Amplify Studioに戻ってコピーしたURLを貼り付けます。
「Continue」をクリックします。

「Allow access」をクリックします。

エラーになりました。

Figmaでデザインを新規作成して連携してみましたが、同様のエラーになりました。開発者ツールでコンソールログを確認するとJSエラーが発生しています。ブラウザをChromeからFireFoxに変更して同様の手順を実施すると連携できました。

「Accept all」をクリックします。

AmplifyStudioにFigmaのコンポーネントが連携できました。
AmplifyStudioのコンポーネントにFigmaのコンポーネントが1対1で連携されています。

データモデルの作成とコンポーネントへの紐づけ

Amplify Studioの「Data」を選択して「Add model」をクリックします。
Modelの名前「Test」を入力、Fieldを追加して「Save and deploy」をクリックします。「image_url」「test」「detail」の３項目を追加しています。

「Deploy」をクリックします。

少し待っていると完了します。完了したら動作確認用データを作成するために「Content」を選択して「Auto-generate seed data」をクリックします。

データ件数とconstraintを指定して「Generate data」をクリックします。

image_urlは画像のURLが必要なのでUnsplash’s random photo generatorでランダム画像を生成してURLを更新します。

データモデルができたのでUIコンポーネントと紐づけます。「UI Library」の「CardA」を選択して「Configure」をクリックします。

「Component properties」の「Add prop」をクリックして「Name」に「test」と入力、Typeに「Test」を選択します。

「image」を選択して「Child properties」の「Set prop」をクリックします。「Prop」に「src」を選択して「Value」に「test.image_url」を選択します。

同様に2つのテキストにもデータモデルで作成した項目をそれぞれ紐づけます。
FireFoxではプレビューに画像が表示されませんでした。ブラウザをChromeに変更して画面を確認できます。

ローカルへの取り込みと動作確認

ローカルでアプリケーションのフォルダを作成してcdします。

cd app

Reactアプリケーションを初期化します。

npx create-react-app .

インストールされていない場合は以下のメッセージが表示されます。「y」を入力してインストールします。

Need to install the following packages:
create-react-app
Ok to proceed? (y)

ブラウザで「Get component code」をクリックしてamplify pullコマンドをコピーして実行します。

ブラウザが起動してAmplify CLIのログイン許可を求められました。「yes」をクリックします。

editorを選択します。「Visual Studio Code」を選択しました。

? Choose your default editor: (Use arrow keys)
Visual Studio Code
Android Studio
Xcode (macOS only)
Atom Editor
Sublime Text
IntelliJ IDEA
Vim (via Terminal, macOS only)

アプリケーションの種類を選択します。「javascript」を選択します。

? Choose the type of app that you&#039;re building (Use arrow keys)
android
flutter
ios
javascript

使用するフレームワークを選択します。「react」を選択します。

? What javascript framework are you using (Use arrow keys)
angular
ember
ionic
react
react-native
vue
none

ソースディレクトリを入力します。そのままenterします。

? Source Directory Path: (src)

配布ディレクトリを入力します。そのままenterします。

? Distribution Directory Path: (build)

ビルドコマンドを入力します。「npm run build」を入力します。

? Build Command: (npm.cmd run-script build)

スタートコマンドを入力します。「npm start」を入力します。

? Start Command: (npm.cmd run-script start)

バックエンドを変更する予定があるか選択します。「y」を入力します。

? Do you plan on modifying this backend? (Y/n)

App.jsを編集します。CardAを表示するようにします。

import './App.css';
import { CardA } from './ui-components';

function App() {
return (
    &lt;div&gt;
        &lt;CardA /&gt;
    &lt;/div&gt;
);
}

export default App;

import './App.css';

import { CardA } from './ui-components';

function App() {

return (

<div>

</div>

);

}

export default App;

起動します。

npm start

エラーになりました。

Module not found: Error: Can't resolve '@aws-amplify/ui-react/internal' in

1	Module not found: Error: Can't resolve '@aws-amplify/ui-react/internal' in

この下にも大量のエラーが出力されていますが、「@aws-amplify/ui-react」が見つからないようなのでインストールします。

npm i @aws-amplify/ui-react

もう一度起動してみます。
エラーは無くなりCardAが表示されましたがデータが取得できていません。

データを取得するためのjsxを実装します。
amplifyのdatastoreからデータを取得してStateに保存します。
取得したデータの件数分CardAを表示します。

import { useEffect, useState } from "react";
import { DataStore } from '@aws-amplify/datastore';
import { Test as testModel } from "./models";
import { CardA } from "./ui-components";

const TestView =()=&gt;{
    const [state, setState] = useState([]);

    useEffect(() =&gt;{
        const fetchTests = async() =&gt;{
            const output = await DataStore.query(testModel);
            setState(output)
        }
        fetchTests()
    }, [])

    return (
        &lt;div&gt;
            {state.map((test, index) =&gt;{
                return &lt;CardA key={index} test={test} /&gt;
            })}
        &lt;/div&gt;
    )
}

export default TestView;

import { useEffect, useState } from "react";

import { DataStore } from '@aws-amplify/datastore';

import { Test as testModel } from "./models";

import { CardA } from "./ui-components";

const TestView =()=>{

const [state, setState] = useState([]);

useEffect(() =>{

const fetchTests = async() =>{

const output = await DataStore.query(testModel);

setState(output)

}

fetchTests()

}, [])

return (

<div>

{state.map((test, index) =>{

return <CardA key={index} test={test} />

})}

</div>

)

}

export default TestView;

CardAはTestViewから出力するためApp.jsの「CardA」を「TestView」に変更します。

import './App.css';
import TestView from './TestView';

function App() {
  return (
    &lt;div className="App"&gt;
      &lt;TestView /&gt;
    &lt;/div&gt;
  );
}

export default App;

import './App.css';

import TestView from './TestView';

function App() {

return (

</div>

);

}

export default App;

データが表示されました。

自動生成されたリソースとコード

FigmaからAmplify Studioへ連携したUIライブラリは「src/ui-components」に展開されています。

ReactコンポーネントとTypeScriptの型定義が生成されています。Reactコンポーネントではデータモデルとの紐づけで行った「src={test?.image_url}」のように展開されていて、データが表示できるようになっています.

データモデルで作成したデータ型は「src/models/schema.js」に定義されています。

また、「src/models/index.js」でDataStoreから使用できるように実装されています。どちらもTypeScriptの型定義が生成されています。

DataStoreから呼び出されるGraphQLはAWS AppSyncでホストされています。

データはDynamoDBに格納されています。

まとめ

AWS Amplify StudioとFigmaを連携してReactのアプリケーションを動かしてみました。

良いところ

自動生成されたReactのコードも読める状態で、TypeScriptの型定義も自動生成されています。
DynamoDBのデータ操作もDataStoreを使ってAWS AppSyncと連携してGraphQLで行うことができます。

考慮が必要なところ

生成されたReactコンポーネントを変更しないように実装を行う必要があります。コメントにamplify pullすると上書きされるのでファイルを更新しないように注意書きがあるためです。
FigmaのコンポーネントとReactのコンポーネントが1対1になるので、UIの設計とReactコンポーネントの設計を一致させる必要があります。

後者はAWS Amplify Studioの課題ではなく、Reactコンポーネントを自動生成するときの共通的な課題です。

AWS・クラウドのMSP スカイアーチネットワークス株式会社

AWS・クラウド導入における構築から監視・運用保守までをマネージドサービスで提供する、スカイアーチネットワークスの公式サイト。AWS・クラウドを始め、豊富なサーバー管理の経験と安心のセキュリティ対策、専門エンジニアの確かな知識で、お客様のビジネスの成長をサポートします。AWS・クラウド導入における構築から監視・運用保守までをマネージドサービスで提供する、スカイアーチネットワークスの公式サイト。AWS・クラウドを始め、豊富なサーバー管理の経験と安心のセキュリティ対策、専門エンジニアの確かな知識で、お客様のビジネスの成長をサポートします。

投稿者プロフィール

okabe

はじめに

目次

手順の概要

実行環境

手順

Figma無料アカウント作成

Amplify CLIのインストール

FigmaのデザインをAmplify Studioにインポート

データモデルの作成とコンポーネントへの紐づけ

ローカルへの取り込みと動作確認

自動生成されたリソースとコード

まとめ

良いところ

考慮が必要なところ

投稿者プロフィール

最新の投稿

サービス

インフォメーション

企業情報

会社Facebook

はじめに

目次

手順の概要

実行環境

手順

Figma無料アカウント作成

Amplify CLIのインストール

FigmaのデザインをAmplify Studioにインポート

データモデルの作成とコンポーネントへの紐づけ

ローカルへの取り込みと動作確認

自動生成されたリソースとコード

まとめ

良いところ

考慮が必要なところ

投稿者プロフィール

最新の投稿

RECOMMENDこちらの記事も人気です。

Amazon Web Service (AWS) EC2 に新しく T2…

AWS ヘッドライン - 2020.01.21 -

Just-in-Time Registration with AWS I…

Amazon Elastic File System (EFS) を利用…

やってみよう Amazon connect [6] プロンプトの作成

渥美俊英さんインタビュー ~AWSとスカイアーチ~第6章 『クラウドエン…

AWS re:invent2020が開催されました。

[AWS re:Invent 2014]AWS Configを使ってみた

タグクラウド

サービス

インフォメーション

企業情報

会社Facebook

タグ

渥美俊英さんインタビュー ~AWSとスカイアーチ~第6章『クラウドエン…