More Related Content Similar to Building asp.net core blazor and elasticsearch elasticsearch using visual studio 2022 for mac private preview 4 (20) More from Shotaro Suzuki (20) Building asp.net core blazor and elasticsearch elasticsearch using visual studio 2022 for mac private preview 41. Visual Studio 2022 for Mac
Private Preview 34 で作る
ASP.NET Blazor & Elasticsearch
アプリケーション
鈴⽊ 章太郎
Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト
デジタル庁 プロジェクトマネージャー
3. l Elastic 概要
l Microsoft Azure と Elastic 7.14 統合
l Blazorサーバーアプリと Elastic Client 作成、
APM 追加
l Index からの React アプリ⾃動⽣成と Azure
Static Web Apps デプロイ
l まとめ
アジェンダ
5. 結果報告︓Publickey 読者調査2021。読者の中⼼は40代
の IT エンジニア。JavaScript や Linux や AWS に仕事で
関わり、Rust や PotgreSQL に興味 - Publickey
”興味を持っているデータベースについて尋ねた
ところ(複数回答)、トップになったのは
PostgreSQL でした。Elasticsearch や
Redis、MongoDB といった NoSQL が上位
に⼊っているのは興味深いところです。”
https://www.publickey1.jp/blog/21/publickey2021.html
6. 3 億 5,000 万以上のダウンロード、
12,000 以上の企業での採⽤
40 カ国以上で 2,000 ⼈の従業員
IPO 2018, NYSE: “ESTC”
2012 年設⽴
Elastic 会社概要
Distributed by design
About Elastic
世界の #1 データベース検索エンジン
(DB-Engines)
7. 3 Solutions, 1 Stack, Deploy Anywhere
Elastic スタックで実現
Kibana
Elasticsearch
Beats Logstash
Elastic エンタープライズサーチ Elastic セキュリティ
Elastic オブザーバビリティ
3 つのソリューション
SaaS
(AWS/Azure/GCP)
IaaS
(クラウド & オンプレ)
Elastic Cloud
on Kubernetes
Elastic Cloud Elastic Cloud
Enterprise
豊富なデプロイ選択肢
Kubernetes
(クラウド & オンプレ)
蓄積、検索、分析
可視化 & 管理
収集
9. 膨⼤なデータ処理とリアルタイム性を要求
される配⾞マッチング検索で 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/
10. なぜ Elasticsearch なのか︖
• 企業では主にリレーショナル データベースを使⽤して
データを格納
• テーブルを簡単に結合し必要なデータベースからこのデータを取得できる
• しかし、時間の経過とともに、データベースとテーブルが肥⼤化して、数百万のデータセットを
含む⼤規模なデータベースになると、操作を実⾏できなくなる
• ⼀⽅、Elasticsearch は、数百万のドキュメントを数秒で簡単に検索できる
• Elasticsearch は柔軟で強⼒、オープンでフリーな
分散型リアルタイム検索及び分析エンジン
• Elasticsearch はドキュメントベースのデータベースでデータを JSON 形式で保存(⾮正
規化)
• Elasticsearch は、アプリケーションの強⼒な検索ツールとして使⽤できる
• インデックス、ドキュメント、フィールド等を作成し、データを Elasticsearch にプッシュで、検
索の準備が整う
• Elasticsearch の 2 つのユニークで重要な機能
• ⽔平スケール
• ⾼可⽤性
Elasticsearch
11. Elasticsearch の概念
- インデックス・ドキュメント・フィールド
• Elasticsearch は分散ドキュメント
ストア
• 保存されるデータの最⼩単位が
ドキュメント
• ドキュメントは、フィールドと呼ばれる
複数の属性を持つ
• インデックスはドキュメントの集合
Elasticsearch
の概念
具体例
SQL Server,
MySQL,
postgreSQL 等
インデックス
書籍データが格納
される場所
テーブル
ドキュメント 書籍データ レコード
フィールド
書籍タイトル、著者、
ISBN、出版⽇、等
カラム
https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html
• RESTful Web サービスの設計原則に従って設計
• HTTP メソッドを使って CRUD による⼀通りのドキュメント操作が可能
12. CQRS(コマンドクエリー責任分離)との関係
• 「コマンド クエリ責務分離 (CQRS)パターンは、データ ストアの読み取り操作と更新操作を分離します。 アプリケーション内に
CQRS を実装すると、そのパフォーマンス、スケーラビリティ、セキュリティが最⼤化される場合があります。 CQRS への移⾏によって⽣
まれる柔軟性により、システムは時間の経過と共にさらに進化し、更新コマンドでドメインレベルのマージ競合が発⽣することを防ぐこと
ができます。」
• Elasticsearch はこのアーキテクチャに極めて整合性⾼い
https://docs.microsoft.com/ja-jp/azure/architecture/patterns/cqrs
Azure
Functions
15. 今回のデモアプリの全体像
Azure Static
Web Apps
・Reference UI
・Search UI
・Reactive Search
検索専⽤ UI
Azure
Web Apps
Elastic Cloud
Azure サブスクリプション
検索・更新 UI
APM .NET Agent
東⽇本リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://f79...c67.japaneast.azure.elastic-cloud.com:9243/
ASP.NET 5
Blazor App
APM SPA Agent
https://brave-ocean-06f61b600.azurestaticapps.net/
・VSCode
・VS for
mac 2022
Preview 3
17. Elastic による検索、展開、管理が簡単
• Azure ポータル内での Elasticsearch の
デプロイの表⽰と管理が可能
• ログの取り込みプロセスを⾃動化し、数回
のクリックで環境を迅速に監視可能
• 既に使⽤されている Microsoft Azure
サービスに検索機能と可視化機能を簡単
に追加
• Azure コンソールと Elastic コンソール間
のシングルサインオン (SSO) による認証の
合理化
• 展開を管理するのではなくインサイトに集中
18. 仕組み
● マイクロソフトはミドルウェアを使⽤して、マーケットプレースの
オファーとクラウド API と統合された Azure の API を提供
● Azure のお客様は、Elastic Cloud (アカウント、デプロイ)
で必要なオブジェクトを作成するネイティブの
Elasticsearch リソースを作成
● Azure ユーザーは、⾃分の Azure アカウントを使⽤して、
Kibana とクラウド コンソールに SSO を使⽤できる
● 請求は、「従来の」マーケットプレイスと同様で、マーケットプ
レイスサブスクリプションを介して発⽣
●
Azure にネイティブに統合
された Elastic
Elastic Cloud
19. 統合
● サブスクリプションおよびリソース イベントの Azure
プラットフォームログを簡単に収集するネイティブ統合
● Elastic VM 拡張機能を使⽤して仮想マシンのログ
とメトリックを簡単に収集できるように統合
○ お客様は VM 拡張機能を有効にする
○ Elastic は Agent と Beats を設定し、システム
ログとメトリックのストリーミングを開始する
○ 顧客は Fleet 経由で Agent を管理できる
● Azure Private Link をサポート
● 更に追加予定︕︕
Azure にネイティブに統合
された Elastic
Elastic Cloud
20. Elastic Cloud デプロイ (Elastic & 各 Marketplace)
https://www.elastic.co/jp/
https://portal.azure.com/#create/hub
https://aws.amazon.com/marketplace/
https://console.cloud.google.com/marketplace
Elastic
Azure
AWS
GCP
21. Elasticsearch エンドポイントデータをコピー
ID : (固定)
elastic
Password : (デプロイ時に取得 → DL)
(例) RHGj80iJUO6CF7WBUMiwyu1x
Endpoint : (デプロイ後に取得)
(例)
8009bf958b6w5923b3c56983d4048df8
24.japaneast.azure.elastic-
cloud.com:9243
23. 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
https://qiita.com/uikou/items/196ffdd4eeff0e2cd6ed
・Support for .NET 6 RC1
and C# 10.
・Xamarin project support.
・Configuring common
project options.
・Pushing changes using
the Git Changes feature.
27. 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": "*"
}
28. 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>();
}
…
29. DataSeeder の作成
• データシーダーを作成する
• 歴史上の⼈物からの名⾔を検索
• インターネット上に多くのデータ、JSON ファイルとしても
存在
• DataSeeder (Blazor ページ) を作成し
それをデフォルトメニューにリンク
• QuotesModel (POCO クラス) を作成
• ElasticSearchDataSeeder クラス作成
• ElasticSearchDataSeeder を
Startup.cs に登録
public Startup(IConfiguration configuration)
…
public void ConfigureServices(IServiceCollection services)
{
…
services.AddSingleton<IElasticSearchDataSeeder, ElasticSearchDataSeeder>();
}
…
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; }
}
}
• SeedAsync で最初にインターネットリポジトリから名⾔を取得
し、次いでそれらの名⾔を POCO オブジェクトに逆シリアル化
• その後、クリーンアップのために既存のインデックスを削除し、
新しいインデックスを作成
• 最後に、値をサービスにプッシュ
• アプリケーションを実⾏し、新しい DataSeed ページに移動し、
そこにシードを開始
30. 検索ページの作成
• 単純な検索マスクを使⽤し結果をテーブルに表⽰
• 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>
}
31. 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;
}
…
ユーザーにテキストを⼊⼒し、そのテキス
トをドキュメント内のコンテンツの任意の
部分と⼀致させる
32. Application Performance Monitoring (APM)
• ログ、APM、インフラメトリックは監視の3⼤要素
• 3つの領域には重なり合う部分もあり相互に関連付ける際に
役⽴つ
• ログはエラーが⽣じた痕跡のみでエラーの理由までは⽰さない
• メトリックはサーバー上で CPU 使⽤量にスパイクがあったこと
を⽰すかもしれないが、何が原因だったかは⽰さない
• ログやメトリックは、インフラや複数のコンポーネントを扱う横断
的なデータ
• うまく組み合わせて活⽤すれば、はるかに広い範囲の問題を
解決できる可能性がある
• APM はメトリックとログのギャップに橋を架ける存在
33. Elastic Application Performance Monitoring
• マルチページ、シングルページ、双⽅のアプリで有効
• Node.js、Python、Ruby、.NET、 Java、Go
Real User Monitoring(JavaScript)
• 対応⾔語のさらなる追加も予定
• Elasticがサポートする⾔語はこちら
• Jaeger や OpenTelemetry 等各種のオープン
スタンダードもサポート
• インストルメンテーション済みのアプリから Elastic
APM へ驚くほど簡単にデータを送れる
• 必要なモジュールが⾒つからなくても独⾃に開発も、
オープンソースコミュニティの成果物の活⽤も可能
• APM から応答時間ベース Machine Learning
ジョブを作成する機能もあり
34. ログと APM とで得られる情報を⽐較
264.242.88.10 - - [22/Jan/2018:16:38:53 -0800]
"POST /checkout/addresses/ HTTP/1.1" 500 5253
⼀定の時間に数回起きているということ、⼀⽇中
発⽣していることがわかる
ログで⾒ても、ログファイルの1つに対応するスタック
の痕跡が⾒つかるはず
しかし APM のようにそのコンテクストや メタデータ
まで⾒つかる可能性は⾼くない
APMが捉えた内容︓最終発⽣⽇時、
発⽣頻度、アプリケーションで処理された
か否か、という情報が表⽰
たとえば NumberParseException を
使って例外処理の詳細を⾒ると、エラーが
発⽣した回数の分布がウインドウで視覚
的に表⽰される
⾚い部分はこの例外処理を実施したコード⾏
APMが提供するメタデータが問題の正確な
内容
プログラマーでない⼈間が⾒ても問題が正確
に理解でき、チケットをオープンのために必要
⼗分な情報がある
36. 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
}
}
38. 今回のデモアプリの全体像
Azure Static
Web Apps
・Reference UI
・Search UI
・Reactive Search
検索専⽤ UI
Azure
Web Apps
Elastic Cloud
Azure サブスクリプション
検索・更新 UI
APM .NET Agent
東⽇本リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://f79...c67.japaneast.azure.elastic-cloud.com:9243/
ASP.NET 5
Blazor App
APM SPA Agent
https://brave-ocean-06f61b600.azurestaticapps.net/
・VSCode
・VS for
mac 2022
Preview 3
44. • GitHub 統合
• 統合 API サポート
• Web アプリケーションの構築
• 静的サイトの発⾏
• Web アプリケーションのデプロイ
• 認証プロバイダーの統合
• Azure Active Directory、Facebook、
Google、GitHub、 Twitter
Azure Static Web Apps の機能
Web API + リッチな Web UI を実現する機能を提供
45. https:/ / . . .
Blazor
+
https:/ / . . .
+
JS
JavaScript / C# による静的 Web サイトの開発・ホスト
46. Elastic Cloud に CORS を設定
# 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/actions-
slack.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.
• elasticsearch.yml
48. まとめ
• Microsoft Azure と Elastic 7.14 統合試してみてください
• Blazor Server App + Elastic は簡単(ASP.NET 5版と同様)
• Reference UI/Search UI による React アプリ構築も簡単
49. リソース
• 公式ドキュメント
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
• Reactivesearch
https://opensource.appbase.io/reactivesearch/
• 優れた React 検索エクスペリエンスを迅速に構築する
⽅法
https://www.elastic.co/jp/blog/how-to-build-great-react-
search-experiences-quickly
• Search UI Elastic GitHub レポジトリ
https://github.com/elastic/search-ui
• 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
• K8s Observability サンプルソリューション GitHub
レポジトリ
https://github.com/michaelhyatt/k8s-o11y-workshop
• 関連ブログ
https://www.elastic.co/jp/blog/kubernetes-observability-
tutorial-k8s-cluster-setup-demo-app-deployment
https://www.elastic.co/blog/kubernetes-observability-tutorial-
k8s-log-monitoring-and-analysis-elastic-stack
https://www.elastic.co/blog/kubernetes-observability-tutorial-
k8s-metrics-collection-and-analysis
https://www.elastic.co/blog/kubernetes-observability-tutorial-
k8s-monitoring-application-performance-with-elastic-apm
50. 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 ア
プ
リを作成して
発⾏する
56. (参考)
Elasticsearch クエリー ① MatchAll
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);
}
インデックス内の全てのドキュメントを返す
クエリ
≒ RDBMS の "SELECT *" クエリ
57. (参考)
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()
)
);
…
⽤語クエリ
正確なクエリに⼀致するドキュメントを
⾒つける
58. (参考)
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 クエリは基本的
ユースケース
60. (参考)
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 も編集必要
61. (参考)
Elasticsearch Aggregations ー 条件集計
…
)
.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")
)
)
…
• タグバブルやファセットUIシステム
のユースケース
• ⽤語集計
• ≒ RDBMS の“GROUP BY”句
• ドキュメント間でさまざまな単語(ま
たは「⽤語」)に関する統計を取
得可能
• Index.cshtml も編集必要
フィールド値が⽂字列 “categories.keyword” に
設定されているのは、⽤語の集計は負荷の⾼い操
作であり、通常は "text" フィールドでは実⾏されな
いため
62. Add Map Styles の追加
• OpenStreetMap / GoogleMaps を使⽤するには、インデックスにスタイルを
追加
• index.html またはコードベースにインポート可能
<link rel="stylesheet”
href="https://cdnjs.cloudflare.com/ajax/libs/
leaflet/1.3.4/leaflet.css"/>
63. Elastic Cloud のセットアップ
• Elastic Stack を起動して実⾏
• 新しい GPU モニタリングデータ⽤のホームが必要なため、Elastic Cloud に新しいデプロイメントを作成
• Elastic Cloud を初めて使う場合は、14⽇間の無料トライアルにサインアップ
• 独⾃の展開をローカルで設定することも可能
• ElasticCloud に新しい ElasticObservability デプロイメントを作成