474 Views
September 25, 21
スライド概要
https://dotnetlab.connpass.com/event/223621/
「Visual Studio 2022 for Mac Private Preview 4 で作る ASP.NET Blazor & Elasticsearch アプリケーション」
Elastic Technical Product Marketing Manager/Evangelist デジタル庁プロジェクトマネージャ 鈴木 章太郎
先日 PublicKey の Blog でも"これから学びたい技術" NoSQL 編上位に選んで戴いた Elasticsearch を使ってデータを検索する Blazor アプリを開発し Elastic Cloud on Azure に展開します。出来上がった index を用いて App Search の機能を用いて React クライアントを自動生成します。
ヴイエムウェア株式会社 プリンシパルエンタープライズアーキテクト。Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け最新技術啓発活動を実施。その後、Dell、Accenture、Elastic 等を通じて現職でも同様の活動を実施。 2019年4月〜2021年8月迄、内閣官房 IT 総合戦略室 政府 CIO 補佐官を兼務、2021年9月〜2024年3月迄、デジタル庁 PjM ユニット ソリューションアーキテクトを兼務。 2022年、企業向けに技術顧問、クラウド等開発技術トレーニング、技術マーケティング支援、エバンジェリスト業務、エバンジェリスト養成などを行う合同会社デベロッパーアドボケイトを設立、数社の技術顧問業務や、トレーニング等を実施。
Visual Studio 2022 for Mac Private Preview 34 で作る ASP.NET Blazor & Elasticsearch アプリケーション 鈴⽊ 章太郎 Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト デジタル庁 プロジェクトマネージャー
Shotaro Suzuki Twitter : @shosuz Elastic Technical Product Marketing Manager/Evangelist デジタル庁 プロジェクトマネージャー 元 Microsoft Technical Evangelist
l l アジェンダ l l l Elastic 概要 Microsoft Azure と Elastic 7.14 統合 Blazorサーバーアプリと Elastic Client 作成、 APM 追加 Index からの React アプリ⾃動⽣成と Azure Static Web Apps デプロイ まとめ
Elastic 概要
結果報告︓Publickey 読者調査2021。読者の中⼼は40代 の IT エンジニア。JavaScript や Linux や AWS に仕事で 関わり、Rust や PotgreSQL に興味 - Publickey ”興味を持っているデータベースについて尋ねた ところ(複数回答)、トップになったのは PostgreSQL でした。Elasticsearch や Redis、MongoDB といった NoSQL が上位 に⼊っているのは興味深いところです。” https://www.publickey1.jp/blog/21/publickey2021.html
About Elastic Elastic 会社概要 Distributed by design 2012 年設⽴ IPO 2018, NYSE: “ESTC” 40 カ国以上で 2,000 ⼈の従業員 3 億 5,000 万以上のダウンロード、 12,000 以上の企業での採⽤ 世界の #1 データベース検索エンジン (DB-Engines)
3 Solutions, 1 Stack, Deploy Anywhere 3 つのソリューション Elastic エンタープライズサーチ Elastic オブザーバビリティ Elastic セキュリティ 可視化 & 管理 Kibana Elastic スタックで実現 Beats 豊富なデプロイ選択肢 蓄積、検索、分析 Elasticsearch Logstash Elastic Cloud Elastic Cloud Enterprise SaaS (AWS/Azure/GCP) IaaS (クラウド & オンプレ) Elastic Cloud on Kubernetes Kubernetes (クラウド & オンプレ) 収集
事例︓三井住友 DS アセット マネジメント株式会社 アナリストが利⽤する資産運⽤での⾼速情報検索に向け Elasticsearch を導⼊。 35 種類のデータソースを Elasticsearch に集約し、圧倒的な検索パフォーマンスで業務を⽀援 https://www.elastic.co/jp/customers/smd-am
膨⼤なデータ処理とリアルタイム性を要求 される配⾞マッチング検索で Elastic を活⽤ 1 秒あたりのデータ投⼊件数︓ 85 万から 130 万メッセージ 1 ⽇あたりのデータ投⼊量︓ 12 TB 1 秒あたりのドキュメント スキャン︓1 億から 40 億のドキュメント数 データサイズ︓ 1 PB クラスター サイズ︓ 700 台の Elasticsearch インジェスション パイプライン︓100 + Data パイプライン ジョブ 2018 年 4 ⽉の Qcon での Uber 様 講演より https://www.infoq.com/presentations/uber-elasticsearch-clusters/
なぜ Elasticsearch なのか︖ 企業では主にリレーショナル データベースを使⽤して データを格納 • • • • テーブルを簡単に結合し必要なデータベースからこのデータを取得できる しかし、時間の経過とともに、データベースとテーブルが肥⼤化して、数百万のデータセットを 含む⼤規模なデータベースになると、操作を実⾏できなくなる ⼀⽅、Elasticsearch は、数百万のドキュメントを数秒で簡単に検索できる Elasticsearch は柔軟で強⼒、オープンでフリーな 分散型リアルタイム検索及び分析エンジン • • • • Elasticsearch はドキュメントベースのデータベースでデータを JSON 形式で保存(⾮正 規化) Elasticsearch は、アプリケーションの強⼒な検索ツールとして使⽤できる インデックス、ドキュメント、フィールド等を作成し、データを Elasticsearch にプッシュで、検 索の準備が整う Elasticsearch の 2 つのユニークで重要な機能 • • • ⽔平スケール ⾼可⽤性 Elasticsearch
Elasticsearch の概念 - インデックス・ドキュメント・フィールド Elasticsearch 具体例 の概念 • • • • • • Elasticsearch は分散ドキュメント ストア 保存されるデータの最⼩単位が ドキュメント ドキュメントは、フィールドと呼ばれる 複数の属性を持つ インデックスはドキュメントの集合 SQL Server, MySQL, postgreSQL 等 インデックス 書籍データが格納 される場所 テーブル ドキュメント 書籍データ レコード フィールド 書籍タイトル、著者、 カラム ISBN、出版⽇、等 RESTful Web サービスの設計原則に従って設計 HTTP メソッドを使って CRUD による⼀通りのドキュメント操作が可能 https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html
CQRS(コマンドクエリー責任分離)との関係 • • 「コマンド クエリ責務分離 (CQRS)パターンは、データ ストアの読み取り操作と更新操作を分離します。 アプリケーション内に CQRS を実装すると、そのパフォーマンス、スケーラビリティ、セキュリティが最⼤化される場合があります。 CQRS への移⾏によって⽣ まれる柔軟性により、システムは時間の経過と共にさらに進化し、更新コマンドでドメインレベルのマージ競合が発⽣することを防ぐこと ができます。」 Elasticsearch はこのアーキテクチャに極めて整合性⾼い Azure Functions https://docs.microsoft.com/ja-jp/azure/architecture/patterns/cqrs
⽇本語のサジェスト機能を実装する際の課題と Elasticsearch を使⽤してこれらの課題を克服する⽅法 https://www.elastic.co/jp/blog/implementing-japanese-autocomplete-suggestions-in-elasticsearch … ⽇本語のサジェストの例 詳細な説明に⼊る前に、⽇本語のサジェスト機能の実装例を⾒ てみましょう。 主な要件 •ユーザーが検索キーワードを⼊⼒すると、関連する候 補が表⽰される。例︓「⽇本」と⼊⼒すると、「⽇本」、 「⽇本 地図」、「⽇本 ⼈⼝」などが提案される。 •不完全な検索キーワードを⼊⼒した場合でも、関連 する候補が表⽰される。例︓「にほn」と⼊⼒すると、 「⽇本」、「⽇本 地図」、「⽇本の⼈⼝」などが提案さ れる。 •タイプミスした場合でも、意味の通る候補が提案され る。例︓「にhん」、「にっほん」、「⽇本ん」と⼊⼒すると、 「⽇本」、「⽇本 地図」、「⽇本の⼈⼝」などが表⽰さ れる。 •候補となる単語が、キーワードが検索された回数が多 い順に⼀覧表⽰される。 ...
無料かつオープンな アプリケーションパフォーマンス監視 https://www.elastic.co/jp/apm https://www.elastic.co/guide/en/apm/agent/rum-js/5.x/react-integration.html
今回のデモアプリの全体像 ASP.NET 5 Blazor App Azure Web Apps 検索・更新 UI APM .NET Agent ・VSCode ・VS for mac 2022 Preview 3 APM SPA Agent Elastic Cloud ・Reference UI ・Search UI ・Reactive Search 検索専⽤ UI https://f79...c67.japaneast.azure.elastic-cloud.com:9243/ Azure Static Web Apps 東⽇本リージョン マスターノード x 1 データノード x 2 ML ノード x 1 https://brave-ocean-06f61b600.azurestaticapps.net/ Azure サブスクリプション
Microsoft Azure と Elastic 7.14 統合
Elastic による検索、展開、管理が簡単 • Azure ポータル内での Elasticsearch の デプロイの表⽰と管理が可能 • ログの取り込みプロセスを⾃動化し、数回 のクリックで環境を迅速に監視可能 • 既に使⽤されている Microsoft Azure サービスに検索機能と可視化機能を簡単 に追加 • Azure コンソールと Elastic コンソール間 のシングルサインオン (SSO) による認証の 合理化 • 展開を管理するのではなくインサイトに集中
Azure にネイティブに統合 された Elastic Elastic Cloud 仕組み ● マイクロソフトはミドルウェアを使⽤して、マーケットプレースの オファーとクラウド API と統合された Azure の API を提供 ● Azure のお客様は、Elastic Cloud (アカウント、デプロイ) で必要なオブジェクトを作成するネイティブの Elasticsearch リソースを作成 ● Azure ユーザーは、⾃分の Azure アカウントを使⽤して、 Kibana とクラウド コンソールに SSO を使⽤できる ● 請求は、「従来の」マーケットプレイスと同様で、マーケットプ レイスサブスクリプションを介して発⽣ ●
Azure にネイティブに統合 された Elastic Elastic Cloud 統合 ● ● サブスクリプションおよびリソース イベントの Azure プラットフォームログを簡単に収集するネイティブ統合 Elastic VM 拡張機能を使⽤して仮想マシンのログ とメトリックを簡単に収集できるように統合 ○ お客様は VM 拡張機能を有効にする ○ Elastic は Agent と Beats を設定し、システム ログとメトリックのストリーミングを開始する ○ 顧客は Fleet 経由で Agent を管理できる ● Azure Private Link をサポート ● 更に追加予定︕︕
Elastic Cloud デプロイ (Elastic & 各 Marketplace) Elastic https://www.elastic.co/jp/ AWS https://aws.amazon.com/marketplace/ Azure https://portal.azure.com/#create/hub GCP https://console.cloud.google.com/marketplace
Elasticsearch エンドポイントデータをコピー ID : (固定) elastic Password : (デプロイ時に取得 → DL) (例) RHGj80iJUO6CF7WBUMiwyu1x Endpoint : (デプロイ後に取得) (例) 8009bf958b6w5923b3c56983d4048df8 24.japaneast.azure.elasticcloud.com:9243
Elasticsearch for VSCode https://marketplace.visualstudio.com/items?itemName=ria.elastic http://user:pass@host:9200 https://elastic:RHGj80iJUO6CF7WBUMiwyu 1x@8009bf958b6w5923b3c56983d4048df 824.japaneast.azure.elasticcloud.com:9243
Visual Studio 2022 for Mac Private Preview 4 https://docs.microsoft.com/en-us/visualstudio/releases/2022/mac-release-notes-preview#17.0.0-priv-pre.1.4 ・Support for .NET 6 RC1 and C# 10. ・Xamarin project support. ・Configuring common project options. ・Pushing changes using the Git Changes feature. https://qiita.com/uikou/items/196ffdd4eeff0e2cd6ed
Blazor サーバーアプリと Elastic Client 作成、APM 追加
新しい Blazor サーバーアプリを作成 • .NET 6.0 / 認証なし 6.0.100-preview.7.21379.14 VS 2022 for Mac Private Preview 4
Elasticsearch への接続を作成 • NEST ライブラリ追加 dotnet add package NEST
appsettings.json の編集
• 取得したクレデンシャルを使⽤して Elasticsearch ブロックを構成
{
//Configure here or better in your secrets.json
"ElasticSearch": {
"Uri": "https://8009bf958b6w5923b3c56983d4048df824.japaneast.azure.elastic-cloud.com:9243",
"Username": "elastic",
"Password": "RHGj80iJUO6CF7WBUMiwyu1x"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"AllowedHosts": "*"
}
Elasticsearch クライアントの作成
NESTクライアントからのすべての要求と応答
を処理
ElasticSearchClient.cs クラスを作成
Startup.cs に登録
コンストラクターで構築
デフォルトのインデックス名 quotes
•
•
•
•
•
•
•
•
•
•
•
各呼び出しでのそれぞれの指定は不要
処理内容
インデックスの作成
Index ドキュメント の挿⼊
クエリからドキュメントを返す = 著者名で
名⾔を得る
インデックスの削除(例︓クリーンアップ)
public Startup(IConfiguration configuration)
…
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<IElasticSearchClient, ElasticSearchClient> ();
services.AddSingleton<IElasticSearchDataSeeder, ElasticSearchDataSeeder>();
}
…
DataSeeder の作成
データシーダーを作成する
•
•
•
•
•
•
•
歴史上の⼈物からの名⾔を検索
インターネット上に多くのデータ、JSON ファイルとしても
存在
DataSeeder (Blazor ページ) を作成し
それをデフォルトメニューにリンク
QuotesModel (POCO クラス) を作成
ElasticSearchDataSeeder クラス作成
ElasticSearchDataSeeder を
Startup.cs に登録
using System.Text.Json.Serialization;
using Nest;
namespace elasticsearch_aspnet_blazor.Model
{
public class QuotesModel
{
[JsonPropertyName("quoteText")] //Attribute name in json
[Keyword] //Attribute for ElasticSearch
public string Text { get; set; }
[JsonPropertyName("quoteAuthor")] //Attribute name in json
[Keyword] //Attribute for ElasticSearch
public string Author { get; set; }
}
}
public Startup(IConfiguration configuration)
…
public void ConfigureServices(IServiceCollection services)
{
…
services.AddSingleton<IElasticSearchDataSeeder, ElasticSearchDataSeeder>();
}
…
• SeedAsync で最初にインターネットリポジトリから名⾔を取得
し、次いでそれらの名⾔を POCO オブジェクトに逆シリアル化
• その後、クリーンアップのために既存のインデックスを削除し、
新しいインデックスを作成
• 最後に、値をサービスにプッシュ
• アプリケーションを実⾏し、新しい DataSeed ページに移動し、
そこにシードを開始
検索ページの作成
単純な検索マスクを使⽤し結果をテーブルに表⽰
Search Blazorページを作成、メニューにページを登録
アプリケーションを実⾏し検索ページに移動
•
•
•
DataSeeder.Razor.cs
using System.Threading.Tasks;
using elasticsearch_aspnet_blazor.ElasticSearch;
using Microsoft.AspNetCore.Components;
namespace elasticsearch_aspnet_blazor.Pages
{
public partial class DataSeeder
{
[Inject]
public IElasticSearchDataSeeder ElasticSearchDataSeeder
{ get; set; }
private async Task SeedData()
{
await ElasticSearchDataSeeder.SeedAsync();
}
}
}
Search.razor
@page "/search"
<h1>ElasticSearch quotes search</h1>
<p>This component demonstrates searching data from ElasticSearch.</p>
<div class="form-group row">
<input @bind="SearchValue" />
<button class="btn btn-primary" @onclick="SearchQuotesAsync">Search</button>
</div>
@if (Quotes == null)
{
<p><em>Please type in your search...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Author</th>
<th>Text</th>
</tr>
</thead>
<tbody>
@foreach (var quote in Quotes)
{
<tr>
<td>@quote.Author</td>
<td>@quote.Text</td>
</tr>
}
</tbody>
</table>
}
Elasticsearch クエリー - Match
ユーザーにテキストを⼊⼒し、そのテキス
トをドキュメント内のコンテンツの任意の
部分と⼀致させる
/// <summary>
///
著者名で名⾔を得る
/// </summary>
/// <param name="author"></param>
/// <returns></returns>
public async Task<IReadOnlyCollection<QuotesModel>> GetQuotesByAuthorAsync(string author)
{
var searchResponse = await Client.SearchAsync<QuotesModel>(s => s
.From(0)
.Size(25)
.Query(q => q
.Match(m => m
.Field(f => f.Author)
.Query(author)
)
)
);
//クエリからドキュメントを返す
var documents = searchResponse.Documents;
return documents;
}
…
Application Performance Monitoring (APM) • • ログ、APM、インフラメトリックは監視の3⼤要素 • 3つの領域には重なり合う部分もあり相互に関連付ける際に 役⽴つ • ログはエラーが⽣じた痕跡のみでエラーの理由までは⽰さない • メトリックはサーバー上で CPU 使⽤量にスパイクがあったこと を⽰すかもしれないが、何が原因だったかは⽰さない • ログやメトリックは、インフラや複数のコンポーネントを扱う横断 的なデータ • うまく組み合わせて活⽤すれば、はるかに広い範囲の問題を 解決できる可能性がある APM はメトリックとログのギャップに橋を架ける存在
Elastic Application Performance Monitoring • マルチページ、シングルページ、双⽅のアプリで有効 • Node.js、Python、Ruby、.NET、 Java、Go Real User Monitoring(JavaScript) • 対応⾔語のさらなる追加も予定 • Elasticがサポートする⾔語はこちら • Jaeger や OpenTelemetry 等各種のオープン スタンダードもサポート • インストルメンテーション済みのアプリから Elastic APM へ驚くほど簡単にデータを送れる • 必要なモジュールが⾒つからなくても独⾃に開発も、 オープンソースコミュニティの成果物の活⽤も可能 • APM から応答時間ベース Machine Learning ジョブを作成する機能もあり
ログと APM とで得られる情報を⽐較 264.242.88.10 - - [22/Jan/2018:16:38:53 -0800] "POST /checkout/addresses/ HTTP/1.1" 500 5253 APMが捉えた内容︓最終発⽣⽇時、 発⽣頻度、アプリケーションで処理された か否か、という情報が表⽰ たとえば NumberParseException を 使って例外処理の詳細を⾒ると、エラーが 発⽣した回数の分布がウインドウで視覚 的に表⽰される ⼀定の時間に数回起きているということ、⼀⽇中 発⽣していることがわかる ログで⾒ても、ログファイルの1つに対応するスタック の痕跡が⾒つかるはず しかし APM のようにそのコンテクストや メタデータ まで⾒つかる可能性は⾼くない ⾚い部分はこの例外処理を実施したコード⾏ APMが提供するメタデータが問題の正確な 内容 プログラマーでない⼈間が⾒ても問題が正確 に理解でき、チケットをオープンのために必要 ⼗分な情報がある
Transactions パフォーマンスのダッシュボード •Request Per Minute •HTTP レスポンスステータ スコード単位での 1分毎の リクエスト数が表⽰ •リクエスト数が急増したこと が原因でレスポンスタイムが 悪化したかここで判断できる •Transaction's duration, Transaction •URL パス単位での平均、95%タイルのレスポンスタイムが表⽰される •特定のパスの処理が遅い時はここを⾒ればすぐに分かる
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
// Startup.cs への追加
--dotnet add Elastic.Apm.NetCoreAll
using Elastic.Apm.AspNetCore;
using Elastic.Apm.DiagnosticSource;
--public void Configure
(IApplicationBuilder app, IWebHostEnvironment env)
{
--// adding Elastic APM Agent for .NET Core
app.UseElasticApm(Configuration,
new HttpDiagnosticsSubscriber());
/* Enable tracing of outgoing HTTP requests */
app.UseHttpsRedirection();
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
}
}
Index からの React アプリ⾃動⽣成と Azure Static Web Apps デプロイ
今回のデモアプリの全体像 ASP.NET 5 Blazor App Azure Web Apps 検索・更新 UI APM .NET Agent ・VSCode ・VS for mac 2022 Preview 3 APM SPA Agent Elastic Cloud ・Reference UI ・Search UI ・Reactive Search 検索専⽤ UI https://f79...c67.japaneast.azure.elastic-cloud.com:9243/ Azure Static Web Apps 東⽇本リージョン マスターノード x 1 データノード x 2 ML ノード x 1 https://brave-ocean-06f61b600.azurestaticapps.net/ Azure サブスクリプション
EC サイトを例にした検索のエクスペリエンス フリーワード検索 絞り込み ソート 集計 ハイライト サジェスト ページング
Reference UI ⽣成が容易 数回のクリックで検索インターフェイスを 設定するだけ 統合が容易 ZIP パッケージをダウンロードし、 アプリケーションでコードを使⽤する 最初の出発点 新しい検索を開始しておいて、 後でカスタマイズすることが可能
優れた React 検索エクスペリエンスを迅速に構築する⽅法 https://www.elastic.co/jp/blog/how-to-build-great-react-search-experiences-quickly Elastic AppSearch または ElasticSite Search 特徴 •Elastic によって管理 •迅速な実装 - 数⾏のコードで完全な検索エクスペリエ ンスを構築 •カスタマイズ可能 - コンポーネント、マークアップ、スタイ ル、および動作を好みに合わせて調整 •スマート URL - 検索、ページング、フィルタリングなどが URL に取り込まれ、結果を直接リンク •ヘッドレス-アプリケーションロジックを活⽤して、独⾃のコ ンポーネントまたはビューを提供 •柔軟なフロントエンド – React のみならずあらゆる JavaScript ライブラリで使⽤可能 •柔軟なバックエンド – ElasticAppSearch のみなら ず 任意のバックエンドで使⽤可能 https://github.com/elastic/search-ui
ReactiveSearch https://opensource.appbase.io/reactivesearch/
Azure Static Web Apps • 静的サイトに最適化されたホスティング環境 • CI/CD を GitHub Actions と統合 • Azure Functions によるサーバーレス API の統合 Microsoft Azure www
Azure Static Web Apps の機能 Web API + リッチな Web UI を実現する機能を提供 • • • • • • GitHub 統合 統合 API サポート Web アプリケーションの構築 静的サイトの発⾏ Web アプリケーションのデプロイ 認証プロバイダーの統合 • Azure Active Directory、Facebook、 Google、GitHub、 Twitter
JavaScript / C# による静的 Web サイトの開発・ホスト https://... + JS https://... + Blazor
Elastic Cloud に CORS を設定 • elasticsearch.yml # Note that the syntax for user settings can change between major versions. # You might need to update these user settings before performing a major version upgrade. # # Slack integration for versions 7.0 and later must use the secure key store method. # For more information, see: # https://www.elastic.co/guide/en/elasticsearch/reference/current/actionsslack.html#configuring-slack (中略) # from: Watcher http.cors.enabled: true http.cors.allow-credentials: true http.cors.allow-origin: "*" http.cors.allow-headers: X-Requested-With, X-Auth-Token, Content-Type, Content-Length, Authorization, Access-Control-Allow-Headers, Accept # # HipChat and PagerDuty integration are also supported. To learn more, see the documentation.
まとめ
まとめ • • • Microsoft Azure と Elastic 7.14 統合試してみてください Blazor Server App + Elastic は簡単(ASP.NET 5版と同様) Reference UI/Search UI による React アプリ構築も簡単
リソース • 公式ドキュメント • 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 • Reactivesearch https://opensource.appbase.io/reactivesearch/ • 優れた React 検索エクスペリエンスを迅速に構築する ⽅法 https://www.elastic.co/jp/blog/how-to-build-great-reactsearch-experiences-quickly • Search UI Elastic GitHub レポジトリ https://github.com/elastic/search-ui https://www.elastic.co/guide/en/apm/agent/dotnet/current/set up-asp-net-core.html • K8s Observability サンプルソリューション GitHub レポジトリ https://github.com/michaelhyatt/k8s-o11y-workshop • 関連ブログ https://www.elastic.co/jp/blog/kubernetes-observabilitytutorial-k8s-cluster-setup-demo-app-deployment https://www.elastic.co/blog/kubernetes-observability-tutorialk8s-log-monitoring-and-analysis-elastic-stack https://www.elastic.co/blog/kubernetes-observability-tutorialk8s-metrics-collection-and-analysis https://www.elastic.co/blog/kubernetes-observability-tutorialk8s-monitoring-application-performance-with-elastic-apm
Azure Static Web Apps リソース︓ Microsoft Lean • Azure Static Web Apps を使⽤してBlazor WebAssembly アプリと.NET API を 公開する • Azure Static Web Apps を使⽤してAngular、React、Svelte、または Vue の JavaScript アプリを発⾏する • Azure Static Web Apps にAPI を発⾏する • Gatsby とAzure Static Web Apps で静的 Web アプリを作成して発⾏する
Qiita Blazor 記事(2020.12.25) https://qiita.com/shosuz/items/1994b69201f25fefb213
アプリケーション開発 オンデマンド ウェビナー特集 • • • Elastic の Search API を Visual Studio Code でコーディングする (1) - (3) Elastic Cloud で Azure Kubernetes Serviecs の様々な Log/Metrics/APM を 可視化する ASP.NET Core 3.x Web アプリのログを Elastic Cloud で収集・分析してみよう︕ https://www.microsoft.com/ja-jp/events/top/apps-innovation-webinars.aspx
Microsoft Japan Digital Days (10/12-14) https://www.microsoft.com/ja-jp/events/top/digital-days.aspx
Thank you for your attention!
Elastic NEST Query
(参考)
Elasticsearch クエリー ① MatchAll
インデックス内の全てのドキュメントを返す
クエリ
≒ RDBMS の "SELECT *" クエリ
private readonly ElasticClient _client;
public HomeController(ILogger<HomeController> logger, ElasticClient client)
{
_logger = logger;
_client = client;
}
public IActionResult Index()
{
var results = _client.Search<Book>(s => s
.Query(q => q
.MatchAll()
)
);
return View(results);
}
(参考)
Elasticsearch クエリー ② Term
public IActionResult Index()
{
ISearchResponse<Book> results;
if (!string.IsNullOrWhiteSpace(query))
{
var results = _client.Search<Book>(s => s
.Query(q => q
.Term(t => t)
.Field(f => f.Isbn)
.Value(query)
)
)
);
}
else
{
.Query(q => q
.MatchAll()
)
);
…
⽤語クエリ
正確なクエリに⼀致するドキュメントを
⾒つける
(参考)
Elasticsearch クエリー ③ Match
public IActionResult Index(string query)
{
ISearchResponse<Book> results;
if (!string.IsNullOrWhiteSpace(query))
{
results = _client.Search<Book>(s => s
.Query(q => q
.Match(t => t
.Field(f => f.Title)
.Query(query)
)
)
);
}
else
{
…
ユーザーにテキストを⼊⼒し、そのテキス
トをドキュメント内のコンテンツの任意の
部分と⼀致させる
[重要な点]
• 複数のドキュメントを照合
• すべての⼀致する⽂書には、タイトルに、
当該テキストが含まれる
•
•
•
⼩⽂字で指定したのにマッチする
この動作はカスタムアナライザーで上書き
可能
これは別の⾼度なトピック
•
Elasticsearch でサポートされる
エリは他にも多数
ク
•
Term クエリと Match クエリは基本的
ユースケース
(参考) Elasticsearch Aggregations ー 集計
(参考) Elasticsearch Aggregations ー 範囲集計 … results = _client.Search<Book>(s => s .Query(q => q .MatchAll() ) .Aggregations(a => a .Range("pageCounts", r => r .Field(f => f.PageCount) .Ranges(r => r.From(0), r => r.From(200).To(400), r => r.From(400).To(600), r => r.From(600) ) ) … [重要な点] • MatchAll クエリに加えて、集計メソッ ドを使⽤ • "範囲" 集計を指定 • Index.cshtml も編集必要
(参考) Elasticsearch Aggregations ー 条件集計 • • • タグバブルやファセットUIシステム のユースケース ⽤語集計 ≒ RDBMS の“GROUP BY”句 ドキュメント間でさまざまな単語(ま たは「⽤語」)に関する統計を取 得可能 • Index.cshtml も編集必要 • … ) .Aggregations(a => a .Range("pageCounts", r => r .Field(f => f.PageCount) .Ranges(r => r.From(0), r => r.From(200).To(400), r => r.From(400).To(600), r => r.From(600) ) ) .Terms("categories", t => t .Field("categories.keyword") ) ) … フィールド値が⽂字列 “categories.keyword” に 設定されているのは、⽤語の集計は負荷の⾼い操 作であり、通常は "text" フィールドでは実⾏されな いため
Add Map Styles の追加 • OpenStreetMap / GoogleMaps を使⽤するには、インデックスにスタイルを 追加 • index.html またはコードベースにインポート可能 <link rel="stylesheet” href="https://cdnjs.cloudflare.com/ajax/libs/ leaflet/1.3.4/leaflet.css"/>
Elastic Cloud のセットアップ • • • • • Elastic Stack を起動して実⾏ 新しい GPU モニタリングデータ⽤のホームが必要なため、Elastic Cloud に新しいデプロイメントを作成 Elastic Cloud を初めて使う場合は、14⽇間の無料トライアルにサインアップ 独⾃の展開をローカルで設定することも可能 ElasticCloud に新しい ElasticObservability デプロイメントを作成