Elastic Cloud, App Search, Docker, Python, React Search UI を使った Elastic サンプルアプリのご紹介

開発者にリッチな検索ソリューションの構築方法を紹介するエンドツーエンドのデモ

皆様こんにちは！
公開は既に半年ほど前になりますが、良いコンテンツなのでこの機会にブログにしておきますね。第48回 Elasticsearch勉強会 2022.6.29 #elasticsearchjp　のセッションでご紹介した簡単なチュートリアル、Elastiflix です。
当日のスライドはこちら になります。
これは Elastic 本社の Product Marketing Manager が作成し、このブログで公開したもので、Elastic が開発者に豊富な検索ソリューションの構築方法をご紹介するエンドツーエンドのデモです。

Elastiflix は、TMDB インターネットムービーデータベースのデータを活用した Web ベースのユーザーインターフェイスを提供する架空のビデオストリーミングサービス会社です。Elastiflix は、Elastic Cloud にある TMDB データのインデックス付きコピーからデータをクエリするメカニズムを提供し、優れた検索エクスペリエンスを提供するために、そのデータの高パフォーマンスで柔軟な管理とクエリを可能にします。

技術的には、Enterprise Search Python ライブラリを使用して Elastic Enterprise Search にデータを取り込み、Elastic GitHub にも公開済みの無料のオープンソースツールである Search UI を使用して、React で最新の UI を作成するものです。

前提条件

• Elastic Cloud デプロイメントが作成されていること。
  ソリューションを構築するための無制限の14日間の無料トライアルにサインアップできます

• Docker Desktopがインストール済みであること

Elastic Cloudのセットアップ

このサンプルの使用を開始するには、Elastic Cloud の 14 日間の無料試用版を作成します。
https://cloud.elastic.co/registration にアクセスして Google アカウントまたは Microsoft アカウントにサインアップするか、別のメールでサインアップします。ログイン後、Elastic Cloud コンソールが表示されます。
[デプロイの作成] をクリックすると、クラウドプロバイダーと選択したリージョンでホストされている新しい Elastic Cloud デプロイの作成手順を、順を追って説明します。Elastic Cloud は、Microsoft Azure、Google Cloud Platform (今回はこれ、asia-northeast-1の東京リージョンを選択)、または Amazon Web Services で実行できます。
設定を展開すると、プロバイダー/地域やその他の設定を選択できますが、現時点ではデフォルトのままにしておくことができます。　
「デプロイの作成」をクリックすると、Elastic Cloud はソリューションを構築するために必要なすべてのコンポーネントを作成します。プロビジョニングプロセス中にユーザー名とパスワードが表示されますが、クラスターの管理者アカウントであるため、安全な場所に保存してください。

クラスターの準備ができたら、提供されたリンクからクラスターに移動できます。これにより、Elastic のソリューション管理および視覚化ツールである Kibana に移動します。この新しく作成された Elastic Cloud インスタンスを指すようにサンプルに配置する必要がある設定がいくつかあります。これらの設定は次のとおりです。

• ELASTICSEARCH_PASSWORD: 展開の作成時に表示されるパスワード
• CLOUD_ID: デプロイページで見つかった URL (クラウド ID 領域を探します)
  
   
• AS_BASE_URL & AS_SEARCH_API_KEY:
  Elasticアプリ検索インスタンスのURL、UIでの検索エクスペリエンスのための API キー。以下のように取得する
  

サンプルの実行

リポジトリはこちらです。
このリポジトリは 2 つのモジュールで構成されており、Elastic Cloud を使用した取り込み、管理、検索のエンドツーエンドエクスペリエンスを示すために、Docker Container として実行できます。

モジュールは次のとおりです。
① - [Data Ingestion] (/src/data-loader)
② - [Search Experiences] (/src/streaming-ui)

Data Loader Module

① - [Data Ingestion] (/src/data-loader)
The Internet Movie Database から提供された映画を表すJSONファイルに基づいて、Elastic CloudにドキュメントをインデックスするPythonスクリプトです。TMDBのデータがインデックスされた後、ユーザーインタラクションシミュレーションが実行されます（検索やクリックなど）。

前提条件

