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 テクニカルプロダクトマーケティングマネージャー/エバンジェリスト デジタル庁 省庁業務グループ ソリューションアーキテクト

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

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

.NET 6 における Blazor Update

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

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

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

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

Blazor Server と Blazor WebAssembly の 開発モデルの違い Blazor WebAssembly Blazor Server Blazor Blazor DOM SignalR .NET Razor Components DOM .NET Razor Components WebAssembly 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 バイナリコードへのコンパイラなどのツールセットが必要 C++ WASM コンパイラ Edge C++ ソースコード Chrome Rust WASM コンパイラ Rust ソースコード C WASM コンパイラ SQLite ソースコード（C） Safari Web Assembly バイナリコード （W3C 標準技術） Firefox

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

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

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

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

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

• https://f79...c67.japaneast.azure.elastic-cloud.com:9243/
• https://www.elastic.co/guide/en/apm/agent/dotnet/current/index.html

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

• 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 ちょうどこちらのエントリを発見！ とても良い実装なので、参考にさせて いただきます！Special Thanks!

• https://qiita.com/tamtamyarn/items/876a5cd4b9ec9cdc1044

コードファーストによる Azure SQL Database 生成 public class Book { • • • • • public public public public public public Microsoft.EntityFrameworkCore.SqlServer Microsoft.EntityFrameworkCore.Tools Elastic.Apm.NetCoreAll int BookId { get; set; } string Title { get; set; } string ThumbnailUrl { get; set; } string Isbn { get; set; } string Author { get; set; } 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; } プロジェクトに Models フォルダを作成し、 book クラスを作成 Book.cs に右のコードを記載 }

コードファーストによる 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-thumbimages/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-thumbimages/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-thumbimages/bibeault.jpg',N'1933988355',N'Bear Bibeault, Yehuda Katz',N'Web Development');

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

• https://github.com/AdrienTorris/awesome-blazor
• https://antblazor.com/en-US/

AntDesign https://antblazor.com/en-US/components/image • 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.

• https://docs.microsoft.com/ja-jp/aspnet/core/test/hot-reload?view=aspnetcore-6.0

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

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

• https://f79...c67.japaneast.azure.elastic-cloud.com:9243/
• https://www.elastic.co/guide/en/apm/agent/dotnet/current/index.html

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
// .NETアプリへの Nuget パッケージインストール
dotnet add Elastic.Apm.NetCoreAll
Install-Package -ProjectName BlazorApp.Server -Id Elastic.Apm.NetCoreAll

// 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
}
}

• http://www.elastic.co/jp/apm/
• http://www.elastic.co/guide/en/apm/agent/dotnet/current/configuration-on-asp-net-core.html
• http://www.elastic.co/guide/en/apm/agent/dotnet/current/setup-asp-net-core.html

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

• 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 Visual Studio Visual Studio for Mac Visual Studio Code + C# extension • .NET Conf 2021 https://www.dotnetconf.net/ • .NET Conf 2021 – videos/slides/demos https://github.com/dotnet-presentations/dotNETConf/tree/master/2021/MainEvent/Technical

• https://blazor.net/
• https://www.dotnetconf.net/
• https://github.com/dotnet-presentations/dotNETConf/tree/master/2021/MainEvent/Technical

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

• 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

• https://qiita.com/tamtamyarn/items/876a5cd4b9ec9cdc1044

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

• https://www.elastic.co/guide/index.html
• https://docs.microsoft.com/ja-jp/dotnet/architecture/cloud-native/elastic-search-in-azure
• https://docs.microsoft.com/ja-jp/azure/architecture/data-guide/technology-choices/search-options
• https://www.elastic.co/guide/en/apm/agent/index.html
• https://www.elastic.co/jp/apm/
• https://www.elastic.co/guide/en/apm/agent/dotnet/current/configuration-on-asp-net-core.html
• https://www.elastic.co/guide/en/apm/agent/dotnet/current/setup-asp-net-core.html

Thank you for your attention!