.NETラボ勉強会　2021年12月 「Static Web AppsとBlazor WebAssemblyのすすめ」

1. Static Web AppsとBlazor
WebAssemblyのすすめ
株式会社SAKURUG
エンジニアリングユニット
草場 友光
.NET ラボ 2021年12月

2. 自己紹介
• 普段は主にWebFormsアプリ
の保守のお仕事をしてます。
• 古めのシステムが多いので時
代に取り残されぬよう新しい技
術を一つでも入れるよう日々努
力しています。
• tomo_kusaba

3. 宣伝
【VISION】ひとの可能性を開花させる企業であり続ける
VISIONに共感できる仲間募集中。

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万実行回数まで無料
価格は東日本リージョン 調査当時の価格です。
実際の価格は各自調査をお願いします。

18. 価格面で優位
• バックエンドにFunctionを利用できるのなら圧倒的に価格優位

19. 参考
• App Service のドキュメント
• Azure Static Web Apps のドキュメント
• ASP.NET Core Blazor の概要
• Azure Functions
• App Service
• Static Web Apps

20. 告知
• C# Tokyoイベントに登壇します

21. おしまい
おしまい