步驟 1 - 使用 .NET 將搜尋新增至靜態 Web 應用程式的概觀
本教學課程會建置網站來搜尋書籍目錄，然後將網站部署至 Azure Static Web Apps。
此範例的用途為何？
此範例網站提供 10,000 本書籍目錄的存取權。 您可以在搜尋列中輸入文字來搜尋目錄。 當您輸入文字時，網站會使用搜尋索引的建議功能來自動完成文字。 查詢完成後，會顯示書籍清單以及一部分詳細資訊。 您可以選取書籍，以查看儲存在搜尋索引中該書籍的所有詳細資訊。
搜尋體驗包括：
- 搜尋 - 為應用程式提供搜尋功能。
- 建議 - 在使用者於搜尋列中輸入時提供建議。
- Facet 與篩選 - 提供依作者或語言篩選的多面向導覽結構。
- 編頁結果 - 提供用於捲動結果的分頁控制項。
- 文件查閱 - 依識別碼查閱文件，以擷取詳細資料頁面的所有內容。
範例的組織方式為何？
範例程式碼包含下列元件：
| App | 目的 | GitHub 存放庫 Location |
|---|---|---|
| 用戶端 | React 應用程式 (展示層) 用於顯示書籍，具備搜尋功能。 其會呼叫 Azure 函數應用程式。 | /azure-search-static-web-app/client |
| api | Azure .NET 函數應用程式 (商務層) - 使用 .NET SDK 呼叫 Azure AI 搜尋服務 API | /azure-search-static-web-app/api |
| 大量插入 | .NET 專案用來建立索引，並將文件新增至其中。 | /azure-search-static-web-app/bulk-insert |
設定開發環境
為您的本機開發環境建立服務並安裝下列軟體。
- Azure AI 搜尋服務，任何區域或階層
- .NET 6 或更新版本
- Git
- Visual Studio Code
- 適用於 Visual Studio Code 的 C# 開發工具延伸模組
- 適用於 Visual Studio Code 的 Azure Static Web Apps 延伸模組
本教學課程不會在本機執行 Azure 函式 API，但如果您要在本機執行，請安裝 azure-functions-core-tools。
使用 git 分支和複製搜尋範例
若要能部署靜態 Web 應用程式，分支範例存放庫可說是關鍵所在。 Web 應用程式會根據您自己的 GitHub 分支位置來判斷建置動作和部署內容。 靜態 Web 應用程式的程式碼執行會遠端作業，Azure Static Web Apps 會讀取分支範例中的程式碼。
在 GitHub 上，派生 azure-search-static-web-app 存放庫。
使用您的 GitHub 帳戶，在網頁瀏覽器中完成分支程序。 本教學課程會使用分支作為 Azure 靜態 Web 應用程式部署的一部分。
在 Bash 終端中，將分支應用程式範例下載到本機電腦。
使用您的 GitHub 別名取代
YOUR-GITHUB-ALIAS。git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-static-web-app.git在同一個 Bash 終端中，進入此網站搜尋範例的分支存放庫：
cd azure-search-static-web-app使用 Visual Studio Code 命令
code .，開啟分支存放庫。 除非另有指定，否則會從 Visual Studio Code 完成其餘工作。code .