ASP.NET Core Blazor のホスティング モデル
この記事では、Blazor のさまざまなホスティング モデルと、使用するものを選ぶ方法について説明します。
Blazor は、さまざまな方法でホストできる Web UI コンポーネント (Razor コンポーネント) を構築するための Web フレームワークです。 Razor コンポーネントは、サーバー側では ASP.NET Coreで実行できるのに対し (Blazor Server)、クライアント側では WebAssembly ベースの .NET ランタイム上のブラウザーで実行できます (Blazor WebAssembly、Blazor WASM)。 また、埋め込まれた Web View コントロールにレンダリングするネイティブ モバイル アプリやデスクトップ アプリで Razor コンポーネントをホストすることもできます (Blazor Hybrid)。 ホスティング モデルが何であっても、Razor コンポーネントを構築する方法は "同じです"。 同じ Razor コンポーネントを、変更することなく任意のホスティング モデルで使用できます。
Blazor は、さまざまな方法でホストできる Web UI コンポーネント (Razor コンポーネント) を構築するための Web フレームワークです。 Razor コンポーネントは、サーバー側では ASP.NET Coreで実行できるのに対し (Blazor Server)、クライアント側では WebAssembly ベースの .NET ランタイム上のブラウザーで実行できます (Blazor WebAssembly、Blazor WASM)。 ホスティング モデルが何であっても、Razor コンポーネントを構築する方法は "同じです"。 同じ Razor コンポーネントを、変更することなく任意のホスティング モデルで使用できます。
Blazor Server
Blazor Server ホスティング モデルを使用すると、アプリは ASP.NET Core アプリ内からサーバー上で実行されます。 UI の更新、イベント処理、JavaScript の呼び出しは、WebSocket プロトコルを使用して SignalR 接続経由で処理されます。 接続されている各クライアントに関連付けられているサーバー上の状態は、"回線" と呼ばれます。 回線は特定のネットワーク接続に関連付けられず、一時的なネットワークの中断や、接続が切断されたときにクライアントがサーバーに再接続しようとすることを許容します。
従来のサーバーでレンダリングされるアプリでは、複数のブラウザー画面 (タブまたは iframes) で同じアプリを開いても、通常、サーバー上で追加のリソースは要求されません。 Blazor Server アプリでは、ブラウザーの画面ごとに、個別の回線と、サーバー マネージド コンポーネント状態の個別のインスタンスが必要です。 Blazor では、ブラウザー タブを閉じるか、または外部 URL に移動して "正常に終了" することが検討されます。 正常な終了が行われた場合は、回線と関連リソースが直ちに解放されます。 ネットワークの中断などにより、クライアントが正常に切断されないこともあります。 Blazor Server では、クライアントが再接続できるように、切断された回線が格納されます (その間隔は設定できます)。
クライアントでは、Blazor スクリプト (blazor.server.js) によって、サーバーとの SignalR 接続が確立されます。 スクリプトは、ASP.NET Core 共有フレームワークの埋め込みリソースから、クライアント側のアプリに提供されます。 クライアント側のアプリは、必要に応じて、アプリの状態を永続化および復元する役割を担います。
Blazor Server ホスティング モデルには、次のいくつかの利点があります。
- ダウンロード サイズが Blazor WebAssembly アプリよりもかなり小さく、アプリの読み込み時間が大幅に短縮されます。
- このアプリでは、.NET Core API の使用を含め、サーバーの機能を最大限に活用できます。
- サーバー上の .NET Core はアプリの実行に使用されるため、デバッグなどの既存の .NET ツールは想定どおりに動作します。
- シン クライアントがサポートされています。 たとえば、Blazor Server アプリは、WebAssembly がサポートされていないブラウザーや、リソースが制限されたデバイスで動作します。
- アプリのコンポーネント コードを含め、アプリの .NET/C# コード ベースがクライアントに提供されません。
Blazor Server ホスティング モデルには、次の制限があります。
- 通常、遅延時間が長くなります。 すべてのユーザーの操作にネットワーク ホップが関与します。
- オフライン サポートがありません。 クライアント接続が失敗すると、アプリの動作が停止します。
- 多くのユーザーがアプリを拡張するには、複数のクライアント接続とクライアントの状態を処理するためのサーバー リソースが必要です。
- アプリを提供するのに ASP.NET Core サーバーが必要です。 Content Delivery Network (CDN) からアプリを提供するなどのサーバーレス展開シナリオは不可能です。
Blazor Server アプリには Azure SignalR Service を使用することをお勧めします。 このサービスでは、多数の同時 SignalR 接続に対して Blazor Server アプリをスケールアップできます。
Blazor WebAssembly
クライアント側の Blazor WebAssembly (WASM) アプリは、WebAssembly ベースの .NET ランタイム上のブラウザーで実行されます。 Blazor アプリ、その依存関係、.NET ランタイムがブラウザーにダウンロードされます。 アプリがブラウザー UI スレッド上で直接実行されます。 UI の更新とイベントの処理は、同じプロセス内で行われます。 アプリの資産は、静的コンテンツをクライアントに提供できる Web サーバーまたはサービスに静的ファイルとして展開されます。
Blazor WebAssembly アプリは、ファイルを提供するバックエンド ASP.NET Core アプリのない展開用に作成されると、"スタンドアロン" Blazor WebAssembly アプリと呼ばれます。 アプリがバックエンド アプリでファイルを提供する展開用に作成されると、"ホストされた" Blazor WebAssembly アプリと呼ばれます。
プログレッシブ Web アプリ (PWA) として構築された Blazor WebAssembly アプリでは、最新のブラウザー API を使用して、ネイティブ クライアント アプリの多くの機能が実現されます。たとえば、オフラインでの作業、独自のアプリ ウィンドウでの実行、ホストのオペレーティング システムからの起動、プッシュ通知の受信、バックグラウンドでの自動更新などです。
ホストされた Blazor WebAssembly を使用すると、.NET を使用した完全な Web 開発エクスペリエンスが得られます。これには、クライアントとサーバーのアプリ間でコードを共有する機能、プリレンダリングのサポート、MVC や Razor Pages との統合などが含まれます。 ホストされたクライアント アプリは、Web API、gRPC-web、SignalR (ASP.NET Core SignalR と Blazor を使用) などのさまざまなメッセージング フレームワークとプロトコルを使用して、ネットワーク経由でバックエンド サーバー アプリとやりとりできます。
blazor.webassembly.js スクリプトは、フレームワークによって提供され、次の処理を行います。
- .NET ランタイム、アプリ、およびアプリの依存関係のダウンロード。
- アプリを実行するランタイムの初期化。
Blazor WebAssembly (WASM) ホスティング モデルには、次のいくつかの利点があります。
- アプリがサーバーからダウンロードされた後、.NET サーバー側の依存関係はないため、サーバーがオフラインになった場合でも、アプリは機能したままになります。
- クライアントのリソースと機能が完全に活用されます。
- 作業がサーバーからクライアントにオフロードされます。
- アプリをホストするために ASP.NET Core Web サーバーが必要ありません。 Content Delivery Network (CDN) からアプリを提供するなどのサーバーレス展開シナリオが可能です。
Blazor WebAssembly ホスティング モデルには、次の制限があります。
- アプリがブラウザーの機能に制限されます。
- サポートされているクライアント ハードウェアおよびソフトウェア (たとえば、WebAssembly サポート) が必要です。
- ダウンロード サイズが大きくなり、アプリの読み込みに時間がかかります。
Blazor WebAssembly では、Ahead-Of-Time (AOT) コンパイルがサポートされており、.NET のコードを WebAssembly に直接コンパイルできます。 AOT コンパイルを使用すると、アプリのサイズが大きくなりますが、実行時のパフォーマンスが向上します。 詳細については、「ASP.NET Core Blazor WebAssembly のホストと展開」を参照してください。
AOT コンパイルに使用されるものと同じ .NET WebAssembly ビルド ツールでも、.Net WebAssembly ランタイムを再リンクして、使用されていないランタイム コードをトリミングします。
Blazor WebAssembly には、.NET Core フレームワーク ライブラリから未使用のコードをトリミングするためのサポートが含まれています。 詳しくは、「ASP.NET Core Blazor のグローバリゼーションおよびローカライズ」をご覧ください。 .NET コンパイラは、アプリ ペイロードを小さくするために、さらに Blazor WebAssembly アプリを事前に圧縮します。
Blazor WebAssembly アプリでは、WebAssembly での実行用にビルドされたネイティブの依存関係を使用できます。
Blazor WebAssembly には、.NET Core フレームワーク ライブラリから未使用のコードをトリミングするためのサポートが含まれています。 詳しくは、「ASP.NET Core Blazor のグローバリゼーションおよびローカライズ」をご覧ください。
Blazor Hybrid
Blazor は、ハイブリッド アプローチを使ってネイティブ クライアント アプリを構築するために使うこともできます。 ハイブリッド アプリは、その機能に Web テクノロジを利用するネイティブ アプリです。 Blazor Hybrid アプリの Razor コンポーネントは、(WebAssembly 上ではなく) ネイティブ アプリ内で他の .NET コードと共に直接実行され、HTML と CSS に基づく Web UI を、ローカル相互運用チャネルを介して埋め込み Web View コントロールにレンダリングします。
Blazor Hybrid アプリは、.NET MAUI、WPF、Windows フォームなど、さまざまな .NET ネイティブ アプリ フレームワークを使って構築できます。 Blazor には、これらのフレームワークで構築されたアプリに Razor コンポーネントを追加するための BlazorWebView コントロールが用意されています。 Blazor を .NET MAUI で使うと、モバイルおよびデスクトップ用のクロスプラットフォーム Blazor Hybrid アプリを構築する便利な方法が提供されます。一方、WPF や Windows フォームとの Blazor の統合は、既存のアプリを最新化するための優れた方法です。
Blazor Hybrid アプリはネイティブ アプリなので、Web プラットフォームだけでは使用できない機能をサポートできます。 Blazor Hybrid アプリは、通常の .NET API を介してネイティブ プラットフォームの機能に完全にアクセスできます。 また、Blazor Hybrid アプリは、コンポーネントを既存の Blazor Server または Blazor WebAssembly アプリと共有して再利用することもできます。 Blazor Hybrid アプリでは、Web アプリ、ネイティブ アプリ、.NET プラットフォームの利点が組み合わされます。
Blazor Hybrid ホスティング モデルには、次のいくつかの利点があります。
- モバイル、デスクトップ、Web 間で共有できる既存のコンポーネントを再利用します。
- Web 開発のスキル、エクスペリエンス、リソースを活用します。
- アプリは、デバイスのネイティブ機能に完全にアクセスできます。
Blazor Hybrid ホスティング モデルには、次の制限があります。
- ターゲット プラットフォームごとに個別のネイティブ クライアント アプリを構築、展開、保守する必要があります。
- ネイティブ クライアント アプリは、通常、ブラウザーで Web アプリにアクセスするよりも、検索、ダウンロード、インストールに時間がかかります。
詳細については、ASP.NET Core に関する記事を参照してください。
Microsoft ネイティブ クライアント フレームワークについて詳しくは、次のリソースをご覧ください。
どの Blazor ホスティング モデルを選択するか
アプリの機能要件に基づいて、Blazor ホスティング モデルを選択します。 次の表は、ホスティング モデルを選択する際の主な考慮事項を示しています。
Blazor Hybrid アプリには、.NET MAUI、WPF、Windows フォーム フレームワーク アプリが含まれます。
| 機能 | Blazor Server | Blazor WebAssembly (WASM) | Blazor Hybrid |
|---|---|---|---|
| .NET API との完全な互換性 | ✔️ | ❌ | ✔️ |
| サーバーおよびネットワーク リソースへの直接アクセス | ✔️ | ❌† | ❌† |
| 小さいペイロード サイズと高速な初期読み込み時間 | ✔️ | ❌ | ❌ |
| ほぼネイティブの実行速度 | ✔️ | ✔️‡ | ✔️ |
| サーバー上でのアプリ コードのセキュリティ保護と非公開 | ✔️ | ❌† | ❌† |
| ダウンロードしたアプリをオフラインで実行 | ❌ | ✔️ | ✔️ |
| 静的サイトのホスティング | ❌ | ✔️ | ❌ |
| クライアントへの処理のオフロード | ❌ | ✔️ | ✔️ |
| クライアントのネイティブ機能への完全なアクセス | ❌ | ❌ | ✔️ |
| Web ベースの展開 | ✔️ | ✔️ | ❌ |
†Blazor WebAssembly および Blazor Hybrid アプリは、サーバーベースの API を使用してサーバーおよびネットワーク リソースにアクセスし、非公開でセキュリティ保護されたアプリ コードにアクセスできます。
‡Blazor WebAssembly がほぼネイティブのパフォーマンスに到達するのは、Ahead-Of-Time (AOT) コンパイルを使用する場合のみです。
| 機能 | Blazor Server | Blazor WebAssembly (WASM) |
|---|---|---|
| .NET API との完全な互換性 | ✔️ | ❌ |
| サーバーおよびネットワーク リソースへの直接アクセス | ✔️ | ❌† |
| 小さいペイロード サイズと高速な初期読み込み時間 | ✔️ | ❌ |
| サーバー上でのアプリ コードのセキュリティ保護と非公開 | ✔️ | ❌† |
| ダウンロードしたアプリをオフラインで実行 | ❌ | ✔️ |
| 静的サイトのホスティング | ❌ | ✔️ |
| クライアントへの処理のオフロード | ❌ | ✔️ |
†Blazor WebAssembly アプリは、サーバーベースの API を使用してサーバーおよびネットワーク リソースにアクセスし、非公開のセキュリティで保護されたアプリ コードにアクセスできます。
アプリのホスティング モデルを選択した後、Blazor プロジェクト テンプレートから Blazor Server または Blazor WebAssembly アプリを生成できます。 詳しくは、「ASP.NET Core Blazor 用のツール」をご覧ください。
Blazor Hybrid アプリを作成するには、「ASP.NET Core Blazor Hybrid チュートリアル」に記載されている記事をご覧ください。
.NET API との完全な互換性
Blazor Server および Blazor Hybrid アプリは .NET API との完全な互換性を備えていますが、Blazor WebAssembly アプリは .NET API のサブセットに限定されています。 アプリの仕様で、Blazor WebAssembly アプリで使用できない 1 つ以上の .NET API が必要な場合は、Blazor Server または Blazor Hybrid を選択します。
Blazor Server アプリは、.NET API との完全な互換性を備えていますが、Blazor WebAssembly アプリは .NET API のサブセットに制限されています。 アプリの仕様で、Blazor WebAssembly アプリで使用できない 1 つ以上の .NET API が必要な場合は、Blazor Server を選択します。
サーバーおよびネットワーク リソースへの直接アクセス
Blazor Server アプリは、アプリが実行されているサーバーおよびネットワーク リソースに直接アクセスできます。 Blazor WebAssembly および Blazor Hybrid アプリはクライアント上で実行されるため、サーバーおよびネットワーク リソースに直接アクセスすることはできません。 Blazor WebAssembly および Blazor Hybrid アプリは、保護されたサーバーベースの API を介して "間接的に" サーバーおよびネットワーク リソースにアクセスできます。 サーバーベースの API は、サードパーティのライブラリ、パッケージ、サービスを介して利用できる場合があります。 次の点を考慮してください。
- サードパーティのライブラリ、パッケージ、サービスは、実装と保守にコストがかかるか、サポートが不十分であるか、セキュリティ上のリスクをもたらす可能性があります。
- 1 つまたは複数のサーバーベースの API が組織によって内部的に開発されている場合は、それらの構築と保守のために追加のリソースが必要になります。
Blazor WebAssembly または Blazor Hybrid アプリ用のサーバーベースの API を使用しないようにするには、サーバーおよびネットワーク リソースに直接アクセスできる Blazor Server を採用します。
Blazor Server アプリは、アプリが実行されているサーバーおよびネットワーク リソースに直接アクセスできます。 Blazor WebAssembly アプリはクライアント上で実行されるため、サーバーおよびネットワーク リソースに直接アクセスすることはできません。 Blazor WebAssembly アプリは、保護されたサーバーベースの API を介して "間接的に" サーバーおよびネットワーク リソースにアクセスできます。 サーバーベースの API は、サードパーティのライブラリ、パッケージ、サービスを介して利用できる場合があります。 次の点を考慮してください。
- サードパーティのライブラリ、パッケージ、サービスは、実装と保守にコストがかかるか、サポートが不十分であるか、セキュリティ上のリスクをもたらす可能性があります。
- 1 つまたは複数のサーバーベースの API が組織によって内部的に開発されている場合は、それらの構築と保守のために追加のリソースが必要になります。
Blazor WebAssembly アプリ用のサーバーベースの API を使用しないようにするには、サーバーおよびネットワーク リソースに直接アクセスできる Blazor Server を採用します。
小さいペイロード サイズと高速な初期読み込み時間
Blazor Server アプリのペイロード サイズは比較的小さいため、初期読み込み時間が短縮されます。 高速の初期読み込み時間が必要な場合は、Blazor Server を採用します。
ほぼネイティブの実行速度
Blazor Server アプリは通常、サーバー上で迅速に実行されます。 ただし、多くの場合、Blazor Server アプリはクライアント上でネイティブに実行される他の種類のアプリよりも低速です。
Blazor Hybrid アプリはターゲット プラットフォーム上でネイティブに .NET ランタイムを使用して実行され、可能な限り最高の速度を実現します。
Blazor WebAssembly (プログレッシブ Web アプリ (PWA) を含む) アプリは、WebAssembly 用 .NET ランタイムを使用して実行されます。これは、ブラウザーで WebAssembly 用に Ahead-Of-Time (AOT) コンパイルを実行したアプリであっても、プラットフォーム上で直接実行するより遅くなります。
Blazor WebAssembly アプリは、WebAssembly 用 .NET ランタイムを使用して実行され、プラットフォーム上で直接実行するより遅くなります。
サーバー上でのアプリ コードのセキュリティ保護と非公開
サーバー上でアプリ コードを安全かつ非公開に維持することは、Blazor Server の組み込み機能です。 Blazor WebAssembly および Blazor Hybrid アプリでは、サーバーベースの API を使用して、非公開でセキュリティ保護する必要がある機能にアクセスできます。 「サーバーおよびネットワーク リソースへの直接アクセス」セクションで説明されているサーバーベースの API の開発と管理に関する考慮事項が適用されます。 セキュリティで保護された非公開のアプリ コードを維持するために、サーバーベースの API の開発と管理が望ましくない場合は、Blazor Server ホスティング モデルを採用します。
サーバー上でアプリ コードを安全かつ非公開に維持することは、Blazor Server の組み込み機能です。 Blazor WebAssembly アプリでは、サーバーベースの API を使用して、非公開でセキュリティ保護する必要がある機能にアクセスできます。 「サーバーおよびネットワーク リソースへの直接アクセス」セクションで説明されているサーバーベースの API の開発と管理に関する考慮事項が適用されます。 セキュリティで保護された非公開のアプリ コードを維持するために、サーバーベースの API の開発と管理が望ましくない場合は、Blazor Server ホスティング モデルを採用します。
ダウンロードしたアプリをオフラインで実行
プログレッシブ Web アプリ (PWA) としてビルドされた Blazor WebAssembly アプリと Blazor Hybrid アプリはオフラインで実行できます。これは、クライアントがインターネットに接続できない場合に特に便利です。 サーバーへの接続が失われると、Blazor Server アプリは実行できません。 アプリをオフラインで実行する必要がある場合は、Blazor WebAssembly と Blazor Hybrid が最適な選択肢です。
Blazor WebAssembly アプリはオフラインで実行できます。これは、クライアントがインターネットに接続できない場合に特に便利です。 サーバーへの接続が失われると、Blazor Server アプリは実行できません。 アプリをオフラインで実行する必要がある場合は、Blazor WebAssembly が最適な選択肢です。
静的サイトのホスティング
Blazor WebAssembly アプリは一連の静的ファイルとしてクライアントにダウンロードされるため、静的サイトをホスティングできます。 Blazor WebAssembly アプリの場合、ダウンロードして実行するためにサーバーでサーバー側コードを実行する必要はありません。 Blazor WebAssembly アプリは、コンテンツ配信ネットワーク (CDN) (たとえば Azure CDN) を使用して配信できます。
Blazor Hybrid アプリは 1 つまたは複数の自己完結型の展開資産にコンパイルされますが、資産は通常、サードパーティのアプリ ストアを介してクライアントに提供されます。 静的ホスティングがアプリの要件である場合は、Blazor WebAssembly を選択します。
クライアントへの処理のオフロード
Blazor WebAssembly および Blazor Hybrid アプリはクライアント上で実行されるため、処理がクライアントにオフロードされます。 Blazor Server アプリはサーバー上で実行されるため、通常は、ユーザー数およびユーザーごとに必要な処理量に応じてサーバー リソースの需要が増加します。 アプリの大部分または全部の処理をクライアントにオフロードすることが可能であり、アプリで大量のデータを処理する場合は、Blazor WebAssembly または Blazor Hybrid が最適な選択肢です。
Blazor WebAssembly アプリはクライアント上で実行されるため、処理がクライアントにオフロードされます。 Blazor Server アプリはサーバー上で実行されるため、通常は、ユーザー数およびユーザーごとに必要な処理量に応じてサーバー リソースの需要が増加します。 アプリの大部分または全部の処理をクライアントにオフロードすることが可能であり、アプリで大量のデータを処理する場合は、Blazor WebAssembly が最適な選択肢です。
クライアントのネイティブ機能への完全なアクセス
Blazor Hybrid アプリは、.NET ネイティブ アプリ フレームワークを介してネイティブ クライアント API の機能に完全にアクセスできます。 Blazor Hybrid アプリの Razor コンポーネントは、WebAssembly ではなく、ネイティブ アプリで直接実行されます。 完全なクライアント機能が必要な場合は、Blazor Hybrid が最適な選択肢です。
Web ベースの展開
Blazor Server と Blazor WebAssembly は、次回のアプリ更新時に更新される Web アプリとして展開されます。
Blazor Hybrid アプリはネイティブ クライアント アプリであり、通常、インストーラーとプラットフォーム固有の展開メカニズムが必要になります。