マイクロサービス & マイクロ フロントエンド システム設計 — 基本から本番まで
概要
このシリーズでは、マイクロサービス バックエンド + マイクロ フロントエンド アーキテクチャを使用して、ゼロから運用環境までを導きます。これは、複数の並行開発チームを必要とする複雑なシステム向けの最新のアーキテクチャ モデルです。
バックエンドまたはフロントエンドのみに焦点を当てた他のシリーズとは異なり、このシリーズは両方の側面とフルスタック アーキテクトの観点を組み合わせており、UI からデータベースまでエンドツーエンド システムを設計する方法を理解するのに役立ちます。
何を学ぶのですか?
🏗️ アーキテクチャとデザイン
- ドメイン駆動設計を使用したシステム分離 (境界付きコンテキスト、イベント ストーミング)
- マイクロサービス バックエンドの設計: API 設計、サービス間通信、データ アーキテクチャ
- マイクロ フロントエンドの設計: モジュール フェデレーション、シェル アプリ、デザイン システム、クロスアプリ通信
🔗 フルスタック統合
- BFF (フロントエンド用バックエンド) パターン — マイクロ フロントエンドとマイクロサービスの間のブリッジ
- API ゲートウェイ — ルーティング、認証、レート制限、ロード バランシング
- GraphQL Federation — 複数のマイクロ フロントエンド用の統合データ レイヤー
🧪 テストと品質
- マイクロサービスのテスト: 単体テスト、統合テスト、契約テスト
- マイクロ フロントエンドのテスト: コンポーネント、ビジュアル リグレッション、E2E
- Pact による消費者主導の契約
🚀 CI/CD とプロダクション
- モノリポジトリとマルチリポジトリの戦略
- サービス/マイクロフロントエンドごとに独立したCI/CDパイプライン
- Canary リリース、Blue-Green デプロイメント、機能フラグ
- フルスタックの可観測性: フロントエンド → API → バックエンド トレース
- 本番準備チェックリスト
📋 ケーススタディ
- 電子商取引プラットフォーム: アーキテクチャから展開までの完全な設計
- 移行ガイド: モノリスからマイクロサービス + マイクロ フロントエンド (ストラングラー図、抽象化によるブランチ)
対象読者
- バックエンド エンジニアは、適切な API を設計するためにマイクロ フロントエンドを理解したいと考えています
- フロントエンド エンジニアは、Micro Frontend を使用してアプリケーションを拡張したいと考えています
- フルスタック エンジニアはエンドツーエンドのアーキテクチャを理解したいと考えています
- ソフトウェア アーキテクトは実稼働システムの青写真が必要です
- Tech Leads は Monolith からの移行を計画しています
知識が必要です
- 少なくとも 1 つのバックエンド言語 (Node.js、Go、Java、Python) を知っていること
- 少なくとも 1 つのフロントエンド フレームワーク (React、Vue、Angular) を知っている
- REST API、HTTP、Docker の基本的な理解
- システム アーキテクチャ: ゼロからヒーローまで シリーズは良い補足ですが、必須ではありません
シリーズで使用されているテクノロジー
| レイヤー | テクノロジー |
|---|---|
| マイクロ フロントエンド | React、モジュール フェデレーション (Webpack 5 / Vite)、シングルスパ、Web コンポーネント |
| デザインシステム | Storybook、Tailwind CSS、Shadow DOM、CSS モジュール |
| BFF / API ゲートウェイ | Node.js、Kong/APISIX、GraphQL (Apollo Federation) |
| バックエンド | Node.js/Go、REST、gRPC、GraphQL |
| メッセージ | RabbitMQ、Apache Kafka、NATS |
| データベース | PostgreSQL、MongoDB、Redis、Elasticsearch |
| CI/CD | GitHub アクション、GitLab CI、ArgoCD、Docker、Kubernetes |
| 可観測性 | OpenTelemetry、Grafana、Prometheus、Jaeger |
| 認証 | Keycloak、OAuth2、JWT、OIDC |
学習パス
Phần 1-3: Nền tảng Backend (9 bài) → Hiểu mindset & thiết kế backend
Phần 4-5: Micro Frontend (7 bài) → Nắm vững kiến trúc & xây dựng frontend
Phần 6: API Layer (3 bài) → Kết nối backend & frontend
Phần 7-8: Testing & CI/CD (6 bài) → Đảm bảo chất lượng & tự động hóa
Phần 9: Production (3 bài) → Observability & production readiness
Phần 10: Case Studies (2 bài) → Áp dụng thực tế & migration