3 - 検索が有効な Python Web サイトをデプロイする

検索が有効な Web サイトを Azure Static Web Apps としてデプロイします。 このデプロイには、Web ページ用の React アプリと、検索操作用の関数アプリの両方が含まれます。

静的 Web アプリでは、サンプル リポジトリのフォークを使用して、GitHub からデプロイのための情報とファイルをプルします。

Visual Studio Code で静的 Web アプリを作成する

1. Visual Studio Code では、一括挿入フォルダーではなく、リポジトリのルートにいることを確認します (たとえば、azure-search-javascript-samples)。

2. アクティビティ バーで [Azure] を選択してから、サイド バーで [リソース] を開きます。

3. [Static Web Apps] を右クリックし、[Create Static Web App (Advanced)] (静的 Web アプリの作成 (詳細)) を選択します。 このオプションが表示されない場合は、Visual Studio Code の Azure Functions 拡張機能があることを確認してください。

   

4. どのブランチからデプロイするかを確認するポップアップ ウィンドウが Visual Studio Code で表示された場合は、既定のブランチ (通常は main) を選択します。

   この設定により、そのブランチにコミットした変更だけが静的 Web アプリにデプロイされます。

5. ポップアップ ウィンドウが表示されて変更をコミットするよう求められた場合は、これをしないでください。 一括インポート手順で作成されたシークレットは、リポジトリにコミットしないでください。

   変更をロールバックするには、Visual Studio Code のアクティビティ バーで [ソース管理] アイコンを選択してから、変更した各ファイルを [変更] の一覧で選択して、[変更の破棄] アイコンを選択します。

6. プロンプトに従って、次のように静的 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 アプリ リソースが存在することを確認してください。

7. 静的 Web アプリが作成されると、GitHub ワークフローの YML ファイルも、ローカルと GitHub 上のフォーク内に作成されます。 このワークフローはフォーク内で実行されます。これにより、静的 Web アプリと関数がビルドされデプロイされます。

   次のいずれかの方法を使用して、静的 Web アプリのデプロイの状態を確認します。

   • 通知から [Open Actions in GitHub] (GitHub でアクションを開く) を選択します。 これにより、自分がフォークしたリポジトリを参照するブラウザー ウィンドウが開きます。

   • フォークされたリポジトリで [アクション] タブを選択します。 フォーク上のすべてのワークフローの一覧が表示されます。

   • Visual Code で [Azure: アクティビティ ログ] を選択します。 以下のスクリーンショットのようなメッセージが表示されます。

     

8. "現時点では、YML ファイルは、Azure 関数コードのパス構文が間違った状態で作成されます"。 この回避策を使用して構文を修正し、ワークフローを再実行します。 この手順は、YML ファイルの作成後すぐに実行できます。 更新プログラムをプッシュするとすぐに、新しいワークフローが起動します。

   1. Visual Studio Code エクスプローラーで ./.github/workflows/ ディレクトリを開きます。

   2. YML ファイルを開きます。

   3. api-location パスまでスクロールします (31 行目かその近く)。

   4. スラッシュを使用するようにパス構文を変更します (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
      

   5. ファイルを保存します。

   6. 統合ターミナルを開き、次の GitHub コマンドを発行して、更新した YML をフォークに送信します。

      git add -A
      git commit -m "fix path"
      git push origin main
      

   

   ワークフロー実行が完了するまで待ってから続行してください。 これが完了するまでには 1 から 2 分ほどかかることがあります。

Visual Studio Code で Azure AI Search クエリ キーを取得する

1. Visual Studio Code で、新しいターミナル ウィンドウを開きます。

2. 次の Azure CLI コマンドを使用して、クエリ API キーを取得します。

   az search query-key list --resource-group cognitive-search-demo-rg --service-name my-cog-search-demo-svc
   

3. このクエリ キーは、次のセクションで使用するために保存してください。 このクエリ キーでは、検索インデックスへの読み取りアクセスが認可されます。

Azure portal で環境変数を追加する

Azure 関数アプリは、Search シークレットが設定されるまで検索データを返しません。

1. アクティビティ バーで [Azure] を選択します。

2. Static Web Apps リソースを右クリックし、[ポータルで開く] を選択します。

   

3. [環境変数] を選択し、[+ アプリケーション設定の追加] を選びます。

   

4. 次の各設定を追加します。

   設定	Search リソースの値
   SearchApiKey	実際の Search クエリ キー
   SearchServiceName	実際の Search リソース名
   SearchIndexName	good-books
   SearchFacets	authors*,language_code

   Azure AI Search では、コレクションのフィルター処理に、文字列の場合とは異なる構文が必要です。 フィールドが Collection(Edm.String) 型であることを示すために、フィールド名の後に * を追加します。 これにより、Azure 関数はクエリにフィルターを正しく追加できます。

5. 設定を確かめ、次のスクリーンショットのように表示されていることを確認します。

   

6. Visual Studio Code に戻ります。

7. 静的 Web アプリを最新の情報に更新して、アプリケーションの設定と機能を確認します。

   

アプリケーションの設定が表示されない場合は、GitHub ワークフローの更新と再起動の手順を見直してください。

静的 Web アプリで検索を使用する

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

2. サイド バーで、Static Web Apps 領域の下にある自分の Azure サブスクリプションを右クリックし、このチュートリアル用に作成した静的 Web アプリを見つけます。

3. 静的 Web アプリの名前を右クリックし、[Browse Site] (サイトの参照) を選択します。

   

4. ポップアップ ダイアログで [開く] を選択します。

5. Web サイトの検索バーに、code のような検索クエリを入力し、提案機能によって書籍のタイトルが提案されるようにします。 提案されたものを選択するか、引き続き自分のクエリを入力します。 検索クエリを入力し終えたら、Enter キーを押します。

6. 結果を確認してから、いずれかの書籍を選択して詳細を表示します。

トラブルシューティング

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 との統合を提供する関数は、読み込まれますが呼び出されません。 「デプロイ」セクションにある回避策をもう一度確認しておくと、このパスを修正する際に役立ちます。

リソースをクリーンアップする

このチュートリアルで作成したリソースをクリーンアップするには、リソース グループを削除します。

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

2. サイド バーで、Resource Groups 領域の下にある自分の Azure サブスクリプションを右クリックし、このチュートリアル用に作成したリソース グループを見つけます。

3. リソース グループの名前を右クリックしてから、 [削除] を選択します。 これにより、Search リソースと Static Web Apps リソースの両方が削除されます。

4. サンプルの GitHub フォークがもう必要ない場合は、忘れずに GitHub 上でそれを削除してください。 自分のフォークの [設定] に異動して、フォークを削除します。

次のステップ

• 検索が有効な Web サイトの Search 統合について理解する