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

>100 Views

December 18, 21

スライド概要

.NETラボ 勉強会 2021年12月
「.NET 6 ASP.NET Core Web API、Blazor WebAssembly、Elastic APM で簡単なアプリを構築してみよう」
https://dotnetlab.connpass.com/event/232383/

profile-image

ヴイエムウェア株式会社 ソリューションアーキテクト本部 プリンシパルエンタープライズアーキテクト。 Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け最新技術啓発活動を実施。その後、Dell、Accenture、Elastic で開発者向け技術啓発活動等を経て現職。 モダンアプリケーション開発、マルチクラウド対応、アーキテクチャ策定等を中心に、技術者向けに最新技術の啓発活動を実施中。 2019年4月〜2021年8月迄、内閣官房 IT 総合戦略室 政府 CIO 補佐官を兼務、2021年9月〜2024年3月迄、デジタル庁 PjM ユニット ソリューションアーキテクトを兼務。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

.NET 6 における Blazor Update

5.

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

6.

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

7.

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)

8.

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, 他多数

9.

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 (デバッグなしで実行)

10.

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

11.

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

12.

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

13.

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

14.

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

15.

今回のデモアプリのイメージ 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 サブスクリプション

16.

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

17.

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

18.

コードファーストによる 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 に右のコードを記載 }

19.
[beta]
コードファーストによる 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": "*"
}

20.

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');

21.

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

22.

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

23.

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.

24.

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

25.

今回のデモアプリのイメージ 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 サブスクリプション

26.
[beta]
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
}
}

27.

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

28.

まとめ

29.

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

30.

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

31.

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

32.

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

33.

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

34.

Thank you for your attention!