共用方式為

步驟 3 - 部署已啟用搜尋的 .NET 網站

  • 發行項

將已啟用搜尋的網站部署為 Azure Static Web Apps 網站。 此部署包含網頁的 React 應用程式，以及用於搜尋作業的函式應用程式。

靜態 Web 應用程式會使用 azure-search-static-web-app 存放庫的分支，從 GitHub 提取用於部署的資訊和檔案。

在 Visual Studio Code 中建立靜態 Web 應用程式

  1. 在 Visual Studio Code 中，確定您位於存放庫根目錄，而不是大量插入資料夾 (例如，azure-search-static-web-app)。

  2. 從活動列選取 [Azure]，然後從側邊欄開啟 [資源]。

  3. 以滑鼠右鍵按一下 [Static Web Apps]，然後選取 [建立靜態 Web 應用程式 (進階)]。 如果沒看到此選項，請確認您具有適用於 Visual Studio Code 的 Azure Functions 延伸模組。

    Visual Studio Code 的螢幕擷取畫面，其中的 Azure Static Web Apps 總管顯示用來建立進階靜態 Web 應用程式的選項。

  4. 如果看到快顯視窗要求您提交變更，請勿執行此動作。 大量匯入步驟中的秘密不應提交至存放庫。

    若要復原變更，請在 Visual Studio Code 中選取活動列中的 [原始檔控制] 圖示，然後在 [變更] 清單中選取每個變更的檔案，並選取 [捨棄變更] 圖示。

  5. 請遵循提示建立靜態 Web 應用程式：

    提示 Enter
    選取新資源的資源群組。 為靜態應用程式建立新的資源群組。
    輸入新靜態 Web 應用程式的名稱。 為您的靜態應用程式命名，例如 my-demo-static-web-app。
    選取 SKU 選取本教學課程的免費 SKU。
    選取新資源的位置。 選擇您附近的區域。
    選擇 [建置預設] 來設定預設專案結構。 選取自訂。
    選取用戶端應用程式的程式碼位置 client

    這是從存放庫根目錄到靜態 Web 應用程式的路徑。
    輸入建置輸出的路徑... build

    這是從靜態 Web 應用程式到所產生檔案的路徑。

    如果您收到有關區域不正確的錯誤，請確定資源群組和靜態 Web 應用程式資源位於錯誤回應中列出的支援區域之一。

  6. 建立靜態 Web 應用程式時，也會在本機和分支中的 GitHub 上建立 GitHub 工作流程 YML 檔案。 此工作流程會在分支中執行，建置和部署靜態 Web 應用程式和函式。

    使用下列任一方法，檢查靜態 Web 應用程式部署的狀態：

    • 從 [通知] 中選取 [Open Actions in GitHub] \(在 GitHub 中開啟動作\)。 這會開啟指向分支存放庫的瀏覽器視窗。

    • 在分支存放庫中，選取 [動作] 索引標籤。 您應該會看到分支上所有工作流程的清單。

    • 在 Visual Code 中選取 [Azure：活動記錄]。 您應該會看到類似下列螢幕擷取畫面的訊息。

      Visual Studio Code 中活動記錄的螢幕擷取畫面。

在 Visual Studio Code 中取得 Azure AI 搜尋服務查詢金鑰

雖然您可能想要針對未遵循最低權限原則的查詢目的重複使用您的搜尋系統管理金鑰。 Azure 函式應該使用查詢金鑰以遵守最低權限。

  1. 在 Visual Studio Code 中，開啟新終端機視窗。

  2. 使用下列 Azure CLI 命令，取得查詢 API 金鑰：

    az search query-key list --resource-group YOUR-SEARCH-SERVICE-RESOURCE-GROUP --service-name YOUR-SEARCH-SERVICE-NAME

  3. 保留此查詢金鑰以在下一節中使用。 查詢金鑰會授權搜尋索引的讀取權限。

在 Azure 入口網站中新增環境變數

