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

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

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

サンプルの動作

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

このサンプル Web サイトでは、1 万冊の書籍のカタログにアクセスできます。ユーザーは、検索バーにテキストを入力してカタログを検索できます。ユーザーがテキストを入力すると、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

開発環境を設定する

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

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. [リソース] セクションで [追加] (+) を選択し、次に [リソース グループの作成] を選択します。

    [リソース グループの作成] オプションが表示されている、 Azure エクスプローラーでの Visual Studio Code のスクリーンショット。

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

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

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

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

次のステップ