マイクロサービスを基にしている複合 UI を作成する

  • [アーティクル]

ヒント

このコンテンツは eBook の「コンテナー化された .NET アプリケーションの .NET マイクロサービス アーキテクチャ」からの抜粋です。.NET Docs で閲覧できるほか、PDF として無料ダウンロードすると、オンラインで閲覧できます。

PDF のダウンロード

.NET Microservices Architecture for Containerized .NET Applications eBook cover thumbnail.

マイクロサービス アーキテクチャは多くの場合、データおよびロジックを処理するサーバー側から始まりますが、通常、UI はモノリシックとして処理されます。 ただし、より高度なアプローチとして (マイクロ フロントエンドと呼ばれる)、マイクロサービスに基づいたアプリケーション UI を設計する方法もあります。 これは、サーバー上にマイクロサービスが置かれモノリシック クライアント アプリのみでマイクロサービスが利用されるというのでなく、マイクロサービスによって複合 UI が生成されることを意味します。 このアプローチの場合、ビルドするマイクロサービスは、ロジックおよび視覚的表現の両方を備えることができます。

図 4-20 に、モノリシック クライアント アプリケーションからマイクロサービスを利用するだけの簡単なアプローチを示します。 当然ながら、HTML および JavaScript の生成の間に ASP.NET MVC サービスを含めることが可能です。 図は簡単なものであり、マイクロサービスを利用している単一 (モノリシック) のクライアント UI が強調表示されています。またこれらのマイクロサービスでは、UI シェイプ (HTML および JavaScript) ではなく、ロジックとデータにのみ焦点を当てています。

Diagram of a monolithic UI app connecting to microservices.

図 4-20 バックエンド マイクロサービスを利用するモノリシック UI アプリケーション

これに対し、複合 UI は正確に生成され、マイクロサービス自体で構成されます。 一部のマイクロサービスでは、UI の特定の領域のビジュアル シェイプをドライブしています。 その場合の主な違いは、クライアント UI コンポーネント (TypeScript クラスなど) がテンプレートに基づいており、それらのテンプレートのデータ シェイプ UI ViewModel が各マイクロサービスから取得されるということです。

クライアント アプリケーションの起動時、各クライアント UI コンポーネント (TypeScript クラスなど) は、特定のシナリオで ViewModels を提供できるインフラストラクチャ マイクロサービスに自らを登録します。 マイクロサービスがシェイプを変更すると、UI も変わります。

図 4-21 に、この複合 UI アプローチのバージョンを示します。 このアプローチは、異なる手法に基づく細分化された部分を集計する他のマイクロサービスが存在する可能性があるため、簡略化されています。 それは、従来の Web アプローチ (ASP.NET MVC) または SPA (シングル ページ アプリケーション) のどちらを構築しているかに依存します。

Diagram of a composite UI made up of many view models.

図 4-21 バックエンド マイクロサービスによって成形された複合 UI アプリケーションの例

これらの UI コンポジション マイクロサービスのそれぞれは、小規模な API ゲートウェイに似ています。 ただし、この場合、それぞれが小規模な UI 領域を担当します。

マイクロサービスによってドライブされる複合 UI アプローチは、使用する UI テクノロジに応じて、直面する困難の度合いが異なる可能性があります。 たとえば、SPA またはネイティブ モバイル アプリをビルドするために使用する技法 (Xamarin アプリを開発する場合などで、このアプローチの場合は難易度がより高くなるため) が従来の Web アプリケーションをビルドするために使用する技法と異なる場合があります。

eShopOnContainers サンプル アプリケーションでは複数の理由からモノリシック UI アプローチを使用します。 まず、マイクロサービスとコンテナーの場合です。 複合 UI は高度な技法であり、UI の設計および開発するときには複雑な処理も求められます。 次に、eShopOnContainers でも Xamarin に基づいたネイティブ モバイル アプリが実現されます。この場合は、クライアント C# 側での処理がより複雑になります。

次の参照情報を使用してマイクロサービスに基づく複合 UI に関する知識を深めることをお勧めします。

その他の技術情報

前へ次へ