在搜尋秘密位於設定之前，Azure 函數應用程式不會傳回搜尋資料。

  1. 從活動列中選取 [Azure]。

  2. 以滑鼠右鍵按一下 Static Web Apps 資源，然後選取 [在入口網站中開啟]。

    顯示 Azure Static Web Apps 總管的 Visual Studio Code 的螢幕擷取畫面，其中顯示 [在入口網站中開啟] 選項。

  3. 選取 [環境變數]，然後選取 [+ 新增應用程式設定]。

    Azure 入口網站中靜態 Web 應用程式的環境變數頁面的螢幕擷取畫面。

  4. 新增下列每項設定：

    設定 您的搜尋資源值
    SearchApiKey 您的搜尋查詢金鑰
    SearchServiceName 您的搜尋資源名稱
    SearchIndexName good-books
    SearchFacets authors*,language_code

    Azure AI 搜尋服務需要使用與篩選字串不同的語法來篩選集合。 在欄位名稱後面新增 *，表示該欄位類型為 Collection(Edm.String)。 這可讓 Azure 函式正確地將篩選新增至查詢。

  5. 檢查您的設定，以確定它們看起來類似下列螢幕擷取畫面。

    瀏覽器的螢幕擷取畫面，顯示 Azure 入口網站中用來儲存您的應用程式設定的按鈕。

  6. 返回 Visual Studio Code。

  7. 重新整理靜態 Web 應用程式，以查看應用程式設定和函式。

    顯示 Azure Static Web Apps 總管的 Visual Studio Code 的螢幕擷取畫面，其中有新應用程式設定。

如果您沒有看到應用程式設定，請重新瀏覽更新和重新啟動 GitHub 工作流程的步驟。

在靜態 Web 應用程式中使用搜尋

  1. 在 Visual Studio Code 中，開啟活動列並選取 [Azure] 圖示。

  2. 在側邊欄中，以滑鼠右鍵按一下 Static Web Apps 區域下的 Azure 訂用帳戶，然後找到為本教學課程建立的靜態 Web 應用程式。

  3. 以滑鼠右鍵按一下靜態 Web 應用程式名稱，然後選取 [瀏覽網站]。

    顯示 Azure Static Web Apps 總管的 Visual Studio Code 的螢幕擷取畫面，其中顯示 [瀏覽網站]**** 選項。

  4. 在快顯對話方塊中選取 [開啟]。

  5. 在網站搜尋列中，輸入搜尋查詢 (例如 code)，建議功能就會建議書名。 選取建議或繼續輸入您自己的查詢。 完成搜尋查詢後，請按 Enter 鍵。

  6. 檢閱結果，然後選取其中一本書以查看更多詳細資訊。

疑難排解

如果 Web 應用程式未部署或無法運作，請使用下列清單來判斷並修正問題：

  • 部署是否成功了？

    若要判斷部署是否成功，您必須前往範例存放庫的分支，並檢閱 GitHub 動作是否成功或失敗。 應該只有一個動作，並且應該具有 app_location、api_location 和 output_location 的靜態 Web 應用程式設定。 如未成功部署動作，請深入探討動作記錄，並尋找上次失敗的情況。

  • 用戶端 (前端) 應用程式是否可運作？

    您應該能夠進入 Web 應用程式，且該應用程式應能成功顯示。 如果部署成功但網站未顯示，這可能是靜態 Web 應用程式在 Azure 上重建應用程式時的設定方式有問題。

  • API (無伺服器後端) 應用程式是否可運作？

    您應該能夠與用戶端應用程式互動，搜尋書籍和進行篩選。 如果表單未傳回任何值，請開啟瀏覽器的開發人員工具，並確定對 API 的 HTTP 呼叫是否成功。 如果呼叫未成功，最可能的原因是 API 端點名稱和搜尋查詢金鑰的靜態 Web 應用程式設定不正確。

    如果 YML 檔案中的 Azure 函式程式碼 (api_location) 路徑不正確，應用程式會載入但不會呼叫任何提供與 Azure AI 搜尋服務整合的函式。 重新瀏覽部署區段，以確定路徑正確無誤。

清除資源

若要清除在本教學課程中建立的資源，請刪除資源群組或個別資源。

  1. 在 Visual Studio Code 中，開啟活動列並選取 [Azure] 圖示。

  2. 在提要欄位中，於 Static Web Apps 區域下以滑鼠右鍵按一下 Azure 訂用帳戶，然後找到為此教學課程建立的應用程式。

  3. 以滑鼠右鍵按一下應用程式名稱，然後選取 [刪除]。

  4. 如果您不再需要範例的 GitHub 分支，請記得在 GitHub 上刪除該分支。 前往分支的 [設定]，然後刪除存放庫。

  5. 若要刪除 Azure AI 搜尋服務，請尋找您的搜尋服務，並選取頁面頂端的 [刪除]。

下一步