【レポート】Level Up! AWS Amplify〜 爆速かつスケーラブルなフルスタック Web / モバイルアプリケーションの開発 〜(AWS-47) #AWSSummit

今回は 2022 年 5 月 25 - 26 日の 2 日間開催された AWS Summit Onlineのセッションレポートをしていきます。セッションのサマリーを理解し、興味があるセッションをチェックすることにご活用ください。また、セッションのアーカイブも公開されておりますので、詳細が気になった方は是非そちらをチェックして下さい。

セッション概要

AWS Amplify ではフロントエンド開発者からバックエンド開発者、そしてスタートアップからエンタープライズまでビジネスの規模や開発者のロールに依存せず、アプリケーションの開発を加速するためのサービスです。このセッションでは Amplify Studio によるフロントエンド開発や、Amplify Console による SSR や ISR でのホスティング、及び AWS CDK との連携などの発展的な Amplify の使用方法を含めて主要機能を振り返り、後半では以前の GraphQL Transformer v1 から大幅に変更があった GraphQL Transformer v2 に Deep Dive し、スキーマ設計の Tips についてご紹介させていただきます。これから Amplify を使い始める方も、既に Amplify を使って開発されている方のどちらにも知っていただきたい内容を詰め込んでおります。

登壇者

AWS 技術統括本部 エンタープライズ技術本部 ストラテジックエンタープライズ ソリューション部
鈴木 貴博　氏

セッションリンク

下記リンクからセッション動画をご確認いただくことが出来ます。
Level Up! AWS Amplify〜 爆速かつスケーラブルなフルスタック Web / モバイルアプリケーションの開発 〜(AWS-47)

レポート

セッションを通して伝えたい内容として下記内容が紹介されてセッションスタートです!
Amplify は爆速で開発できるだけでなく、サービス体制や開発体制の規模を問わずに利用できるサービスである。

アジェンダ

• AWS Amplify の主要機能(CLI, Libraries, Studio, Hosting)
• GraphQL Transformer v2 によるスキーマ設計

AWS Amplify の主要機能(CLI, Libraries, Studio, Hosting)

• Amplify CLI
  • 対話的なインターフェースにより CloudFormation テンプレートの作成およびデプロイを実施可能
  • 各リソースを意識せずに、API 等のカテゴリベースで構築可能
  • API(GraphQL) の場合だと、AppSync, DynamoDB, AppSync のリゾルバを自動生成可能
  • 細かいカスタマイズも amplify override を使用することで実現可能
  • カスタムリソースも追加可能
  • 既存の Cognito をインポートして、Amplify Library から参照することが可能
  • amplify mockコマンドを使ってモックテストを実施可能
  • 実際にクラウド環境にデプロイせずにローカルでモックテストを実施できる
• Amplify Libraries
  • Amplify CLI を使用しない場合でも、API 等のカテゴリ毎に抽象化された構築を実現可能
  • 既存の API がある場合、エンドポイント接続情報などを指定することで Amplify Library から参照させることが可能
  • 実際にフロントエンドのコードを実装する際は CLI で作成した時と同じように抽象化して扱うことができる
  • Amplify CLI で作った環境を共有する場合は、amplify pullコマンドを使用することで、バックエンドへ接続する権限を与えることが可能(リソースを編集する権限は与えずに実行可能)
  • Amplify DataStore という GraphQL のクライアントライブラリを使用可能
  • オフライン時のローカル処理やオンラインに戻った際の処理を追加のコード無しで実現
  • スキーマを定義すれば、フロントエンド側では GraphQL を意識せずにクエリを発行できる
• Amplify Studio
  • Figma で作成されたデザインを Amplify UI Component(React コンポーネント)に変換できる
  • 素の CSS ではなく、可読性の高いコードが出力される
  • Studio 内だけでユーザ管理を実施可能
  • Studio を扱うためだけに IAM 権限を与える必要は無い
  • Amplify DataStore で定義したスキーマを UI コンポーネント にマッピング可能
  • マッピングした UI Component 一覧を取得するような場合、取得用の JavaScript も含めて自動生成
  • Amplify UI として、ログインやファイル等のロジックも含めた UI コンポーネント を提供
• Amplify Hosting
  • 対象の Git ブランチを指定するだけで、ビルドスクリプトの生成、ホスティングを実行する
  • SSR に必要なコンポーネントをサーバレスな構成で自動生成
  • ISR アプリケーションに必要なコンポーネントについてもサーバレスな構成で自動生成
  • CLI や Libraries を使用しない場合でも Hosting のみ使用可能

GraphQL Transformer v2 によるスキーマ設計

Amplify における GraphQL API のスキーマ設計方法と注意点についての話です。

• スキーマに@primaryKey などの独自のディレクティブを追加することで GraphQL Transformer が AppSync のリゾルバーや DynamoDB テーブルを自動生成
• @index ディレクティブや@primary ディレクティブを対象となるフィールドに付与することで GraphQL Transformer が DynamoDB のパーティションキーやソートキー、インデックスを生成
  • @primaryディレクティブのみを使用した際、フィルターをかけた上で全件取得しようとすると、DynamoDB の scanAPI で全件取得してからフィルターをかけるような挙動になる
  • 消費 RCU や scan に要する時間が気になる場合は、@indexディレクティブを採用
    • GSI を生成してくれる
    • Scan してしまっても方が良い場合もあるので要件に合わせて決める
• @hasOne や@hasMany を使用してモデル間のリレーションを定義可能
  • 深くネストされたクエリを自動生成
  • リレーションモデルを簡単に構築可能だが、N+1 問題に注意が必要
  • カスタムカテゴリを使って緩和することも可能だが、開発コストを考えて判断が必要
• auth ディレクティブを使用して各データモデルかフィールド単位で認可のルールを定義可能
  • Deny By Default なので記述が無いと Deny される
  • Pipeline Resolver が生成が自動生成される
  • 特定のロジック後に任意の処理を簡単に追加可能

まとめ

Amplify の機能紹介から、GraphQL スキーマ設計までとても情報量が多いセッションでした。 情報は多いですが、実際のセッションではコード例を示しながらの説明があるのでイメージを膨らませながら理解することができます。 Amplify について興味がある方は必見だと思うので、是非確認してみて下さい。