yuheijotaki.com

AWS Amplify Studio を触ってみた

すこし前に話題になったAmplify Studioを触ってみました。

ReactもFigmaも詳しくないのですが、今っぽいサービスなのと実際にどのくらい使えそうかを確認する目的です。

主に3つツールがそれぞれの役割で登場することになります。

  • Amplify Studio（AWSコンソール）
    • データモデルの定義
    • デザインの取り込み
  • Figma（デザインツール）
    • UIコンポーネントの作成
  • ターミナル、VSCodeなど
    • Amplify CLIから生成コードの取り込み
    • Reactアプリケーションの開発作業

行う順序の縛りはそこまでないので、得意なものや気が向いたものから始められると思います。

※ 動作環境：macOS Monterey / npm v8.19.2 / Node.js v14.17.0

Amplify StudioでStudio起動

AWSコンソールからAmplifyに移動し、Amplify Studioの「使用を開始する」からスタート。

アプリケーション名は適当に「amplify-studio-sample」に。 2,3分でセットアップが完了する。

「Studioを起動する」をクリック。

Studioが起動される。

Figmaのデザインをインポート

Figmaのデザインを取り込む設定をする。
サイドバーの Design > UI Library を選択。「Get started」をクリック。

今回はFigmaのデザインをゼロから作るのではなくテンプレートを使う。
「①Use our Figma templateto get started」をクリック。

ブラウザでFigmaのページが開くので「コピーを取得する」をクリック。

Figmaにファイルがコピーされる。
右上の「共有」から「リンクをコピーする」をクリック。

先ほどのAmplify Studioのページに戻ってコピーしたリンクを②に貼り付け。
アップデート（初回の場合はすべての変更）を取り込むかどうかを聞かれる。
「Accept all changes」で取り込み。
以上でAmplify StudioとFigmaの連携が完了。

データモデルの作成

Set up > Data の「Add model」からデータモデルの追加を行う。
今回は書籍のタイトル、書影、金額を表示できるようなものにする。
編集が終わったら「Save and Deploy」をクリック。

データモデルのデプロイは5分ほどで完了。

Manage > Content のからサンプルデータを作成しておく。

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

次にコンポーネントとの紐付けをする。
UI Libraryから「TallCard」を選択して「Configure」をクリック。

「Component properties」で登録したデータモデルを選択。
「Child properties」では項目を紐付け設定する。
紐付けしていくと、先ほど登録していたサンプルデータのプレビューが見れる。

次にコレクション（作成したコンポーネントのかたまり）を作成する。
TallCardコンポーネントの作成画面から「Create collection」を選択し「TallCardCollection」の名前で登録。

今回は横並びのリストとしてレイアウトを決定してコレクションの作成を完了。

Amplify CLIのインストールとユーザー作成

Amplify CLIのインストールをする。

$ npm install -g @aws-amplify/cli

command not found: amplify で詰まったが、ターミナル再起動で次へ進めた。

AWSアカウント設定をする。

$ amplify configure

ブラウザが起動してログイン画面が表示される。
ブラウザでログイン後、ターミナルに戻ってエンターを押す。

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

リージョン選択、IAMユーザー名の設定をする。

Specify the AWS Region
? region:  ap-northeast-1
Specify the username of the new IAM user:
? user name:  amplify-xxxxx

ブラウザが起動してIAMユーザー作成画面が表示される。
デフォルトで権限選択されているので、そのままユーザー作成する。
ブラウザで作成後、ターミナルに戻ってエンターを押す。

Complete the user creation using the AWS console
https://console.aws.amazon.com/iam/home?region=ap-northeast-1#/...
Press Enter to continue

ターミナルで作成したIAMユーザーの accessKeyId と secretAccessKey を入力する。
Profile名は amplify-xxxxx などに設定して完了。

Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name: amplify-xxxxx

Successfully set up the new user.

ローカルでReactアプリの作成

必要なUIモジュールをインストールしておく。

$ npm i @aws-amplify/ui-react

Reactアプリの作成をする。

$ cd /[PATH]/amplify-studio-sample
$ npx create-react-app .

y ですすむ。

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

アプリ作成完了。

Success! Created amplify-studio-sample at /[PATH]/amplify-studio-sample

$npm start でReactアプリの作成できたことを確認。

ローカルのReactアプリで動作確認

Amplify Studioで作成したコンポーネントコレクションの「Get component code」をクリック。

初回は「Initial project setup」の内容を行う。

src/index.js の中身を下記に変更。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import Amplify from 'aws-amplify';
import "@aws-amplify/ui-react/styles.css";
import { AmplifyProvider } from "@aws-amplify/ui-react";
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <AmplifyProvider>
      <App />
    </AmplifyProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

次に「Use this component」の内容を行う。

コンポーネントをローカルにプルする。

$ amplify pull --appId XXXXX --envName staging

ブラウザで認証を開いたりするがOKのまますすめる。
その後コマンドで質問受けるがこれも基本はそのまま。一部のコマンド設定を変更した。

...
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run build
? Start Command: npm start
...

src/App.js を下記に変更する。

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

function App() {
  return (
    <div className="App">
      <TallCardCollection />
    </div>
  );
}

export default App;

コマンドで $ npm start とすると、ブラウザでAmplify Studioと同様のコンテンツが表示された。

その他

/src/ui-components/ 配下にFigmaで作成したコンポーネントのコードが配置されている。

データモデルの型は /src/models/schema.js に定義されている。

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

まとめ

良さそうなこと

  • デザインや開発の不得意がある人でもひとりで簡単な認証含めたサービスが作れてしまいそう

イマイチそうなこと

  • Amplify Studioでコレクション作成する作業でビジュアルの再現ができなそう（他のやり方があるのかも？）
  • Amplifyの生成コードとローカル（Git）のコードとごちゃごちゃになりそう
  • どこまでFigmaのコンポーネントとするか、すべてをコンポーネントにするかなど、設計や認識合わせが事前により必要になってきそう

エンジニアとデザイナーが相互に理解があれば大きな問題にはならないかもですが、実際のプロジェクトのフローを想定すると、ここ誰がやるのかなみたいなフローがちょくちょくあったので、現実的に難しくなりそうな点もありました。

正直勝手に自分の期待値が高かっただけなのか、もう少しいい感じのサービスなのかなと想像してしまっていました。
ただ流行り系のサービスではあるので、アップデートは追っていこうかなと思いました。