Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-elastic apm

.NET 6 ASP.NET Core Web API、
Blazor WebAssembly、Elastic APM で
簡単なアプリを構築してみよう
鈴木章太郎
Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト
デジタル庁省庁業務グループソリューションアーキテクト

Elastic
Technical Product Marketing
Manager/Evangelist
デジタル庁
省庁業務グループ
ソリューションアーキテクト
元 Microsoft Technical Evangelist
Twitter : @shosuz
Shotaro Suzuki

⚫ .NET 6 における Blazor Update
⚫ ASP.NET Core Web API, AntDesign, Blazor
WebAssembly でアプリを構築
⚫ Elastic APM によるアプリケーションの監視
⚫ まとめ
アジェンダ

.NET 6 における Blazor Update

Modern Web UI with .NET & Blazor
Server WebAssembly Hybrid
HTML、CSS、.NET、C#... JavaScript の代わりに Open Web 標準でアプリ開発
どこにでもホストできる

MVC
Razor
Pages
Blazor
HTTP
APIs
SignalR
Part of the ASP.NET Core family
Web UI Services
Worker gRPC
SPA

Blazor – .NET 5 まで
Blazor Server Blazor WebAssembly
DOM
Blazor
WebAssembly
.NET
Razor Components
Blazor
.NET
Razor Components
DOM
SignalR
✓ DB アクセス含むサーバー機能へのフルアクセス
✓ 高速なスタートアップ
✓ コードがサーバーから離れない
✓ 古いブラウザとシンクライアントをサポート
✓ 永続的な接続が必要
✓ UI の遅延が高い
✓完全にクライアント側で実行
✓必要なサーバーコンポーネントなし
✓静的サイトとしてホスト
✓オフラインで実行可能
✓大きなダウンロードサイズ
✓ランタイムパフォーマンスの低下
Blazor Server (.NET 5) Blazor WebAssembly (.NET 5)

Blazor – .NET 6 による強化
DOM
Blazor
WebAssembly
.NET
Razor Components
Blazor
.NET
Razor Components
DOM
SignalR
Blazor WebAssembly の事前 (AOT) コンパイル対応
Blazor WebAssembly アプリのダウンロードサイズの縮小
Error Boundaries
Razor コンポーネント型の推論とジェネリック型の制約
動的コンポーネント
プリレンダリング中の Blazor コンポーネント状態の永続性
Hot Reload, Native File Reference, 他多数
.NET 6

