Open2

【アーキテクチャ/設計】BFF(Backend For Frontend)について

まさぴょん🐱まさぴょん🐱

BFF(Backend For Frontend)について📝

BFF(Backend for Frontend)アーキテクチャは、異なるフロントエンドクライアントのニーズに応じて専用のバックエンドを提供する設計パターンです。
このアーキテクチャは、特にモバイルアプリやウェブアプリなど、異なるデバイスやユーザーインターフェースが異なるデータ要求を持つ場合に有効です。

BFFアーキテクチャの概要

BFFアーキテクチャは、以下のような特徴を持っています:

  • 専用バックエンド: 各フロントエンドクライアント(モバイル、デスクトップなど)に対して専用のバックエンドを設けることで、特定のニーズに応じたデータを提供します。

  • データの最適化: 一般的なAPIを使用する場合、すべてのクライアントが同じデータを取得するため、不要なデータが含まれることがあります。BFFでは、必要なデータのみを提供することで、パフォーマンスを向上させます[8][12]。

  • 開発の独立性: フロントエンドチームは、他の部分に影響を与えることなく、専用のバックエンドを調整できます。これにより、開発の柔軟性が増し、スケーラビリティが向上します。

  • セキュリティの向上: BFFは、クライアントとコアバックエンドサービスの間にセキュリティ層を提供し、直接的なアクセスを制限します。

類似する用語との比較

BFFアーキテクチャに関連する用語として、以下のものがあります:

  • API Gateway: API Gatewayは、複数のバックエンドサービスへの単一のエントリーポイントを提供しますが、BFFは特定のフロントエンドのニーズに応じてバックエンドをカスタマイズします。BFFはAPI Gatewayの一種と見なされることもありますが、クライアントごとに特化している点が異なります。

  • マイクロサービス: BFFはマイクロサービスアーキテクチャの一部として機能することが多いですが、マイクロサービスは機能ごとに分割されたサービスの集合体であり、BFFはそれらのサービスをフロントエンドに特化して提供する役割を果たします。

BFFアーキテクチャの利点と課題

利点

  • ユーザー体験の向上
  • データの過剰取得を防ぐ
  • 開発の独立性と柔軟性
  • セキュリティの強化

課題

  • 追加の通信レイヤーによる遅延
  • メンテナンスのオーバーヘッド
  • 複雑性の増加

情報整理表

項目 説明
アーキテクチャ名 BFF(Backend for Frontend)
目的 フロントエンドクライアントごとに専用のバックエンドを提供し、データを最適化すること。
類似用語 API Gateway、マイクロサービス
利点 ユーザー体験の向上、データの最適化、開発の独立性、セキュリティの強化
課題 通信遅延、メンテナンスオーバーヘッド、システムの複雑性

このように、BFFアーキテクチャは、異なるフロントエンドのニーズに応じた柔軟で効率的なバックエンドサービスを提供するための強力な手法です。

https://zenn.dev/overflow_offers/articles/20220418-what-is-bff-architecture

https://qiita.com/Godfrey920/items/cdea312a95e2916f5c8b

https://blogs.infosys.com/digital-experience/web-ui-ux/backend-for-front-end-architectural-pattern.html

https://www.openlegacy.com/blog/backend-for-frontend

https://zenn.dev/kumagoro_95/scraps/4c50acb16400de

まさぴょん🐱まさぴょん🐱

BFF(Backend For Frontend)アーキテクチャについて📝 by GPT o1

BFF(Backend For Frontend)アーキテクチャは、フロントエンドの種類(Webアプリ、モバイルアプリなど)ごとに専用のバックエンドを用意するアーキテクチャパターンです。

BFFアーキテクチャの背景とメリット

  1. UI/UXの最適化が可能

    • 各フロントエンド(Web/スマホなど)が必要とするデータやロジックを、専用のバックエンドに集約して実装できます。
    • 共通の汎用APIを利用していた場合、フロントエンド側で余計なデータを処理したり複雑なロジックを持たせなければならないケースが発生しますが、BFFを導入することでフロントエンド個別の要件に合わせた最小限のインターフェースを提供できます。
  2. 変更やリリースの影響範囲を限定

    • あるフロントエンドの仕様変更があっても、そのフロントエンド専用のBFFだけ修正すれば済みます。
    • これにより、他のフロントエンドや共通部分への影響を減らし、開発・運用コストを下げることができます。
  3. フロントエンドの開発チームとバックエンドの開発チームの切り離し

    • バックエンドをフロントエンド側のチームが管理しやすいように分割できるため、UI/UXチームの裁量が広がります。
    • コミュニケーションコストの低減や、責務分割の明確化にも役立ちます。

