Elastic on Azure Integration & Building React UI Based Search App Using Azure Static Web Apps

Azure x Elastic 統合、
Azure Static Web Apps、Search UI
(React) を使った検索アプリの構築
鈴⽊章太郎
Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト
内閣官房 IT 総合戦略室政府 CIO 補佐官

Elastic
Technical Product Marketing
Manager/Evangelist
内閣官房 IT 総合戦略室
政府 CIO 補佐官
元 Microsoft Technical Evangelist
Twitter : @shosuz
Shotaro Suzuki

1. Elastic 概要
2. Microsoft Azure と Elastic 7.13 統合 (Preview)
3. Search UI による React フロントエンドアプリ構築
4. Azure Static Web Apps へのデプロイ
5. まとめ
アジェンダ

3 億 5,000 万以上のダウンロード、
12,000 以上の企業での採⽤
40 カ国以上で 2,000 ⼈の従業員
IPO 2018, NYSE: “ESTC”
2012 年設⽴
Elastic 会社概要
Distributed by design
About Elastic
世界の #1 データベース検索エンジン
(DB-Engines)

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
(クラウド & オンプレ）
蓄積、検索、分析
可視化 & 管理
収集

アナリストが利⽤する資産運⽤での⾼速情報検索に向け Elasticsearch を導⼊。
35 種類のデータソースを Elasticsearch に集約し、圧倒的な検索パフォーマンスで業務を⽀援
https://www.elastic.co/jp/customers/smd-am
事例︓三井住友 DS アセットマネジメント株式会社

膨⼤なデータ処理とリアルタイム性を要求
される配⾞マッチング検索で 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、出版⽇、等
カラム
https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html
• RESTful Web サービスの設計原則に従って設計
• HTTP メソッドを使って CRUD による⼀通りのドキュメント操作が可能

CQRS（コマンドクエリー責任分離）との関係
• 「コマンドクエリ責務分離（CQRS）パターンは、データストアの読み取り操作と更新操作を分離します。アプリケーション内に
CQRS を実装すると、そのパフォーマンス、スケーラビリティ、セキュリティが最⼤化される場合があります。 CQRS への移⾏によって⽣
まれる柔軟性により、システムは時間の経過と共にさらに進化し、更新コマンドでドメインレベルのマージ競合が発⽣することを防ぐこと
ができます。」
• Elasticsearch はこのアーキテクチャに極めて整合性⾼い
https://docs.microsoft.com/ja-jp/azure/architecture/patterns/cqrs
Cloud
Function

⽇本語のサジェスト機能を実装する際の課題と
Elasticsearch を使⽤してこれらの課題を克服する⽅法
https://www.elastic.co/jp/blog/implementing-japanese-autocomplete-suggestions-in-elasticsearch
…
⽇本語のサジェストの例
詳細な説明に⼊る前に、⽇本語のサジェスト機能の実装例を⾒
てみましょう。
主な要件
•ユーザーが検索キーワードを⼊⼒すると、関連する候
補が表⽰される。例︓「⽇本」と⼊⼒すると、「⽇本」、
「⽇本地図」、「⽇本⼈⼝」などが提案される。
•不完全な検索キーワードを⼊⼒した場合でも、関連
する候補が表⽰される。例︓「にほｎ」と⼊⼒すると、
「⽇本」、「⽇本地図」、「⽇本の⼈⼝」などが提案さ
れる。
•タイプミスした場合でも、意味の通る候補が提案され
る。例︓「にｈん」、「にっほん」、「⽇本ん」と⼊⼒すると、
「⽇本」、「⽇本地図」、「⽇本の⼈⼝」などが表⽰さ
れる。
•候補となる単語が、キーワードが検索された回数が多
い順に⼀覧表⽰される。
...

無料かつオープンな
アプリケーションパフォーマンス監視
https://www.elastic.co/jp/apm
https://www.elastic.co/guide/en/apm/agent/rum-js/5.x/react-integration.html

データを収集、投⼊する

Logstash による
Elasticsearch へのデータ⼀括挿⼊

保存、インデックス、分析
• 弾⼒性のある、スケールアウトを
考慮した設計
• ⾼可⽤性、マルチテナンシー
• 構造化/⾮構造化データ対応
分散型かつ
スケーラブル
開発者にとって
親しみやすい
検索と分析
• スキーマレス
• ネイティブな JSON
• クライアントライブラリ
• Apache Lucene
• リアルタイム
• 全⽂検索
• 集計
• 地理空間データ
• 多⾔語データ

可視化 → 気付き（洞察）を得る
• データ内に存在するパターン
の探索と分析: 任意のレベ
ルへのドリルダウンが可能
• Elasticsearch の強⼒な
分析機能を活⽤
洞察の発⾒カスタマイズと共有
• 棒グラフ、折れ線グラフや散
布図、マップ、ヒストグラムの
作成
• ダッシュボードを共有し、
運⽤ワークフローに組み込み
• 組込み可能なアーキテクチャ:
• ダッシュボードや可視化をアプリとして作成
• セッション管理、ユーザーロール、
セキュリティ統合
アプリ構築向け
UX プラットフォーム

今回のデモアプリの全体像
Azure Static
Web Apps
Reactive
Search
検索専⽤ UI
Azure
Web Apps
Azure
SQL Database
Elastic Cloud
Azure サブスクリプション
Logstash
Azure
VM
(Linux)
検索・更新 UI
※
※ 今回は⼿動。同期⽅法例︓https://www.elastic.co/jp/blog/how-to-keep-elasticsearch-synchronized-with-a-relational-database-using-logstash
APM .NET Agent
https://booksindex.azurewebsites.net/
東⽇本リージョン
マスターノード x 1
データノード x 2
ML ノード x 1
https://f79...c67.japaneast.azure.elastic-cloud.com:9243/
ASP.NET 5
Web App,
Blazor App
APM SPA Agent
https://brave-ocean-06f61b600.azurestaticapps.net/
VSCode

Data.world – National Parks Visitation
https://data.world/inform8n/us-national-parks-visitation-1904-2016-with-
boundaries/workspace/

Microsoft Azure と
Elastic 7.13 統合 (Preview)

Elastic による検索、展開、管理が簡単
• Azure ポータル内での Elasticsearch の
デプロイの表⽰と管理が可能
• ログの取り込みプロセスを⾃動化し、数回
のクリックで環境を迅速に監視可能
• 既に使⽤されている Microsoft Azure
サービスに検索機能と可視化機能を簡単
に追加
• Azure コンソールと Elastic コンソール間
のシングルサインオン (SSO) による認証の
合理化
• 展開を管理するのではなくインサイトに集中

仕組み
● マイクロソフトはミドルウェアを使⽤して、マーケットプレースの
オファーとクラウド API と統合された Azure の API を提供
● Azure のお客様は、Elastic Cloud (アカウント、デプロイ)
で必要なオブジェクトを作成するネイティブの
Elasticsearch リソースを作成
● Azure ユーザーは、⾃分の Azure アカウントを使⽤して、
Kibana とクラウドコンソールに SSO を使⽤できる
● 請求は、「従来の」マーケットプレイスと同様で、マーケットプ
レイスサブスクリプションを介して発⽣
●
Azure にネイティブに統合
された Elastic
Elastic Cloud
Choice &
Simplicity

統合
● サブスクリプションおよびリソースイベントの Azure プラット
フォームログを簡単に収集するネイティブ統合
● Elastic VM 拡張機能を使⽤して仮想マシンのログとメト
リックを簡単に収集できるように統合
○ お客様は VM 拡張機能を有効にする
○ Elastic は Agent と Beats を設定し、システムログ
とメトリックのストリーミングを開始する
○ 顧客は Fleet 経由で Agent を管理できる
● Azure Private Link をサポート (クローズドベータ)
● 更に追加予定︕︕
Azure にネイティブに統合
された Elastic
Elastic Cloud
Choice &
Simplicity

Search UI による
React フロントエンドアプリ構築

EC サイトを例にした検索のエクスペリエンス
フリーワード検索
サジェストページング
集計
絞り込み
ハイライト
ソート

Reference UI
⽣成が容易
数回のクリックで検索インターフェイスを
設定するだけ
統合が容易
ZIP パッケージをダウンロードし、
アプリケーションでコードを使⽤する
最初の出発点
新しい検索を開始しておいて、
後でカスタマイズすることが可能

優れた React 検索エクスペリエンスを迅速に構築する⽅法
https://www.elastic.co/jp/blog/how-to-build-great-react-search-experiences-quickly
https://github.com/elastic/search-ui
Elastic AppSearch または ElasticSite Search
特徴
•Elastic によって管理
•迅速な実装 - 数⾏のコードで完全な検索エクスペリエ
ンスを構築
•カスタマイズ可能 - コンポーネント、マークアップ、スタイ
ル、および動作を好みに合わせて調整
•スマート URL - 検索、ページング、フィルタリングなどが
URL に取り込まれ、結果を直接リンク
•ヘッドレス-アプリケーションロジックを活⽤して、独⾃のコ
ンポーネントまたはビューを提供
•柔軟なフロントエンド – React のみならずあらゆる
JavaScript ライブラリで使⽤可能
•柔軟なバックエンド – ElasticAppSearch のみなら
ず任意のバックエンドで使⽤可能

ReactiveSearch
https://opensource.appbase.io/reactivesearch/

Azure Static Web Apps へのデプロイ

• 静的サイトに最適化されたホスティング環境
• CI/CD を GitHub Actions と統合
• Azure Functions によるサーバーレス API の統合
Microsoft Azure
www
Azure Static Web Apps

• GitHub 統合
• 統合 API サポート
• Web アプリケーションの構築
• 静的サイトの発⾏
• Web アプリケーションのデプロイ
• 認証プロバイダーの統合
• Azure Active Directory、Facebook、
Google、GitHub、 Twitter
Azure Static Web Apps の機能
Web API ＋リッチな Web UI を実現する機能を提供

https:/ / . . .
Blazor
＋
https:/ / . . .
＋
JS
JavaScript / C# による静的 Web サイトの開発・ホスト

リポジトリを作成する
• GitHub テンプレートリポジトリを使⽤して、新しいリポジトリを簡単に作成
• ⼀連のテンプレートを使⽤できる
• 異なるフロントエンドフレームワークでビルドされたスターターアプリが含まれている
• テンプレートリポジトリの [テンプレートから作成] ページに移動
• “404 ページが⾒つかりません” というエラーが表⽰された場合は、GitHub にサインインして、
もう⼀度やり直し
• 所有者の⼊⼒を求められた場合は、GitHub アカウントのいずれかを選択
• リポジトリに例︓my-static-web-app という名前をつける
• [Create repository from template](テンプレートからリポジトリを作成する) を選択
• GitHub アカウントに my-static-web-app という名前の GitHub リポジトリが作成された
ことを確認

アプリを実⾏する
• リポジトリをクローンし、ローカルにコードを実⾏
• ソースコードのフォルダーに移動
• 任意のフロントエンドフレームワークのフォルダーに移動（ここでは React）
• アプリケーションの依存関係をインストール
• 最後に、フロントエンドクライアントアプリケーションを実⾏
git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app
cd my-static-web-app
cd react-app
npm install
npm start

アプリに移動する
• アプリケーションがローカルで実⾏されていることを
確認
• フロントエンドアプリケーションはそれぞれ別の
ポートで実⾏される
• リンクを選択してアプリケーションに移動
• http://localhost:3000 を参照
※ ここでは API なしでアプリをデプロイ
• Ctrl + C キーを押して、実⾏中のアプリを停⽌

Azure Static Web App と
GitHub Actions ワークフロー
• Azure Static Web Apps では、必要なすべての Azure リソースのプロビジョニングが
⾃動的に実施
• アプリをホストする前、変更を⾏う際、アプリをビルドするためのリポジトリへのコミットま
たは pull request によって⾏う必要あり
• Azure Static Web Apps の主な機能としてアプリケーションをビルドして発⾏するため
の GitHub Actions ワークフローを設定できる
• Azure Static Web Apps リソースを作成すると、GitHub Actions ワークフローが
作成される
• ワークフローはすぐにトリガーされ、アプリのビルドと発⾏が⾏われる
• リポジトリ内の監視対象ブランチに変更を加えるたびに、ワークフローがトリガーされる

Azure Static Web Apps
2つの⾃動化された側⾯
1.アプリを構成する基になる Azure リソースのプロビジョニング
2.アプリケーションをビルドして発⾏する GitHub Actions ワークフロー
• Azure Static Web Apps で Web にアプリを発⾏すると、
Web アプリとスケーラブルな API のホストが⾼速になる
• GitHub Actions によって提供される統合ビルドおよびデプロイ
ワークフローが得られる

Static Web Apps インスタンスを GitHub に接続
• Static Web Apps インスタンスを作成する
には、GitHub にサインインし、アプリのコード
が含まれているリポジトリを指定
• アプリを⾃動的にビルドしてデプロイできるよう
に、リポジトリ内に3つのフォルダーパスを指定
• アプリのビルド出⼒はアプリケーションのビルド
出⼒ディレクトリへの相対パス
• 例︓ビルドされた資産を my-app/dist フォル
ダーに出⼒するアプリが my-app にある場合、
この場所には dist を指定
• ビルドの詳細画⾯でビルドのプリセットを選択
• React を選択すると⾃動的に
• アプリの場所
• アプリのビルド出⼒の場所
• API の場所
の3つに値が⼊⼒される

GitHub Actions を使⽤してソースコードから静的資産へ
• GitHub リポジトリにはソースコードが格納され、発⾏する
前にビルドする必要あり
• Static Web Apps インスタンスを作成すると、⾃動的にリ
ポジトリに GitHub Actions ワークフローが作成される
• このワークフローによって、追跡するように選択したブランチに
対して変更内容をプッシュしたり、pull request を作成し
たりするたびに、アプリがビルドされる。これにより、ソースコー
ドが静的資産に変換され、Azure によって提供される
• ビルドが完了すると、アクションによって資産がデプロイされる
• その GitHub アクションはリポジトリ
の .github/workflows フォルダーに追加される
• 必要に応じて、このファイルを確認または変更できる
• リソースの作成時に⼊⼒した設定は、GitHub アクションの
ファイルに保存される

Azure Functions と統合された API
• API が必要な場合
• Azure Functions プロジェクトとしてリポジトリ
内に実装できる
• API は⾃動的にデプロイされ、Static Web
Apps インスタンスによってホストされる
• GitHub Actions ワークフローによって、指定
したフォルダーの名前でリポジトリ内の API が
検索される
• 通常、API アプリは api または functions と
いう名前のフォルダーに配置されるところ、好きな
名前を付けることができる
• 指定したフォルダー内に API が検出され
ない場合
• API は発⾏されず、アプリのみ発⾏される
例︓
https://docs.microsoft.com/ja-jp/learn/modules/publish-static-web-app-api-preview-url/3-build-api

GitHub Actions を使⽤してソースコードから静的資産へ
• GitHub リポジトリの [Actions](アクション) ページに移動し、ビルドおよびデプロイアクションの
状態を確認できる
• Visual Studio Code エディターで例︓my-first-static-web-app を右クリックし[ポータルで開く]
• [Azure Static Web Apps CI/CD] を選択
• ci: add Azure Static Web Apps workflow file のようなタイトルのついた最上位のコミットを選択
• 左にある [Build and Deploy Job]リンクを選択。ここから、ビルド時にアプリの進⾏状況を確認できる

Web サイトを表⽰する
• GitHub アクションによって Web アプリのビルドと発⾏が完了すると実⾏中のアプリを参照して
確認できる
• Azure portal の [URL] リンクを選択して、ブラウザーでアプリにアクセス

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

まとめ
• Microsoft Azure と Elastic 7.13 統合試してみてください
• Reference UI/Search UI による React アプリ構築は簡単
• Azure Static Web Apps へのデプロイをやってみましょう︕

リソース
公式ドキュメント
https://www.elastic.co/guide/index.html
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
A Walk in the Park with Elastic App Search Sample Engines
https://www.elastic.co/jp/blog/a-walk-in-the-park-with-elastic-app-search-sample-engines
サンプルソリューション 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

リソース︓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 ア
プ
リを作成して
発⾏する

Elastic on Microsoft Azure:
インテグレーション強化による価値の創出
https://www.elastic.co/jp/webinars/elastic-on-microsoft-azure-accelerate-time-to-value-with-enhanced-integration

ElasticON Solution Series Japan (7⽉毎週)
https://www.elastic.co/elasticon/solution-series/asia-pacific-jp

アプリケーション開発オンデマンドウェビナー特集
https://www.microsoft.com/ja-jp/events/top/apps-innovation-webinars.aspx
• Elastic の Search API を Visual Studio
Code でコーディングする (1) - (3)
• Elastic Cloud で Azure Kubernetes
Serviecs の様々な Log/Metrics/APM を
可視化する
• ASP.NET Core 3.x Web アプリのログを
Elastic Cloud で収集・分析してみよう︕

Elastic on Azure Integration & Building React UI Based Search App Using Azure Static Web Apps

Recommended

More Related Content

What's hot (20)

Similar to Elastic on Azure Integration & Building React UI Based Search App Using Azure Static Web Apps (20)

More from Shotaro Suzuki (20)

Recently uploaded (7)

Elastic on Azure Integration & Building React UI Based Search App Using Azure Static Web Apps