1 - Web サイトへの検索の追加の概要
この Azure AI Search チュートリアルでは、書籍のカタログを検索する Web アプリを作成し、Web サイトを Azure Static Web Apps リソースにデプロイします。
このチュートリアルは、ファセット ナビゲーション、型指定、改ページなどの検索操作を含むフロントエンド クライアント アプリを作成する JavaScript 開発者向けです。 また、バックエンドでのインデックス作成とクエリ ワークフローの Azure AI Search の呼び出しに関する Azure SDK for JavaScript の @azure/search-documents
ライブラリについても説明します。
サンプルの動作
このサンプル Web サイトでは、10,000 冊の書籍のカタログにアクセスできます。 ユーザーは、検索バーにテキストを入力してカタログを検索できます。 ユーザーがテキストを入力しているとき、Web サイトによって検索インデックスの提案機能が使用され、テキストが補完されます。 クエリが完了すると、書籍の一覧が詳細の一部と共に表示されます。 ユーザーは、書籍を選択して、書籍の検索インデックスに格納されているすべての詳細を表示できます。
検索エクスペリエンスには次が含まれます。
- 検索 - アプリケーション用の検索機能を提供します。
- 提案 - ユーザーが検索バーに入力している間、提案を示します。
- ファセットとフィルター - 作成者または言語ごとにフィルター処理できるファセット ナビゲーション構造を備えています。
- ページ分割された結果 - 結果をスクロールできるページング コントロールが用意されています。
- ドキュメント検索 - ID でドキュメントを検索し、詳細ページ用としてコンテンツをすべて取得します。
サンプルの構成
サンプル コードに含まれるコンポーネントを次に示します。
アプリ | 目的 | GitHub リポジトリ 場所 |
---|---|---|
Client | 検索で書籍を表示するための React アプリ (プレゼンテーション層)。 Azure 関数アプリを呼び出します。 | /search-website-functions-v4/client |
サーバー | Azure 関数アプリ (ビジネス層)。JavaScript SDK を使用して Azure AI Search API を呼び出します。 | /search-website-functions-v4/api |
一括挿入 | インデックスを作成し、それにドキュメントを追加するための JavaScript ファイル。 | /search-website-functions-v4/bulk-insert |
開発環境を設定する
ローカル開発環境に次のソフトウェアをインストールします。
-
- サポートされている言語バージョンのリストから、最新のランタイムとバージョンを選択します。
- 自分のローカル コンピューターに別のバージョンの Node.js がインストールされている場合は、Node Version Manager (
nvm
) または Docker コンテナーの使用を検討してください。
Visual Studio Code と次の拡張機能
- Azure Static Web Apps
- コマンド ライン操作には、統合ターミナルを使用します。
省略可能:
- このチュートリアルでは、Azure Function API をローカルで実行しません。 ローカルで実行する場合は、次の bash コマンドを使用して azure-functions-core-tools をグローバルにインストールする必要があります。
npm install -g azure-functions-core-tools@4
Git を使用して検索サンプルをフォークし、クローンする
サンプル リポジトリのフォークは、静的 Web アプリをデプロイできるようにするために重要です。 静的 Web アプリでは、独自の GitHub フォークの場所に基づいて、ビルド アクションとデプロイ コンテンツを決定します。 静的 Web アプリでのコードの実行はリモートであり、フォークされたサンプルのコードから、静的 Web アプリによって読み取りが行われます。
GitHub で、サンプル リポジトリをフォークします。
自分の GitHub アカウントを使用して、Web ブラウザーでフォークのプロセスを完了します。 このチュートリアルでは、Azure 静的 Web アプリへのデプロイの一部としてお客様のフォークを使用します。
Bash ターミナルで、フォークされたサンプル アプリケーションをローカル コンピューターにダウンロードします。
YOUR-GITHUB-ALIAS
を自分の GitHub の別名に置き換えます。git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samples
同じ Bash ターミナルで、この Web サイト検索例用のフォークされたリポジトリに移動します:
cd azure-search-javascript-samples
Visual Studio Code コマンド
code .
を使用して、フォークされたリポジトリを開きます。 残りのタスクは、指定されていない限り、Visual Studio Code から実行されます。code .
Azure リソース用のリソース グループを作成する
Visual Studio Code でアクティビティ バーを開き、Azure アイコンを選択します。
まだサインインしていない場合は Azure にサインインします。
[リソース] セクションで [追加] (+) を選択し、次に [リソース グループの作成] を選択します。
リソース グループ名 (
cognitive-search-demo-rg
など) を入力します。リージョンを入力します:
- Node.js の場合は、
West US 2
を選択します。 これは、Azure 関数プログラミング モデル (PM) v4 プレビューに推奨されるリージョンです。 - C# と Python の場合、この書き込みの時点で Azure Static Web Apps でサポートされている次のリージョンをお勧めします:
West US 2
、East US 2
、West Europe
、Central US
、East Asia
- Node.js の場合は、
このチュートリアルで作成したすべてのリソースには、このリソース グループを使用します。 リソース グループを使用すると、完了時の削除を含め、リソースを管理するための論理ユニットが提供されます。
次のステップ
フィードバック
https://aka.ms/ContentUserFeedback」を参照してください。
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「フィードバックの送信と表示