Static Web AppsとBlazor WebAssemblyのすすめ
- 1. Static Web AppsとBlazor WebAssemblyのすすめ 株式会社SAKURUG エンジニアリングユニット 草場 友光 .NET ラボ 2021年12月
- 2. 自己紹介 • 普段は主にWebFormsアプリ の保守のお仕事をしてます。 • 古めのシステムが多いので時 代に取り残されぬよう新しい技 術を一つでも入れるよう日々努 力しています。 • tomo_kusaba
- 4. 注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • #dotnetlabでtweetすると右側に表示されます
- 5. 今日の目的 • AppServiceとStatic Web Apps、Blazor ServerとBlazor WebAssemblyを比較しながら優位点を探っていきます
- 6. 主なトピック • ホスティングモデルの違い • DBアクセスがあるアプリケーションの構築 • プロジェクト構造の違い • AppServiceとStatic Web Appsの価格
- 7. ホスティングモデルの違い－ Blazor WebAssembly • Blazor WebAssemblyはブラウザのクライアント側で WebAssemblyベースの.NETランタイム上で実行される • 通常、Web API呼び出しまたはSignalRやgRPCなどを使用す るネットワークを通じてバックエンドとのやりとりを行う Browser UI Thread Blazor
- 8. ホスティングモデルの違いー Blazer Server • ASP.NET Coreアプリ内からサーバ上で実行 • UIの更新、イベント処理、JavaScriptの呼び出しはSignalR接 続経由で処理される Browser dotnet.exe ASP.NET.Core Blazor SignalR 常に、サーバとブラウザ との間にSignalR接続があ ることに注意が必要
- 9. ホスティングモデルそれぞれの利点 Blazor WebAssembly Blazor Server • サーバ側に依存関係がなくブラウザにロード されたあと完全に機能する • 作業がクライアント側にオフロードされる • アプリをホストするのにASP.NET Core Web サーバが必要ない • CDNからアプリを提供するなどのサーバレス シナリオが可能 • ダウンロードサイズが小さく、アプリの読み 込み時間が短い • .NET Coreと互換のあるAPIの使用を含めて サーバの機能を最大限に活用できる • サーバ上でアプリが実行されるためデバッグ などの.NETツールが想定通りに動作する • WebAssemblyがサポートされていないブラウ ザやリソースが制限されたデバイスで動作す る
- 10. ホスティングモデルそれぞれの制限 Blazor WebAssembly Blazor Server • アプリがブラウザの機能に制限される • ブラウザはWebAssemblyのサポートが必要 • ダウンロードサイズが大きくなりアプリの読 み込みに時間がかかる • ユーザのすべての操作にネットワークホップ が関与するので遅延時間が長くなる • オフラインサポートがない • サーバーとの接続が切れるとアプリの動作が 停止する • ユーザが多くいるアプリでスケラービティが 課題となる • サーバではユーザ分のクライアント接続を管 理してクライアントの状態を処理する必要あ る • アプリを提供するのにASP.NET Coreサーバ が必要
- 11. ホスティングモデルまとめ • Blazor Serverはフル機能を使える反面、サーバと常に通信で きる必要がある • Blazor WebAssemblyはブラウザの制限によって制約を受ける がASP.NET Coreサーバは必要なく可搬性に優れる
- 12. DBアクセスがあるアプリケーションの 構築 • Static Web Appsにホストする場合、Functionが使用できる • FunctionでDBアクセスをし、APIを提供する Browser UI Thread Blazor Azure Function/ Container Apps/ ASP.NET Core WebAPI DB JSON/ gRPC
- 13. もう少し細かく。。。 • バックエンドとのやりとりがシリアライズ化されることにより 画面オブジェクトとDBオブジェクトの分断がされる Browser UI Thread Blazor Azure Function/ Container Apps/ ASP.NET Core WebAPI DB JSON/ gRPC razor.cs razor view object
- 14. ここでのBlazor WebAssemblyの利点 • バックエンドと分離して疎結合の形で開発できる • バックエンド側もFunctionやコンテナなどマイクロサービスな 開発ができる • 大人数での大規模開発に向きやすい
- 15. プロジェクト構造の違い Blazor WebAssembly Blazor Server • フロントエンドとバックエンドを分割して開 発することも可能 • フロントエンド側のみの部分のみのプロジェ クトなのでバックエンドは様々なテクノロ ジーを選択できる • フロントエンドとバックエンドは一体 • モノシリックな構造 • 1つのアプリケーションが1つのプロジェクト
- 16. AppServiceの価格 (Windows) F1(無料) D1(共有) B1(開発・テスト) S1(実運用) P1v3(ハイパ フォーマンス) P2v3 コア数 共有(60CPU分/日) 共有(240CPU分/日) 1 1 2 4 RAM 1GB 1GB 1.75GB 1.75 8GB 16GB ストレージ 1GB 1GB 10GB 50GB 250GB 250GB カスタムドメイン - ○ ○ ○ ○ ○ 自動スケール - - - ○ ○ ○ 従量課金 ¥0 ¥1289.4/月/サイト ¥7458.3/月 ¥9944.4/月 ¥29327.6/月 ¥58655.2/月 価格は東日本リージョン 調査当時の価格です。 実際の価格は各自調査をお願いします。
- 17. Static Web Appsの価格 Free Standard(本番用) 含まれる帯域幅 サブスクリプションあたり100GB サブスクリプションあたり100GB 帯域幅の超過 なし ¥23/GB/サブスクリプション カスタムドメイン アプリ用2 アプリごとに5 SSL証明書 無料 無料 カスタム認証 なし ○ Azure Function Managed Managedまたは持ち込み 価格 無料 ¥1039/月/アプリ Functionは100万実行回数まで無料 価格は東日本リージョン 調査当時の価格です。 実際の価格は各自調査をお願いします。
- 19. 参考 • App Service のドキュメント • Azure Static Web Apps のドキュメント • ASP.NET Core Blazor の概要 • Azure Functions • App Service • Static Web Apps
- 21. おしまい おしまい