はじめに
フロントエンド用バックエンド (BFF) は、フロントエンド クライアントごとに個別の バックエンド レイヤー を配置するパターンです。 BFF は複数のマイクロサービスからデータを集約し、特定のフロントエンドに適した形式に変換します。
1. BFF が必要な理由は何ですか?
1.1 BFF がいないという問題
❌ Mỗi MFE gọi trực tiếp nhiều microservices:
Product MFE ──► Product Service
──► Review Service
──► Inventory Service
──► Pricing Service
→ 4 API calls cho 1 product page
→ Frontend phải aggregate data
→ Over-fetching (mỗi API trả về nhiều hơn cần)
→ Latency: waterfall requests
1.2 BFF を使用する場合
✅ BFF aggregates cho frontend:
Product MFE ──► Web BFF ──► Product Service
──► Review Service
──► Inventory Service
→ 1 API call cho 1 product page
→ BFF aggregate và transform data
→ Frontend nhận đúng data cần
→ Parallel calls tại BFF layer
2. BFF アーキテクチャ
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Web App │ │ Mobile App │ │ Admin App │
│ (MFE) │ │ (React │ │ (MFE) │
│ │ │ Native) │ │ │
└──────┬──────┘ └──────┬──────┘ └──────┬──────┘
│ │ │
▼ ▼ ▼
┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ Web BFF │ │ Mobile BFF │ │ Admin BFF │
│ (Node.js) │ │ (Node.js) │ │ (Node.js) │
│ Full data │ │ Compact data│ │ All CRUD │
└──────┬───────┘ └──────┬───────┘ └──────┬───────┘
│ │ │
└────────────────┼────────────────┘
▼
┌─────────────────┐
│ Microservices │
│ (gRPC / REST) │
└─────────────────┘
3. BFF 設計原則
3.1 フロントエンド タイプごとに 1 つの BFF
|フロントエンド |親友 | | 向けに最適化 |----------|-----|---------------| |ウェブ (デスクトップ) |ウェブ親友 |完全なデータ、豊富な UI | |モバイル |モバイル親友 |コンパクトなデータ、帯域幅 | |管理者パネル |管理者の親友 | CRUD 操作 | |サードパーティ |パブリック API (BFF ではない) |安定した、バージョン管理された |
3.2 BFF の責任
BFF SHOULD:
✅ Aggregate data từ multiple services
✅ Transform data cho frontend format
✅ Handle authentication (validate tokens)
✅ Caching (Redis) cho frequently accessed data
✅ Rate limiting per client
BFF SHOULD NOT:
❌ Contain business logic (belongs to services)
❌ Have its own database (stateless!)
❌ Become a "smart proxy" monolith
❌ Be shared across different frontends
4. BFF の実装 (Node.js/Fastify)
// Web BFF - Product Page Aggregation
app.get('/api/bff/product/:id', async (req, reply) => {
const { id } = req.params;
// Parallel calls to microservices
const [product, reviews, inventory] = await Promise.all([
productService.getProduct(id),
reviewService.getReviews(id, { limit: 5 }),
inventoryService.getStock(id),
]);
// Transform for web frontend
return {
...product,
rating: reviews.averageRating,
topReviews: reviews.items.slice(0, 3),
inStock: inventory.quantity > 0,
stockLevel: inventory.quantity > 10 ? 'high' : 'low',
};
});
5. BFF と API ゲートウェイ
| 特長 | APIゲートウェイ | 親友 |
|---|---|---|
| 目的 | 横断的な懸念事項 | フロントエンド固有の集約 |
| ロジック | ルーティング、認証、レート制限 | データ変換 |
| クライアントごと | ワン・フォー・オール | フロントエンド タイプごとに 1 つ |
| 管理者 | プラットフォームチーム | フロントエンドチーム |
実際には、両方を使用します。
Frontend → API Gateway → BFF → Microservices
(routing, (aggregation,
auth, transformation)
rate limit)
概要
- BFF = フロントエンド タイプごとに個別のバックエンド
- データを集約し、フォーマットを変換し、フロントエンドの複雑さを軽減します
- ステートレス、ビジネス ロジックは含まれません
- フロントエンド タイプ (Web、モバイル、管理) ごとに 1 つの BFF
- API ゲートウェイと組み合わせて使用されることが多い