Skip to main content

BFF(Backends For Frontend)

Overview​

これはめちゃくちゃ参考になる
参考URL
Next.js BFFとかExpress記事
Next.js BFF for Proxy + SSR

フロントエンドのためのバックエンド。フロントエンドのためにAPIをコールしたり、HTMLを生成したりするサーバのことを指す。
上記だと、今までのWebアプリケーションサーバとの違いは本質的にはそこまで変わらないが、フロントエンド専用という役割が異なる。
専門領域に特化させることで集中できるようにするアーキテクチャ設計のことをBFFとよぶ

Webアプリケーションサーバの役割​

  • データベースや全文検索エンジンといったミドルウェアからデータを取得、更新する
  • ページを構築する
  • HTTPのインターフェースとしてユーザからの入力情報を得る ここで、データベースや全文検索エンジンからデータを取得、更新する部分はデータの整合性や信頼性を担保しつつ管理することを目的とします。ページを構築する箇所やユーザーからの入力情報を得る箇所はユーザーインターフェース（UI）に該当し、ユーザー体験（UX）を向上させることを目的としています。

BFFの構成​

BFFはリバースプロキシとバックエンドのAPIサーバの間に設置する構成をとることが多い。
リバースプロキシは静的アセットファイルの圧縮。キャッシュといったWebアプリケーションサーバの肩代わりをするためのサーバ。
バックエンドのAPIサーバは主にデータベースや全文検索エンジンといったミドルウェアと連携してリソースを操作したりデータを管理したりする役割として振る舞う。

BFFはこの2つのサーバ間でページを構築したり、ユーザからの入力情報を受け付けてバックエンドに流したりといったUI/UXに関わる機能を担当する。

BFFが必要な技術的背景、歴史的経緯​

なぜBFFが必要なのかを知るためにはアプリケーションの内部構造が時代とともに変化し続けているという背景

  • リバースプロキシとは リクエストの流れはプロキシと同様で、クライアント → リバースプロキシ → Webサーバのように伝わる。 リバースプロキシではクライアントはWebサーバの存在を知らないという大きな違いがある。そのためBackendのURLが知られない。

BFFのメリット​

BFF（Backends For Frontend）パターンは、特定のフロントエンドアプリケーション（ウェブ、モバイルなど）用にカスタマイズされたバックエンドサービスを提供するアーキテクチャスタイルです。このアプローチにはいくつかの明確なメリットがあります

  1. フロントエンドに最適化されたAPI BFFを使用すると、特定のフロントエンドアプリケーションのニーズに合わせてAPIを最適化できる。
    これにより、フロントエンドが必要とする正確なデータ形式を提供することが可能になり、余分なデータフェッチや不必要なデータ処理を避けることができる。

  2. パフォーマンスの向上 フロントエンド特有のニーズに合わせてAPIが最適化されるため、ネットワークリクエストの回数を減らし、データサイズを小さくすることが可能。
    これにより、アプリケーションのロード時間が短縮され、ユーザーエクスペリエンスが向上します。

  3. セキュリティの強化 BFFを介してフロントエンドとバックエンドの通信を行うことで、バックエンドサービスのエンドポイントを直接公開しなくて済む。
    これにより、APIキーやバックエンドのURLが外部に露出するリスクを減らし、セキュリティを強化できます。

  4. 複雑なビジネスロジックの隠蔽 BFFは、複数のバックエンドサービスからデータを取得し、フロントエンドが必要とする形式に変換する役割を担う。
    これにより、フロントエンド開発者は複雑なビジネスロジックやバックエンドサービスの統合の詳細を気にすることなく、UIの実装に集中できます。

  5. フロントエンドの開発速度の向上 BFFを使用すると、フロントエンド開発チームは自身のニーズに合わせてバックエンドAPIを調整できるため、開発プロセスが迅速化される。
    また、フロントエンドとバックエンドの開発が疎結合になるため、互いの開発に影響を与えることなく、独立して作業を進めることができます。

  6. 異なるフロントエンド向けのカスタマイズ ウェブ、モバイル、デスクトップなど、異なるプラットフォーム向けに特化したBFFを用意することで、それぞれのプラットフォーム特有の最適化や機能提供が可能になります。

BFFパターンは、フロントエンドのニーズに合わせてバックエンドサービスをカスタマイズし、効率的かつセキュアなアプリケーション開発を実現するための有効なアプローチです。

Last updated on