471 Views
December 20, 21
スライド概要
https://vscode.connpass.com/event/231495/
"React/Flutter/Blazor の開発・デバッグ環境を VSCode でサクッと構築する"
FPT ジャパン エグゼクティブエバンジェリスト 独立行政法人 国立印刷局 デジタル統括アドバイザー兼最高情報セキュリティアドバイザー Microsoft で13年間、テクニカルエバンジェリストとして .NET、C#、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け技術啓発活動 (DevRel) 。Dell、Accenture、Elastic、VMware 等での DevRel 後、2024年11月1日より現職で DevRel 活動を開始。NVIDIA との戦略的協業 AI GPU クラウド、Azure/AWS/GC 上の AI &データ関連サービスのマーケティング、プリセールス、教育、関連新規サービス開発。元内閣官房 IT 総合戦略室 政府 CIO 補佐官(兼務)、元デジタル庁 ソリューションアーキテクト(兼務)。
React, Flutter, Blazor の開発・デバッグ 環境を VSCode でサクッと構築する 鈴⽊ 章太郎 Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト デジタル庁 省庁業務グループ ソリューションアーキテクト
MS Eva 時代は、WPF → Silverlight → Azure Mobile Apps/Xamarin, HoloLens (初代)…etc. Shotaro Suzuki Twitter : @shosuz Elastic Technical Product Marketing Manager/Evangelist デジタル庁 省庁業務グループ ソリューションアーキテクト 元 Microsoft Technical Evangelist
アジェンダ l l l l React / React Native の開発・デバッグ環境構築 Flutter の開発・デバッグ環境構築 Blazor の開発・デバッグ環境構築 まとめ
React/React Native の 開発・デバッグ環境構築
Expo Tools https://marketplace.visualstudio.com/items?itemName=byCedric.vscode-expo 特徴 •app.jsonまたは app.config.jsonマニフェストの オートコンプリートと検証 •⾃動構成プラグインの検証と IntelliSense コマンド Expo を最⼤限に活⽤するのに 役⽴つコマンドもいくつか⽤意
Prettier https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode • 独創的なコードフォーマッター • コードを解析し、最⼤⾏⻑を 考慮した独⾃のルールを使⽤ してコードを再印刷し、必要 に応じてコードをラップすること により⼀貫したスタイルを適⽤
React Native + Firebase サンプルアプリ (CQRS) プロジェクト Cloud Function Firebase Firestore データ保存 iOS / Android Mobile App Cloud Function で同期 React Native Elastic APM Agent 全⽂検索クエリ https://google-cloud-daydigital-2021.es.asianortheast1.gcp.cloud.es.io :9243 検索結果 VSCode northeast1-b リージョン マスターノード x 1 データノード x 2 ML ノード x 1 Elastic Cloud
Flutter の開発・デバッグ環境構築
Flutter v3.29.0 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter Flutter モバイルアプリの効果的 な編集、リファクタリング、実⾏、 及びリロードのサポートと、Dart プログラミング⾔語サポートを追加
Material Icon Theme https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme マテリアルデザインアイコンを VSCode に取り込み
Flutter Tree https://marketplace.visualstudio.com/items?itemName=marcelovelasquez.flutter-tree • コードを書く前にUIの実装イメージが 固まっているのが前提 • わずか1⾏で複雑なレイアウトを⼀気 に書ける
Flutter Widget Snippets https://marketplace.visualstudio.com/items?itemName=alexisvt.flutter-snippets • よく使う Widget を⾼速で挿⼊可能 • Column とか Row 等、よく使うものの Children…と続けるのは⾯倒
Flutter + Firebase サンプルアプリ (CQRS) プロジェクト iOS / Android Mobile App データ保存 Cloud Function で同期 Flutter 全⽂検索クエリ VSCode Cloud Function Firebase Firestore https://google-cloud-daydigital-2021.es.asianortheast1.gcp.cloud.es.io :9243 検索結果 northeast1-b リージョン マスターノード x 1 データノード x 2 ML ノード x 1 Elastic Cloud
Blazor の開発・デバッグ環境構築
Modern Web UI with .NET & Blazor HTML、CSS、.NET、C#... JavaScript の代わりに Open Web 標準でアプリ開発 Server WebAssembly どこにでもホストできる Hybrid
Blazor を使⽤して Web アプリをビルドする https://docs.microsoft.com/ja-jp/learn/modules/build-blazor-webassembly-visual-studio-code/ 拡張機能ではないが この Learn は最初にやるのがおすすめ
Microsoft.AspNetCore.Razor.VSCode. BlazorWasmDebuggingExtension https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.blazorwasm-companion • C#拡張機能のコンパニオン 拡張機能 • VSCode で Blazor WebAssembly をデバッグ するためのエクスペリエンスに いくつかの改善をもたらす • この拡張機能は、単独で インストールするべきではなく、 C#拡張機能が⾃動的に インストールされる
今回のデモアプリのイメージ Azure App Service ASP.NET 6 Web API Azure SQL Database CRUD Blazor WebAssembly AntDesign 全⽂検索クエリ Elastic APM Endpoint に送信 検索・更新 UI APM .NET Agent Elastic Cloud VSCode Azure Data Explorer https://f79...c67.japaneast .azure.elasticcloud.com:9243/ 東⽇本リージョン マスターノード x 1 データノード x 2 ML ノード x 1 Azure サブスクリプション
.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! 詳しくは、.NET ラボ 12⽉ (12/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 に右のコードを記載 }
コードファーストによる 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": "*"
}
Add-Migration -Name Initial
// Migrations フォルダーと Migration クラス作成
Update-Database
// Azure SQL データベースとテーブル作成
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'); VSCode に近い Electron ベース、拡張機能使⽤可能︕
AntDesign https://antblazor.com/en-US/ • ⼈気 No.1 on Awesome Blazor • 企業向け製品のための デザインシステム • 効率的で楽しいワーク エクスペリエンスを実現 Install-Package -ProjectName BlazorWASMApp.Client -Id AntDesign
AntDesign https://antblazor.com/en-US/components/image • Components • Image の使⽤⽅法を 参照 • Source Code 利⽤ 可能 この辺りの拡張機能、VSCode でいち早く欲しい︕
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. この辺りの拡張機能、VSCode でいち早く欲しい︕
Jaguʻeʼr Cloud Native #3 みんなで語り合おう︕クラウドネイティブLT祭り https://jaguer-cloud-native.connpass.com/event/231835/ Jaguʼeʼr 会員企業所属のみです。ごめんなさい︕
Thank you for your attention!
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 サブスクリプション
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 BlazorWASMApp.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
}
}
Elastic Cloud → Kibana で APM モニタリング https://cloud.elastic.co/home