BFFアーキテクチャの留意点・デメリット

  1. バックエンドの数が増える

    • フロントエンドの種類が増えると、その数だけバックエンドも必要になるため、サービス全体で見ると管理対象が多くなります。
  2. 横断的な機能の重複実装

    • 認証・認可やロギングなど、共通化したほうが望ましい機能を各BFFで重複実装してしまう可能性があります。
    • 共通化すべきものはライブラリ化・プラットフォーム化を行い、BFFごとに適宜導入する仕組みが必要です。
  3. APIゲートウェイとの使い分け

    • マイクロサービスアーキテクチャでは、APIゲートウェイを導入してマイクロサービス群を集約・オーケストレーションするパターンが一般的ですが、BFFを導入する際にAPIゲートウェイとの役割分担をどうするか検討が必要です。
    • ゲートウェイで認証やリクエストルーティングを担い、BFFでクライアント別のユースケースを担当、といったパターンがよくあります。

類似する用語・関連概念

用語・概念 説明 BFFとの比較
API Gateway マイクロサービスなど多くのサービスをまとめて管理するフロントドア。認証やルーティング、ロードバランシング、レート制限などを担う。 BFFは「各フロントエンドに合わせたバックエンド」を作るのが主目的。一方でAPI Gatewayは「複数のサービスへの共通的な入り口・制御」という役割が大きい。併用するケースも多い。
Microservices サービスを細かい単位(マイクロサービス)に分割し、それぞれを独立して開発・デプロイするアーキテクチャパターン。 BFF自体はマイクロサービスの1つとして機能する場合もある。複数のマイクロサービスのAPIをBFFが集約し、フロントエンドに最適な形で提供するという構成が典型的。
GraphQL クライアントが欲しいデータをクエリで指定し、必要最小限のデータだけを取得できるAPI設計手法。 BFFもフロントエンドごとの最適化が目的だが、GraphQLはクエリによって柔軟に必要なデータを取得する。両者は排他的ではなく、BFFの実装の中でGraphQLを採用するケースもある。
Aggregator Pattern マイクロサービス間の複数のAPI呼び出しを集約する仕組み。各フロントエンドが直接多数のサービスに問い合わせるのを避けるために、集約用のサービスを設置する。 BFFでは「フロントエンドごと」に設置するが、Aggregatorは「複数のマイクロサービスからのデータ統合用」に設置することが多い。BFFにAggregatorの役割が含まれるケースもある。

まとめ

  • BFFアーキテクチャは、フロントエンドごとのニーズに合わせて個別のバックエンド(API)を用意することで、UI/UXの最適化やリリース・変更コスト低減を実現できます。
  • ただしバックエンドの数が増える点や、共通機能の重複実装リスクを考慮しながら、APIゲートウェイやマイクロサービスと併用するといった構成が一般的です。

情報整理表(Markdown形式)

以下の表で、BFFアーキテクチャや関連概念について簡単に整理します。

項目 説明 メリット デメリット / 留意点 主なユースケース
BFF (Backend For Frontend) - フロントエンドごとに専用のバックエンドを用意する
- UI/UXに最適化されたAPIをフロントエンドチームが制御しやすい形で提供
- フロントエンドごとの最適化が容易
- 変更時の影響範囲が限定される
- UI/UXの改善スピードが上がる
- バックエンドの数が増える
- 共通機能の重複リスク
- APIゲートウェイ等との役割分担を検討する必要
- Webアプリとモバイルアプリ等、複数フロントエンドを抱えるサービス
- UI/UXを素早く改善したい場合
API Gateway - 複数のマイクロサービスや外部サービスの入り口を一元管理
- 認証・認可やルーティング、レート制限、監視など共通基盤機能を担当
- セキュリティや監視の統合が容易
- マイクロサービスをクライアントから隠蔽できる
- 単一障害点(SPOF)になりうる
- 複雑なルーティングルールが必要になる場合がある
- 大規模なマイクロサービス構成
- 共通基盤を集約し運用・監視を統合したい場合
Microservices - 大きなシステムを小さなサービスに分割し、それぞれを独立して開発・デプロイ
- サービス間通信はAPIやメッセージングで行う
- スケーリングや変更がサービス単位で行いやすい
- チームごとに異なる技術スタックも導入可能
- サービス間通信が増える
- 運用・監視が複雑化しやすい
- 大規模サービスの継続的開発・デリバリー
- チームが複数サービスを分担して素早く開発を進めたい場合
GraphQL - クライアントが必要なデータをクエリで指定し、サーバーから返却されるレスポンスを最適化できる - データ取得量を最小化できる
- スキーマベースで型の管理がしやすい
- 学習コストがある
- サーバー側の実装が複雑化する場合がある
- 複数のデータソースを1つのインターフェースとして公開したい場合
- 多様なフロントエンドから複雑なデータ要求が来る場合
Aggregator Pattern - 複数のマイクロサービスのAPI呼び出しを一括で行い、結果をまとめて返却する
- フロントエンドが直接複数サービスを呼び出すのを防ぐ
- フロントエンドの実装をシンプル化
- ネットワーク呼び出し回数を削減
- 集約のロジックが肥大化しやすい
- 正常系・例外系の振る舞いを複数サービスにまたがって管理する必要
- マイクロサービスが多数ある場合
- フロントエンドからのAPI呼び出しをシンプルにしたい場合

上記を参考に、プロダクトやチームの事情に合わせてBFFアーキテクチャの採用を検討してみてください。