1 - .NET による Web サイトへの検索の追加の概要

このチュートリアルでは、書籍のカタログを検索する Web サイトを構築し、その Web サイトを Azure 静的 Web アプリにデプロイします。

アプリケーションは利用可能です。

• サンプル
• デモ Web サイト - aka.ms/azs-good-books

サンプルの動作

このサンプル Web サイトでは、10,000 冊の書籍のカタログにアクセスできます。 ユーザーは、検索バーにテキストを入力してカタログを検索できます。 ユーザーがテキストを入力しているとき、Web サイトによって検索インデックスの提案機能が使用され、テキストが補完されます。 クエリが完了すると、書籍の一覧が詳細の一部と共に表示されます。 ユーザーは、書籍を選択して、書籍の検索インデックスに格納されているすべての詳細を表示できます。

検索エクスペリエンスには次が含まれます。

• 検索 - アプリケーション用の検索機能を提供します。
• 提案 - ユーザーが検索バーに入力している間、提案を示します。
• ドキュメント検索 - ID でドキュメントを検索し、詳細ページ用としてコンテンツをすべて取得します。

サンプルの構成

サンプルには、次が含まれています。

アプリ	目的	GitHub リポジトリ 場所
Client	検索で書籍を表示するための React アプリ (プレゼンテーション層)。 Azure 関数アプリを呼び出します。	/search-website-functions-v4/client
サーバー	Azure .NET 関数アプリ (ビジネス層)。.NET SDK を使用して Azure Cognitive Search API を呼び出します	/search-website-functions-v4/api
一括挿入	インデックスを作成し、それにドキュメントを追加するための .NET ファイル。	/search-website-functions-v4/bulk-insert

開発環境を設定する

ローカル開発環境に次をインストールします。

• .NET 6
• Git
• Visual Studio Code と次の拡張機能
  • Azure Static Web Apps
• 省略可能:
  • このチュートリアルでは Azure 関数 API をローカルで実行しませんが、ローカルで実行する場合は、azure-functions-core-tools をインストールする必要があります。

Git を使用して検索サンプルをフォークし、クローンする

サンプル リポジトリのフォークは、静的 Web アプリをデプロイできるようにするために重要です。 Web アプリでは、独自の GitHub フォークの場所に基づいて、ビルド アクションとデプロイ コンテンツを決定します。 静的 Web アプリでのコードの実行はリモートであり、フォークされたサンプルのコードから、Azure Static Web Apps によって読み取りが行われます。

1. GitHub で、サンプル リポジトリをフォークします。

   自分の GitHub アカウントを使用して、Web ブラウザーでフォークのプロセスを完了します。 このチュートリアルでは、Azure 静的 Web アプリへのデプロイの一部としてお客様のフォークを使用します。

2. Bash ターミナルで、フォークされたサンプル アプリケーションをローカル コンピューターにダウンロードします。

   YOUR-GITHUB-ALIAS を自分の GitHub の別名に置き換えます。

   git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-dotnet-samples
   

3. 同じ Bash ターミナルで、この Web サイト検索例用のフォークされたリポジトリに移動します。

   cd azure-search-dotnet-samples
   

4. Visual Studio Code コマンド code . を使用して、フォークされたリポジトリを開きます。 残りのタスクは、指定されていない限り、Visual Studio Code から実行されます。

   code .
   

Azure リソース用のリソース グループを作成する

1. Visual Studio Code でアクティビティ バーを開き、Azure アイコンを選択します。

2. [リソース] セクションで [追加] (+) を選択し、次に [リソース グループの作成] を選択します。

   

3. リソース グループ名 (cognitive-search-website-tutorial など) を入力します。

4. 近くの場所を選択します。

5. このチュートリアルの後半で Cognitive Search と Static Web Apps のリソースを作成するときに、このリソース グループを使用します。

   リソース グループを作成すると、使用完了時の削除を含め、リソースを管理するための論理ユニットが提供されます。

次のステップ

• 検索インデックスを作成してドキュメントと共に読み込む
• 静的 Web アプリをデプロイする