翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
AppSync を使用したフロントエンドのバックエンド
公開日: 2022 年 5 月 6 日 (図の履歴)
このアーキテクチャは、フロントエンドクライアントアプリケーションがバックエンド for Frontend (BFF) パターンを適用して UI 対応データ射影をロードし、イベント駆動型通知で UI を更新する方法を示しています。WebSockets 経由で Amazon AppSync GraphQL サブスクリプションを使用して、マイクロサービスがドメイン集計のミューテーションに関するイベントを発生させたときにリアルタイムの更新をプッシュします。
AppSync を使用したフロントエンドのバックエンド
次の手順では、アーキテクチャについて説明します。
-
専用 BFF イベントコンシューマーは、アプリケーションからイベントをキャッチし、Amazon DynamoDB でデータの非正規化ビューを保持してフロントエンドを消費します。
-
UI ロードでは、フロントエンドクライアントは Amazon Cognito で認証し、Amazon AppSync で構築された BFF API を呼び出して GraphQL でデータをクエリします。API は、DynamoDB から直接、または で構築された BFF クエリハンドラーを介してデータを取得しますAWS Lambda。
-
フロントエンドクライアントは、WebSockets 経由で Amazon AppSync サブスクリプションを使用して後続のデータ変更をサブスクライブします。 WebSockets
-
BFF イベントコンシューマーは、アプリケーションからのすべての関連イベントを引き続き処理し、非正規化されたフロントエンドデータビューをリアルタイムで更新します。
-
Amazon DynamoDB Streams は、BFF データベースのデータ変更からすべてのイベントをキャプチャします。Lambda トリガーは、新しいストリームレコードを検出すると、BFF ストリームハンドラー関数を非同期的に呼び出します。
-
BFF ストリームハンドラーは、Amazon AppSync GraphQL スキーマで空のミューテーションを呼び出して、サブスクリプションを強制的にトリガーし、接続されたクライアントに通知を送信します。
-
フロントエンドクライアントは Amazon AppSync から変更通知を受け取り、UI コンテンツを更新します。
詳細情報
詳細については、次のリソースを参照してください。
図の履歴
このリファレンスアーキテクチャ図の更新について通知を受け取るには、RSS フィードをサブスクライブします。
| 変更 | 説明 | 日付 |
|---|---|---|
初版発行 | リファレンスアーキテクチャ図が最初に公開されました。 | 2022 年 5 月 6 日 |
注記
RSS 更新をサブスクライブするには、使用しているブラウザで RSS プラグインが有効になっている必要があります。