• Docker Desktop がインストールされていること
• Elastic Cloud の作成とセットアップ (../../README.md#setup-elastic-cloud)が完了していること
• 以下の変数を集めて、envファイルに配置します。

  • ELASTICSEARCH_PASSWORD: デプロイメント作成時に表示されるパスワード

  • AS_BASE_URL: Elastic App Search インスタンスの URL。以下のように取得します。
    

  • CLOUD_ID: Deployments ページにある URL (クラウド ID の部分を探してください)

##データファイル
データを更新することで、シミュレーションを行うことができるファイルがいくつかあります。また、そのまま使用しても良い結果が得られます。

• tmdb-data/cast_popular: 人気映画を表示する TMDB の JSON ファイル
• tmdb-data/movies_2000-2021_w_details.json: 8k 以上の映画の詳細情報を含む JSON ファイル
• analytics-data/query_no_results.txt: 結果を返さないクエリを含むファイル
• analytics-data/terms.txt: ランダムな検索キーワードを含む生成されたファイルです。

スクリプト

コンテナ作成時に実行されるスクリプトは2つあります。1つはサンプル項データを生成するもので、もう1つはElastic Cloudに対してシミュレーションを実行するものです。

• generate-analytics-input.py: TMDBの動画ファイルを読み込み、検索語のリストをランダムに作成する
• generate-analytics.py: 全てのデータファイルを集計し、様々な検索を行う

dockerイメージのビルド

../src/data-loader/にいることを確認して、下記のコマンドを使用します。

docker build . -t data-loader:latest
docker run --env-file env data-loader:latest

完了すると、以下に示すように、Elastic App Search にデータが入力された新しいエンジンが作成されます。

このエンジンに移動して、映画データのスキーマ、追加された関連性調整の一部、およびシミュレートされたデータを確認できます。

同義語

Elastiflix Website

② - [Search Experiences] (/src/streaming-ui)
Elastiflix Web サイトは、前のセクションで作成した Elastic Cloud デプロイメントからムービーをクエリするように事前構成された React アプリです。検索エクスペリエンスは、検索用のビジュアル インターフェイスの作成を加速する無料のオープンソースパッケージであるSearch UIによって強化されています。React と Typescript で記述され、Elastic によって管理されています。

前に取得した検索 API キーがサンプルに追加されていることを確認してください。これが完了すると、Web サイトを構築して実行できます。これを行うには、サンプルの src/streaming-ui/ フォルダーにいることを確認し、コマンドライン インターフェイスで次のコマンドを実行します。

前提条件

• Intel Mac または Windows 10/11 環境であること
  　React のライブラリがプラットフォーム依存のようなので、M1 Mac の場合はご注意ください。
• データインポートのステップが完了している
• Docker Desktop がインストールされている
• Elastic Cloud の作成とセットアップが完了している
• 以下の変数を集めて、.env ファイルに配置します。
  • AS_BASE_URL: Elastic App Search インスタンスの URL。以下のように取得する。
  • AS_SEARCH_API_KEY: 検索専用の API キー。以下のように取得します。
  • ENGINE_NAME: そのまま

docker イメージのビルド

../src/streaming-ui/ にいることを確認して、下記のコマンドを使用します。

docker build . -t elastiflix-ui:latest
docker run -d --env-file scripts/.env -p 5000:80 elastiflix-ui

“The engine "node" is incompatible with this module.”のようなエラーが出た場合は、最新版の docker pull node:12 を引くか、キャッシュを無効にする追加フラグを付けて、次のように docker build コマンドを実行してみてください：

docker build . --no-cache -t elastiflix-ui:latest

アプリの実行

ブラウザを https://localhost:5000/ で開くと、アプリのUIが表示されます!

次のステップ

これらの2つのプロジェクトは、Elastic で一流の検索エクスペリエンスを構築するのを加速するのに役立つ事前構築済みツールを提供し、優れた検索ソリューションを構築するための始まりにすぎません。これに関する詳細については、Elatic Web サイトの Elastic Enterprise Search セクションを参照してください。
ぜひ Azure、AWS、GCP 等に全体をデプロイして使ってみてください。

実行イメージはこんな感じです。

Elastic Technical Product Marketing Manager/Evangelist
鈴木章太郎