步驟 1 - 使用 .NET 將搜尋新增至靜態 Web 應用程式的概觀

本教學課程會建置網站，以搜尋書籍目錄，然後將網站部署至 Azure 靜態 Web 應用程式。

此範例的用途為何？

此範例網站提供 10,000 本書籍目錄的存取權。 您可以在搜尋列中輸入文字來搜尋目錄。 當您輸入文字時，網站會使用搜尋索引的建議功能來自動完成文字。 查詢完成後，網站會顯示書籍清單以及部分詳細資訊。 您可以選取書籍，以查看儲存在搜尋索引中該書籍的所有詳細資訊。

搜尋體驗包括：

• 搜尋 - 為應用程式提供搜尋功能。
• 建議 - 在使用者於搜尋列中輸入時提供建議。
• Facet 與篩選 - 提供依作者或語言篩選的多面向導覽結構。
• 編頁結果 - 提供用於捲動結果的分頁控制項。
• 文件查閱 - 依識別碼查閱文件，以擷取詳細資料頁面的所有內容。

範例的組織方式為何？

範例程式碼包含下列元件：

設定開發環境

為您的本機開發環境建立服務並安裝下列軟體。

• Azure AI 搜尋服務，任何區域或階層
• .NET 9 或最新版本
• Git
• Visual Studio 程式碼
• 適用於 Visual Studio Code 的 C# 開發工具延伸模組
• 適用於 Visual Studio Code 的 Azure Static Web Apps 延伸模組

本教學課程不會在本機執行 Azure 函式 API。 如果您想要在本機執行它，請安裝 azure-functions-core-tools。

使用 git 分支和複製搜尋範例

若要部署靜態 Web 應用程式，您必須派生範例存放庫。 Web 應用程式會使用您的 GitHub 分支位置來決定建置動作和部署內容。 靜態 Web 應用程式中的程式碼執行會從遠端進行，Azure 靜態 Web Apps 會從分支範例讀取程式碼。

1. 在 GitHub 上，派生 azure-search-static-web-app 存放庫。

   使用您的 GitHub 帳戶，在網頁瀏覽器中完成分支程序。 本教學課程會使用分支作為 Azure 靜態 Web 應用程式部署的一部分。

2. 在 Bash 終端中，將分支應用程式範例下載到本機電腦。

   使用您的 GitHub 別名取代 YOUR-GITHUB-ALIAS。

   git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-static-web-app.git
   

3. 在同一個 Bash 終端中，進入此網站搜尋範例的分支存放庫：

   cd azure-search-static-web-app
   

4. 使用 Visual Studio Code 命令 code .，開啟分支存放庫。 除非指定，否則您會從 Visual Studio Code 完成其餘工作。

   code .
   

後續步驟

• 建立索引並使用文件載入它
• 部署您的靜態 Web 應用程式