3 - 検索が有効な .NET Web サイトをデプロイする
検索が有効な Web サイトを Azure Static Web Apps としてデプロイします。 このデプロイには、React アプリと関数アプリの両方が含まれています。
静的 Web アプリでは、サンプル リポジトリのフォークを使用して、GitHub からデプロイのための情報とファイルをプルします。
Visual Studio Code で静的 Web アプリを作成する
Visual Studio Code で、リポジトリのルートにあるフォルダー (たとえば、
azure-search-javascript-samples
) を開きます。アクティビティ バーで [Azure] を選択してから、サイド バーで [リソース] を開きます。
[Static Web Apps] を右クリックし、[Create Static Web App (Advanced)] (静的 Web アプリの作成 (詳細)) を選択します。 このオプションが表示されない場合は、Visual Studio Code の Azure Functions 拡張機能があることを確認してください。
どのブランチからデプロイするかを確認するポップアップ ウィンドウが Visual Studio Code で表示された場合は、既定のブランチ (通常は main) を選択します。
この設定により、そのブランチにコミットした変更だけが静的 Web アプリにデプロイされます。
ポップアップ ウィンドウが表示されて変更をコミットするよう求められた場合は、これをしないでください。 一括インポート手順で作成されたシークレットは、リポジトリにコミットしないでください。
変更をロールバックするには、Visual Studio Code のアクティビティ バーで [ソース管理] アイコンを選択してから、変更した各ファイルを [変更] の一覧で選択して、[変更の破棄] アイコンを選択します。
プロンプトに従って、次のように静的 Web アプリを作成します。
Prompt Enter 新しいリソース用のリソース グループの選択。 このチュートリアル用に作成したリソース グループを使用します。 新しい静的 Web アプリの名前の入力。 自分のリソースに一意の名前を作成します。 たとえば my-demo-static-web-app
のように、リポジトリ名の先頭に自分の名前を追加できます。SKU の選択 このチュートリアル用に無料の SKU を選択します。 新しいリソースの場所の選択。 Node.js の場合: Azure 関数プログラミング モデル (PM) v4 のプレビュー中は West US 2
を選択します。 C# と Python の場合は、近くのリージョンを選択します。既定のプロジェクト構造を構成するためのビルド プリセットの選択。 カスタムを選択します。 クライアント アプリケーション コードの場所の選択 search-website-functions-v4/client
これは、リポジトリのルートから静的 Web アプリまでのパスです。Azure Functions コードの場所の選択 search-website-functions-v4/api
これは、リポジトリのルートから静的 Web アプリまでのパスです。 リポジトリに他の関数がない場合は、関数コードの場所の入力は求められません。 現時点では、関数コードの場所が正しいことを確認するために、さらに手順が必要になります。 これらの手順は、この記事に記載されており、リソースの作成後に実行します。ビルド出力のパスの入力 build
これは、静的 Web アプリから、生成されたファイルまでのパスです。リージョンの誤りに関するエラーが発生した場合は、エラー応答に示されているサポート対象リージョンのいずれかにそのリソース グループと静的 Web アプリ リソースが存在することを確認してください。
静的 Web アプリが作成されると、GitHub ワークフローの YML ファイルも、ローカルと GitHub 上のフォーク内に作成されます。 このワークフローはフォーク内で実行されます。これにより、静的 Web アプリと関数がビルドされデプロイされます。
次のいずれかの方法を使用して、静的 Web アプリのデプロイの状態を確認します。
通知から [Open Actions in GitHub] (GitHub でアクションを開く) を選択します。 これにより、自分がフォークしたリポジトリを参照するブラウザー ウィンドウが開きます。
フォークされたリポジトリで [アクション] タブを選択します。 フォーク上のすべてのワークフローの一覧が表示されます。
Visual Code で [Azure: アクティビティ ログ] を選択します。 以下のスクリーンショットのようなメッセージが表示されます。
現時点では、YML ファイルは、Azure 関数コードのパス構文が間違った状態で作成されます。 その構文を修正するには、この回避策を使用してください。 この手順は、YML ファイルの作成後すぐに実行できます。 更新プログラムをプッシュするとすぐに、新しいワークフローが起動されます。
Visual Studio Code エクスプローラーで
./.github/workflows/
ディレクトリを開きます。YML ファイルを開きます。
api-location
パスまでスクロールします (31 行目かその近く)。スラッシュを使用するようにパス構文を変更します (
api_location
のみ編集が必要です。他の場所はコンテキストのためにここにあります)。app_location: "search-website-functions-v4/client" # App source code path api_location: "search-website-functions-v4/api" # Api source code path - optional output_location: "build" # Built app content directory - optional
ファイルを保存します。
統合ターミナルを開き、次の GitHub コマンドを発行して、更新した YML をフォークに送信します。
git add -A git commit -m "fix path" git push origin main
ワークフロー実行が完了するまで待ってから続行してください。 これが完了するまでには 1 から 2 分ほどかかることがあります。
Visual Studio Code で Azure AI Search クエリ キーを取得する
Visual Studio Code で、新しいターミナル ウィンドウを開きます。
次の Azure CLI コマンドを使用して、クエリ API キーを取得します。
az search query-key list --resource-group cognitive-search-demo-rg --service-name my-cog-search-demo-svc
このクエリ キーは、次のセクションで使用するために保存してください。 このクエリ キーでは、検索インデックスへの読み取りアクセスが認可されます。
Azure portal で構成設定を追加する
Azure 関数アプリは、Search シークレットが設定されるまで検索データを返しません。
アクティビティ バーで [Azure] を選択します。
Static Web Apps リソースを右クリックし、[ポータルで開く] を選択します。
[構成] 、 [+ 追加] の順に選択します。
次の各設定を追加します。
設定 Search リソースの値 SearchApiKey 実際の Search クエリ キー SearchServiceName 実際の Search リソース名 SearchIndexName good-books
SearchFacets authors*,language_code
Azure AI Search では、コレクションのフィルター処理に、文字列の場合とは異なる構文が必要です。 フィールドが
Collection(Edm.String)
型であることを示すために、フィールド名の後に*
を追加します。 これにより、Azure 関数はクエリにフィルターを正しく追加できます。[保存] を選択して設定を保存します。
Visual Studio Code に戻ります。
静的 Web アプリを最新の情報に更新して、アプリケーションの設定と機能を確認します。
静的 Web アプリで検索を使用する
Visual Studio Code でアクティビティ バーを開き、Azure アイコンを選択します。
サイド バーで、
Static Web Apps
領域の下にある自分の Azure サブスクリプションを右クリックし、このチュートリアル用に作成した静的 Web アプリを見つけます。静的 Web アプリの名前を右クリックし、[Browse Site] (サイトの参照) を選択します。
ポップアップ ダイアログで [開く] を選択します。
Web サイトの検索バーに、
code
のような検索クエリを入力し、提案機能によって書籍のタイトルが提案されるようにします。 提案されたものを選択するか、引き続き自分のクエリを入力します。 検索クエリを入力し終えたら、Enter キーを押します。結果を確認してから、いずれかの書籍を選択して詳細を表示します。
トラブルシューティング
Web アプリがデプロイされない、または機能しなかった場合は、次のリストを使用して問題を特定して修正します。
デプロイは成功しましたか?
デプロイが成功したかどうかを判断するには、サンプル リポジトリの "自分の" フォークに移動し、GitHub アクションの成功または失敗を確認する必要があります。 アクションが 1 つだけあり、それには
app_location
、api_location
、output_location
の静的 Web アプリ設定があります。 アクションが正常にデプロイされなかった場合は、アクション ログを確認し、最後のエラーを探します。クライアント (フロントエンド) アプリケーションは機能しますか?
Web アプリにアクセスでき、正常に表示されるはずです。 デプロイが成功したが、Web サイトが表示されない場合、これは、静的 Web アプリを Azure 上に配置した後にアプリをリビルドする方法の構成に問題がある可能性があります。
API (サーバーレス バックエンド) アプリケーションは機能しますか?
クライアント アプリを操作し、書籍を検索したり、フィルター処理したりできるはずです。 フォームで値が返されない場合は、ブラウザーの開発者ツールを開き、API への HTTP 呼び出しが成功しているかどうかを確認します。 呼び出しが成功していない場合、最も可能性が高い原因は、API エンドポイント名と検索クエリ キーの静的 Web アプリ構成が正しくないことです。
YML ファイル内で Azure 関数コードへのパス (
api_location
) が正しくない場合、アプリケーションでは、Azure AI Search との統合を提供する関数は、読み込まれますが呼び出されません。 「デプロイ」セクションにある回避策をもう一度確認しておくと、このパスを修正する際に役立ちます。
リソースをクリーンアップする
このチュートリアルで作成したリソースをクリーンアップするには、リソース グループを削除します。
Visual Studio Code でアクティビティ バーを開き、Azure アイコンを選択します。
サイド バーで、
Resource Groups
領域の下にある自分の Azure サブスクリプションを右クリックし、このチュートリアル用に作成したリソース グループを見つけます。リソース グループの名前を右クリックしてから、 [削除] を選択します。 これにより、Search リソースと Static Web Apps リソースの両方が削除されます。
サンプルの GitHub フォークがもう必要ない場合は、忘れずに GitHub 上でそれを削除してください。 自分のフォークの [設定] に異動して、フォークを削除します。