步骤 1 - 使用 .NET 将搜索添加到静态 Web 应用的概述

本教程将构建一个网站来搜索书籍目录，然后将该网站部署到 Azure 静态 Web 应用。

该示例有什么作用？

此示例网站提供对 10000 本书籍的目录的访问权限。 你可以通过在搜索栏中输入文本来搜索目录。 在你输入文本时，网站会使用搜索索引的建议功能自动补全文本。 查询完成后，将显示书籍列表，其中包含详细信息部分。 你可以选择书籍来查看该书籍的所有详细信息（存储在搜索索引中）。

搜索体验包括：

• 搜索 - 为应用程序提供搜索功能。
• 建议 - 当用户在搜索栏中键入内容时提供建议。
• Facet 和筛选器 - 提供分面导航结构，可按作者或语言筛选。
• 分页结果 - 提供用于滚动浏览结果的分页控件。
• 文档查找 - 按 ID 查找文档，以检索其详细信息页的所有内容。

如何对示例进行组织？

此示例代码包含以下组件：

设置开发环境

为本地开发环境创建服务并安装以下软件。

• Azure AI 搜索、任何区域或层
• .NET 6 或更高版本
• Git
• Visual Studio Code
• 适用于 Visual Studio Code 的 C# Dev 工具扩展
• 适用于 Visual Studio Code 的 Azure 静态 Web 应用扩展

本教程不在本地运行 Azure Function API，但如果想要在本地运行它，请安装 azure-functions-core-tools。

通过 git 创建搜索示例的分支和克隆搜索示例

为示例存储库创建分支对于能够部署静态 Web 应用至关重要。 Web 应用根据您自己的 GitHub 分支位置确定生成操作和部署内容。 静态 Web 应用中的代码远程执行，Azure 静态 Web 应用从已创建分支的示例中的代码读取。

1. 在 GitHub 上，为 azure-search-static-web-app 存储库创建分支。

   在 Web 浏览器中使用 GitHub 帐户完成分支创建过程。 本教程使用分支作为部署到 Azure 静态 Web 应用的一部分。

2. 在 bash 终端，将分支示例应用程序下载到本地计算机。

   将 YOUR-GITHUB-ALIAS 替换为 GitHub 别名。

   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 应用