Blazor Server と Blazor WebAssembly の
開発モデルの違い
DOM
Blazor
WebAssembly
.NET
Razor Components
Blazor
.NET
Razor Components
DOM
SignalR
Blazor Server
• 開発モデルは C/S 型に近い
• DOM（ブラウザ UI）と Blazor ランタイム（仮想 DOM）
がやりとりし UI 描画（差分更新）
• 画面の入出力部分のみをリモートデスクトップのようにブラウザ
側に持ってきているとみなせる
• SignalR（Web ソケット通信）
• DB に直接アクセス可能
• Web アプリケーションを Client - Server 型に近いモデルで
開発可能
• Web サーバとの常時接続が必要
• サーバ側でリソース効率の高いアプリの作り方が必要
• Hot Reload
Blazor WebAssembly
• サンドボックス制限
• DB アクセス不可 → Native File Reference による
ローカル DBアクセス
• Web API を介して DB アクセス
• 静的な Web サーバにホスト
• アプリ全体がダウンロード（大きくなりがち）
• DOM（ブラウザ UI）と Blazor ランタイム（仮想
DOM）がやりとりしUI 描画（差分更新）、ランタイム
が Blazor アプリ（UI ロジック）とやりとりする
• Hot Reload (デバッグなしで実行）

Web Assembly（WASM）とは
• Web ブラウザ上でバイナリコードを直接実行できる
• 2019 年 12 月 W3C 勧告、正式なウェブ標準に認定
• 様々な言語のバイナリコードを主要なブラウザのサンドボックス内で動作可能
• Web Assembly バイナリコードへのコンパイラなどのツールセットが必要
Edge
Chrome
Safari
Firefox
Web Assembly
バイナリコード
（W3C 標準技術）
C++ WASM
コンパイラ
Rust WASM
コンパイラ
C WASM
コンパイラ
SQLite ソースコード（C）
Rust ソースコード
C++ ソースコード

.NET 6 における
Blazor WebAssembly 新機能
• 事前 (AOT) 実行コンパイル
• カスタム要素
• 小規模なアプリサイズ
• Native File Reference
• Hot Reload
• Component, .NET, HTML, CSS…
…その他数十個の更新あり

Blazor WebAssembly 小規模なアプリサイズ
.NET 5
• Publish size: 1.7 MB
.NET 6
• Publish size: 1.0 MB
• ~40% size reduction

Blazor WebAssembly のホスティング
ASP.NET
Blazor
WebAssem
bly
APIs
Globally
distributed
hosting
Blazor
WebAssem
bly
Serverless
functions
APIs
App Services Azure Static Web Apps
ASP.NET
Globally
distributed
hosting Microservices
Blazor
WebAssembly
APIs
Blazor
WebAssembly
APIs

ASP.NET Core Web API, AntDesign,
Blazor WebAssembly でアプリを構築

今回のデモアプリのイメージ
Azure
SQL Database
Elastic Cloud
東日本リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://f79...c67.japaneast
.azure.elastic-
cloud.com:9243/
全文検索クエリ
CRUD
検索・更新 UI
Blazor
WebAssembly
Azure サブスクリプション
Visual
Studio
2022
Azure
App Service
Elastic APM
Endpoint に送信
Azure
Data Explorer
ASP.NET 6
Web API
APM .NET Agent
AntDesign

.NET MAUI Blazor App - モバイル、デスクトップ、
Web ハイブリッドアプリを開発
https://qiita.com/shosuz/items/4218af93343e5cc999ec
このデモアプリを元に、自分が持って
いる Elastic の books index に
対応したデモを作ろうとしていたところ、

ASP.NET Core Blazor WebAssembly と Web API と Entity Framework
Core で SQL Server のデータを取得したり追加したり更新したり削除したりする
[.NET 6 版]
https://qiita.com/tamtamyarn/items/876a5cd4b9ec9cdc1044
ちょうどこちらのエントリを発見！
とても良い実装なので、参考にさせて
いただきます！Special Thanks!

コードファーストによる Azure SQL Database 生成
• Microsoft.EntityFrameworkCore.SqlServer
• Microsoft.EntityFrameworkCore.Tools
• Elastic.Apm.NetCoreAll
• プロジェクトに Models フォルダを作成し、 book
クラスを作成
• Book.cs に右のコードを記載
public class Book
{
public int BookId { get; set; }
public string Title { get; set; }
public string ThumbnailUrl { get; set; }
public string Isbn { get; set; }
public string Author { get; set; }
public string Category { get; set; }
public Book
(int bookId, string title, string thumbnailUrl,
string isbn, string author, string category)
{
BookId = bookId;
Title = title;
ThumbnailUrl = thumbnailUrl;
Isbn = isbn;
Author = author;
Category = category;
}
}

コードファーストによる Azure SQL Database 生成 2
{
"ConnectionStrings": {
"DefaultConnection":
"Server=tcp:xxx.database.windows.net,1433;Initial Catalog=BlazorWasmDb;Persist
Security Info=False;User ID=(UserID);Password=(Password);
MultipleActiveResultSets=False;Encrypt=True;TrustServerCertificate=False;Connection Timeout=30;"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}

Azure Data Studio を使用して
新しいデータベースを確認、データを追加
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'Unlocking Android',N'https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-
images/ableson.jpg',N'1933988673',N'W. Frank Ableson, Charlie Collins, Robi Sen',N'Open Source, Mobile');
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'ASP.NET Core 6.0 in Practice',N'https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.bo
ok-thumb-images/bochicchio.jpg',N'1935182463',N'Daniele Bochicchio, Stefano Mostarda',N'Microsoft .NET');
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'Brownfield Application Development in .NET',N'https://s3.amazonaws.com/AKIAJC5RL
ADLUMVRPFDQ.book-thumb-images/baley.jpg',N'1933988711',N'Kyle Baley, Donald Belcham',N'Microsoft');
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'MongoDB in Action',N'https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-
images/banker.jpg',N'1935182870',N'Kyle Banker',N'Next Generation Databases');
INSERT INTO Books(Title,ThumbnailUrl,Isbn,Author,Category)VALUES(N'jQuery in Action',N'https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-
images/bibeault.jpg',N'1933988355',N'Bear Bibeault, Yehuda Katz',N'Web Development');

AntDesign
• 人気 No.1 on
Awesome Blazor
• 企業向け製品のための
デザインシステム
• 効率的で楽しいワーク
エクスペリエンスを実現
https://antblazor.com/en-US/
Install-Package -ProjectName BlazorWASMApp.Client -Id AntDesign

AntDesign
• Components
• Image の使用方法を
参照
• Source Code 利用
可能
https://antblazor.com/en-US/components/image

Blazor WebAssembly の Hot Reload
https://docs.microsoft.com/ja-jp/aspnet/core/test/hot-reload?view=aspnetcore-6.0
In Visual Studio 2022 GA (17.0), Hot Reload is only
supported when running without the debugger.

Elastic APM によるアプリケーションの監視

今回のデモアプリのイメージ
Azure
SQL Database
Elastic Cloud
東日本リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://f79...c67.japaneast
.azure.elastic-
cloud.com:9243/
全文検索クエリ
CRUD
検索・更新 UI
APM .NET Agent
Blazor
WebAssembly
Azure サブスクリプション
Visual
Studio
2022
Azure
App Service
Elastic APM
Endpoint に送信
Azure
Data Explorer
ASP.NET 6
Web API
AntDesign

// .NETアプリへの Nuget パッケージインストール
dotnet add Elastic.Apm.NetCoreAll
Install-Package -ProjectName BlazorApp.Server -Id Elastic.Apm.NetCoreAll
Elastic APM for ASP
.NET Core
https://www.elastic.co/jp/apm/
Configuration on .NET Core
https://www.elastic.co/guide/en/apm/agent/dotnet/current/configuration-on-asp-net-core.html
ASP
.NET Core Quick Start
https://www.elastic.co/guide/en/apm/agent/dotnet/current/setup-asp-net-core.html
// Program.cs へ
の
追加
---
using Elastic.Apm.NetCoreAll;
//Elastic APM 追加
app.UseAllElasticApm(builder.Configuration);
app.UseHttpsRedirection();
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
---
// appsettings.json の
更新
---
{
"Logging": {
"LogLevel": {
//"Default": "Information",
//"Microsoft": "Warning",
//"Microsoft.Hosting.Lifetime": "Information"
"Default": "Warning",
"Elastic.Apm": "Debug"
}
} ,
"AllowedHosts": " * " ,
//Elastic ポ
ー
タ
ル
か
ら APM エ
ン
ド
ポ
イ
ン
ト
と Secret を
コ
ピ
ー
＆ペースト
"ElasticApm": {
"ServerUrl":
"https://
7d39255475bg8e8e0j99fm870kj48v88.apm.
japaneast.azure.elastic-cloud.com",
"SecretToken": ”f6p81KJytBcGMK2JKS4",
"TransactionSampleRate": 1.0
}
}

Elastic Cloud → Kibana で APM モニタリング
https://cloud.elastic.co/home

まとめ
⚫ .NET 6 における Blazor Update
⚫ ASP.NET Core Web API を構築
⚫ Blazor WebAssembly でフロントエンドアプリを構築
⚫ Elastic APM によるアプリケーションの監視

Get started with Blazor
• Go to https://blazor.net
• Install the .NET SDK
• .NET Conf 2021 https://www.dotnetconf.net/
• .NET Conf 2021 – videos/slides/demos
https://github.com/dotnet-presentations/dotNETConf/tree/master/2021/MainEvent/Technical
Visual Studio Visual Studio for Mac Visual Studio Code
+ C# extension

.NET MAUI Blazor App - モバイル、デスクトップ、
Web ハイブリッドアプリを開発
https://qiita.com/shosuz/items/4218af93343e5cc999ec

ASP.NET Core Blazor WebAssembly と Web API と Entity Framework
Core で SQL Server のデータを取得したり追加したり更新したり削除したりする
[.NET 6 版]
https://qiita.com/tamtamyarn/items/876a5cd4b9ec9cdc1044

Elastic リソース
• 公式ドキュメント
https://www.elastic.co/guide/index.html
• クラウドネイティブアプリでの Elasticsearch
https://docs.microsoft.com/ja-jp/dotnet/architecture/cloud-
native/elastic-search-in-azure
• Azure での検索データストアの選択
https://docs.microsoft.com/ja-jp/azure/architecture/data-
guide/technology-choices/search-options
• Elastic APM Agent
https://www.elastic.co/guide/en/apm/agent/index.html
• APM
https://www.elastic.co/jp/apm/
• Configuration on .NET Core
https://www.elastic.co/guide/en/apm/agent/dotnet/current/co
nfiguration-on-asp-net-core.html
• ASP.NET Core Quick Start
https://www.elastic.co/guide/en/apm/agent/dotnet/current/set
up-asp-net-core.html

Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-elastic apm

More Related Content

What's hot (20)

Similar to Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-elastic apm (20)

More from Shotaro Suzuki (20)

Recently uploaded (8)

Building simple-app-using-.net 6 asp.net core web api-blazor web assembly-elastic apm