ELW株式会社 テックブログ

リアルなログをそのままお届けします。

フロントエンド社内勉強会: AWS AppSyncについてと既存プロジェクトでの活用事例

CTOをしております、村上です。今回の勉強会ではAppSyncについて話しましたので、その内容を紹介させていただきます。

そもそもAppSyncとは

AWS AppSyncは、アプリケーションがデータソースへアクセスするためのマネージドサービスです。 GraphQLを使用し、リアルタイム通信にはWebSocketを活用します。

AWSのサイトにわかりやすい図がありましたので、以下はその引用となります

AWS AppSync

GraphQLの利点

GraphQLが使われていて、その利点が以下の公式ドキュメントでこう説明されています

  • 帯域幅が限られているシナリオで、リクエストとレスポンスを最小限に抑えられる。
  • 単一のエンドポイントで複数のデータソースを組み合わせることが可能。
  • クライアントリクエストごとに異なるレスポンス構造を求めるケースに適している。

オーバーフェッチやアンダーフェッチを削減できるというのがわかりやすいメリットだなと思います

データソース

AppSyncでは、以下のデータソースと連携できます。

  • DynamoDB
  • Lambda
  • OpenSearch
  • EventBridge
  • Aurora Serverless
  • HTTPエンドポイント

Resolver

ゾルバーは、サービスにリクエストが送信された際に、フィールドのデータをどのように解決するかを処理するコード単位です。

既存案件での活用例: 架電補助

仕様概要

  • PCで取引先一覧画面を開き、特定の取引先の電話番号を選択
  • 選択した取引先の電話番号や情報が、スマホで開いている架電補助画面にリアルタイムで表示される
    • ユーザー専用の通知・チャット機能のような動作

PCで絞り込んだ取引先に対して、スマホで順に架電していくという使い方を想定しています

自前で実装する場合の課題

  • WebSocketを導入する必要がある。
    • ロードバランサーや認証の対応が必要。
    • 複数サーバー対応のためRedisなどの導入が求められる。
  • フロントエンドのAPIクライアントがWebSocketに対応していないため、新たな基盤が必要。
  • パフォーマンス問題。
    • WebSocketはコネクションを維持するため、同時接続数の上限を考慮する必要がある。

これらの課題を考慮すると、自前実装はかなりの負担となります。

AppSyncを活用した実現方法

  • AppSyncのWebSocketとPub/Subサービスを活用し、リアルタイムデータのやり取りを実現。
  • データの永続化が不要なため、Pub/Subのみで問題なし。
  • 必要に応じてリゾルバーを使用してデータソースにアクセス可能。
  • APIクライアントはGraphQLのSubscriptionを使用。

まとめ

  • 永続化先がKVSで済み、フロントエンドエンジニアが主導するWebアプリケーションに適している。
  • ただし、リゾルバーが増えると管理やテストが難しくなるため、リゾルバー内のビジネスロジックを最小限に抑えるのが理想的。

議事録

  • Event APIがリリースされている。
  • 永続化が容易で、フロントエンドエンジニアにとって扱いやすい。
  • 今後もリアルタイムユースケースが増える可能性が高いため、活用方法を頭の片隅に置いておくとよい。