你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

1 - 将搜索添加到网站的概述

项目
11/30/2023

在本 Azure AI 搜索教程中，创建一个用于搜索书籍目录的 Web 应用，然后将网站部署到 Azure Static Web Apps 资源。

本教程面向开发带搜索交互功能（如分面导航、预先输入和分页）的前端客户端应用的 JavaScript 开发人员。它还演示了如何利用 Azure SDK for JavaScript 中的 @azure/search-documents 库来调用 Azure AI 搜索，以在后端编制索引和查询工作流。

该示例有什么作用？

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

搜索体验包括：

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

如何对示例进行组织？

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

应用	目标	GitHub 存储库位置
客户端	React 应用（表示层），用于通过搜索显示书籍。它调用 Azure Function 应用。	/search-website-functions-v4/client
服务器	Azure Function 应用（业务层）- 使用 JavaScript SDK 调用 Azure AI 搜索 API	/search-website-functions-v4/api
大容量插入	JavaScript 文件，用于创建索引并向其中添加文档。	/search-website-functions-v4/bulk-insert

设置开发环境

为本地开发环境安装以下软件。

Node.js LTS
- 从这个受支持语言版本列表中选择最新的运行时和版本。
- 如果本地计算机上安装了不同版本的 Node.js，请考虑使用节点版本管理器 (nvm) 或 Docker 容器。
Git
Visual Studio Code 和以下扩展
- Azure 静态 Web 应用
- 使用集成终端执行命令行操作。
可选：
- 本教程不在本地运行 Azure 函数 API。如果要在本地运行它，则需要通过以下 bash 命令全局安装 azure-functions-core-tools：
```
npm install -g azure-functions-core-tools@4
```

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

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

在 GitHub 上，创建示例存储库分支。

在 Web 浏览器中使用 GitHub 帐户完成分支创建过程。本教程使用分支作为部署到 Azure 静态 Web 应用的一部分。
在 bash 终端，将已分支示例应用程序下载到本地计算机。

将 YOUR-GITHUB-ALIAS 替换为 GitHub 别名。
```
git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samples
```
在同一 bash 终端，转到此网站搜索示例的分支存储库：
```
cd azure-search-javascript-samples
```
使用 Visual Studio Code 命令 code . 打开分支存储库。其余任务从 Visual Studio Code 完成，除非另有指定。
```
code .
```

为 Azure 资源创建资源组

在 Visual Studio Code 中，开启活动栏，然后选择 Azure 图标。
登录 Azure（如果尚未登录）。
在“资源”部分，选择“添加”(+)，然后选择“创建资源组”。
输入资源组名称，例如 cognitive-search-demo-rg。
输入区域：
- 对于 Node.js，请选择 West US 2。这是 Azure 函数编程模型的建议区域 (PM) v4 预览版。
- 对于 C# 和 Python，我们建议使用以下区域，Azure Static Web Apps 编写本文时支持：West US 2、East US 2、West Europe、Central US、East Asia

将此资源组用于本教程中创建的所有资源。资源组可以使用逻辑单元来管理资源，包括在完成后将其删除。

后续步骤

创建搜索索引并和文档一起加载