共用方式為

3 - 部署已啟用搜尋的網站

  • 發行項

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

靜態 Web 應用程式會使用範例存放庫的分支，從 GitHub 提取要部署的資訊和檔案。

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

  1. 在 Visual Studio Code 中，確定您位於存放庫根目錄，而不是大量插入資料夾 （例如 ， azure-search-javascript-samples）。

  2. 從活動列選取 [Azure ]，然後從提要列開啟 [資源 ]。

  3. 以滑鼠右鍵按兩下 [靜態 Web 應用程式]，然後選取 [建立靜態 Web 應用程式] [進階]。 如果您沒有看到此選項，請確認您有適用於Visual Studio Code 的 Azure Functions 擴充功能。

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

  4. 如果您在 Visual Studio Code 中看到彈出視窗，詢問您要從哪個分支部署，請選取預設分支，通常是 main。

    此設定表示您認可至該分支的變更只會部署到靜態 Web 應用程式。

  5. 如果您看到彈出視窗要求您認可變更，請勿這麼做。 大容量導入步驟中的秘密不應該認可至存放庫。

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

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

    提示 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 應用程式部署的狀態：

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

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

    • 選取 Visual Code 中的 Azure：活動記錄 。 您應該會看到類似下列螢幕快照的訊息。

      Visual Studio Code 中活動記錄的螢幕快照。

  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

    Visual Studio Code 中 GitHub 命令的螢幕快照。

    等到工作流程執行完成，再繼續進行。 這可能需要一兩分鐘才能完成。

在 Visual Studio Code 中取得 Azure AI 搜尋查詢密鑰

  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 入口網站 中新增環境變數

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

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

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

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

  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 應用程式以查看應用程式設定和函式。

    Visual Studio Code 的螢幕快照，其中顯示具有新應用程式設定的 Azure Static Web Apps 總管。

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

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

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

  2. 在側邊列中，以滑鼠右鍵按兩下區域中的 Azure 訂Static Web Apps用帳戶，並尋找您在本教學課程中建立的靜態 Web 應用程式。

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

    Visual Studio Code 的螢幕快照，其中顯示顯示 [瀏覽網站] 選項的 Azure Static Web Apps 總管。

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

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

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

疑難排解

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

  • 部署成功嗎？

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

  • 用戶端 （前端） 應用程式是否可運作？

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

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

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

    如果 YML 檔案中的 Azure 函式程式代碼路徑 （api_location） 不正確，應用程式會載入，但不會呼叫任何提供與 Azure AI 搜尋整合的函式。 重新流覽部署區段中的因應措施，以取得修正路徑的說明。

清除資源

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

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

  2. 在側邊列中，以滑鼠右鍵按兩下區域中的 Resource Groups Azure 訂用帳戶，並尋找您為此教學課程建立的資源群組。

  3. 以滑鼠右鍵按兩下資源組名，然後選取 [ 刪除]。 這會同時刪除搜尋和靜態 Web Apps 資源。

  4. 如果您不再需要範例的 GitHub 分支，請記得在 GitHub 上刪除該分支。 移至分支 設定 然後刪除分叉。

下一步

探索 JavaScript 搜尋程式代碼