はじめに
アーキテクチャと DDD 進化のロードマップを理解した後、この記事では、フルスタック マイクロサービス + マイクロ フロントエンド システムの 全体的な青写真を描きます。このアーキテクチャ マップについては、シリーズ全体で詳しく説明します。
1. アーキテクチャの概要
1.1 フルスタック アーキテクチャ ブループリント
┌─────────────────────────────────────────────────────┐
│ CLIENTS │
│ (Browser, Mobile, IoT) │
└──────────────────────┬──────────────────────────────┘
│
┌──────────────────────┴──────────────────────────────┐
│ CDN (Static Assets) │
│ CloudFront / CloudFlare / Vercel │
└──────────────────────┬──────────────────────────────┘
│
┌──────────────────────┴──────────────────────────────┐
│ MICRO FRONTEND LAYER │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────────┐ │
│ │Shell │ │Produc│ │ Cart │ │Order │ │ Account │ │
│ │ App │ │ MFE │ │ MFE │ │ MFE │ │ MFE │ │
│ └──┬───┘ └──┬───┘ └──┬───┘ └──┬───┘ └────┬─────┘ │
└─────┼────────┼────────┼────────┼──────────┼─────────┘
└────────┴────────┴────────┴──────────┘
│
┌──────────────────────┴──────────────────────────────┐
│ BFF LAYER (Optional) │
│ Backend for Frontend Aggregation │
└──────────────────────┬──────────────────────────────┘
│
┌──────────────────────┴──────────────────────────────┐
│ API GATEWAY │
│ (Kong / APISIX / Envoy Gateway) │
│ Auth │ Rate Limit │ Routing │ Load Balance │
└──┬────────┬────────────┬────────────┬───────────────┘
│ │ │ │
┌──┴──┐ ┌───┴───┐ ┌────┴────┐ ┌────┴────┐
│User │ │Product│ │ Cart │ │ Order │
│ µS │ │ µS │ │ µS │ │ µS │
│ │ │ │ │ │ │ │
│┌───┐│ │┌────┐ │ │ ┌─────┐ │ │ ┌─────┐ │
││PG ││ ││PG │ │ │ │Redis│ │ │ │ PG │ │
│└───┘│ │└────┘ │ │ └─────┘ │ │ └─────┘ │
└─────┘ └───────┘ └─────────┘ └────┬────┘
│
┌────────────────────────────────────┴────────────────┐
│ MESSAGE BROKER │
│ (Kafka / RabbitMQ / NATS) │
│ Events: OrderPlaced, PaymentConfirmed, etc. │
└─────────────────────────────────────────────────────┘
2. 主要な層
2.1 マイクロフロントエンド層
シェル アプリケーション (コンテナ) は、リモート マイクロ フロントエンド アプリケーションを調整します。各 MFE は独立したアプリケーションであり、個別に構築および展開されます。
シェルアプリの責任:
- 一般的なレイアウト (ヘッダー、フッター、サイドバー)
- ルーティングとナビゲーション
- 認証状態
- エラー境界
2.2 BFF レイヤー
フロントエンド用バックエンドは、多くのマイクロサービスからのデータを集約し、各マイクロ フロントエンドに適した形式に変換します。次の場合に特に役立ちます。
- フロントエンドは 1 つのリクエストで多くのサービスからのデータを必要とします
- モバイルとウェブでは異なるデータ形式が必要です
- フロントエンドには別のキャッシュ層が必要
2.3 APIゲートウェイ
すべての API 呼び出しのエントリ ポイント。横断的な問題への対処:
- 認証/認可: JWT トークンを検証します。
- レート制限: バックエンドを悪用から保護します。
- リクエスト ルーティング: 正しいサービスにルーティングします。
- 負荷分散: トラフィック分散
- SSL 終了: HTTPS を処理します
2.4 マイクロサービス層
各マイクロサービスは境界コンテキストを所有し、独自のデータベースを持ち、独立してデプロイされます。 REST/gRPC (同期) またはメッセージ ブローカー (非同期) 経由で通信します。
2.5 メッセージ ブローカー/イベント バス
サービス間の非同期通信のためのバックボーン。疎結合とイベント駆動型のデータ フローを確保します。
3. エンドツーエンドのリクエスト フロー
User clicks "Add to Cart" trên Product MFE:
1. Product MFE → Shell App (event: addToCart)
2. Shell App → API Gateway (POST /api/cart/items)
3. API Gateway → Auth check → Route đến Cart Service
4. Cart Service → Validate product (call Product Service via gRPC)
5. Cart Service → Save to Redis
6. Cart Service → Publish event "ItemAddedToCart" lên Kafka
7. Response → API Gateway → Shell App
8. Shell App → Cart MFE (update cart badge via custom event)
9. Recommendation Service (async) → Listen event → Update recommendations
4. テクノロジースタックの概要
| レイヤー | テクノロジー | なぜ |
|---|---|---|
| マイクロフロントエンド | React + モジュールフェデレーション | 成熟したエコシステム、大規模なコミュニティ |
| シェルアプリ | React + React ルーター | SPA ルーティング、遅延読み込み |
| デザインシステム | Tailwind CSS + ストーリーブック | 一貫した UI、コンポーネント ライブラリ |
| 親友 | Node.js (高速化) | フロントエンドと同じ言語、高速 I/O |
| APIゲートウェイ | コング / APISIX | プラグイン エコシステム、高パフォーマンス |
| マイクロサービス | Node.js/Go | CRUD 用のノード、高パフォーマンスを目指す |
| メッセージブローカー | アパッチカフカ | 耐久性、再現性、高スループット |
| データベース | PostgreSQL、Redis、Elasticsearch | 多言語永続性 |
| 認証 | キークローク | オープンソースの完全な OAuth2/OIDC |
| CI/CD | GitHub アクション + ArgoCD | GitOps、Kubernetes ネイティブ |
| 可観測性 | OpenTelemetry + Grafana スタック | ベンダー中立のフルスタック トレース |
概要
この記事では、シリーズ全体の概要建築マップを提供します。各レイヤーについては、次のセクションで詳しく説明します。全体像を理解すると、各コンポーネントの詳細を検討するときに道に迷うことがなくなります。