本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。
注意
功能支持因索引类型和使用的搜索 API 而异。要查看您使用的索引类型和搜索 API 是否支持此功能，请参阅索引类型。
当需要将 Amazon Kendra 搜索部署到您的网站时，我们会提供源代码，您可以在 React 中使用这些源代码，以便在应用程序上抢占先机。根据 MIT 许可修订版，源代码免费提供。您可以按原样使用，也可以根据自己的需求进行更改。提供的 React 应用程序是帮助您入门的示例。该应用程序不能用于生产。
要部署无代码的搜索应用程序并生成具有访问控制功能的搜索页面的端点 URL，请参阅 Amazon Kendra Experience Builder。
以下示例代码为现有的 React Web 应用程序添加了 Amazon Kendra 搜索功能：
-
https://kendrasamples.s3.amazonaws.com/kendrasamples-react-app.zip
—开发人员可用于在其现有的 React Web 应用程序中构建功能搜索体验的示例文件。
这些示例以 Amazon Kendra 控制台的搜索页面为蓝本。它们具有相同的搜索和显示搜索结果的功能。您可以使用整个示例，也可以只选择其中一个功能来供自己使用。
要在 Amazon Kendra 控制台中查看搜索页面的三个组成部分，请从右侧菜单中选择代码图标 (</>)。将鼠标指针悬停在各个部分上可查看组件的简短描述并获取组件源代码的 URL。
概览
您可以将示例代码添加到现有 React Web 应用程序中来激活搜索。示例代码包括一个自述文件，其中包含设置新 React 开发环境的步骤。示例代码中的示例数据可用于演示搜索。示例代码中的搜索文件和组件结构如下：
-
主搜索页面（
Search.tsx）- 这是包含所有组件的主页。在这里，您可以将应用程序与 Amazon Kendra API 集成。 -
搜索栏 - 这是用户输入搜索词并调用搜索功能的组件。
-
结果-这是显示结果的组件。 Amazon Kendra它由三个部分组成：建议答案、常见问题解答结果和推荐文档。
-
分面 - 该组件在搜索结果中显示分面，并允许您选择一个分面来缩小搜索范围。
-
分页 - 这是对来自 Amazon Kendra的响应进行分页的组件。
先决条件
在开始之前，您需要：
-
已安装
Node.js 和 npm。需要使用 Node.js 版本 19 或更早版本。 -
已下载和安装
Python 3 或 Python 2。 -
适用于 Java 的 SDK 或 适用于 JavaScript 的 AWS SDK，以便对 Amazon Kendra调用 API。
-
现有 React Web 应用程序。示例代码包括一个自述文件，其中包含有关如何设置新 React 开发环境的步骤（包括使用所需的框架/库）。您也可以按照 React 文档中的快速入门说明创建 React Web 应用程序
。 -
在开发环境中配置的必需库和依赖项。示例代码包括一个自述文件，其中列出了所需的库和软件包依赖关系。请注意，
sass是必需的，因为已弃用node-sass。如果您之前安装过node-sass，请将其卸载并安装sass。
设置示例
向 React 应用程序添加 Amazon Kendra 搜索功能的完整过程见代码示例中包含的自述文件。
要开始使用 kendrasamples-react-app .zip
-
确保您已经完成先决条件，包括下载和安装 Node.js 和 npm。
-
下载 kendrasamples-react-app .zip 并解压缩。
-
打开您的终端并转到
aws-kendra-example-react-app/src/services/。打开local-dev-credentials.json并提供您的凭证。不要将此文件添加到任何公共存储库中。 -
转到
aws-kendra-example-react-app并在package.json中安装依赖项。运行npm install。 -
在本地服务器上启动应用程序的演示版。运行
npm start。在键盘上输入Cmd/Ctrl + C可停止本地服务器。 -
您可以通过访问
package.json并更新主机和端口来更改端口或主机（例如，IP 地址）："start": "HOST=[host] PORT=[port] react-scripts start"。如果您使用的是 Windows："start": "set HOST=[host] && set PORT=[port] && react-scripts start"。 -
如果您有注册的网站域名，则可以在应用程序名称后的
package.json中指定域名。例如，"homepage": "https://mywebsite.com"。必须再次运行npm install才能更新新的依赖项，然后运行npm start。 -
要构建应用程序，请运行
npm build。将构建目录中的内容上传到您的托管服务提供商。警告
React 应用程序未准备好投入生产。这是部署用于 Amazon Kendra 搜索的应用程序的示例。
主搜索页面
主搜索页面（Search.tsx）包含所有示例搜索组件。它包括用于输出的搜索栏组件、用于显示来自 Query API 的响应的结果组件，以及用于分页浏览响应的分页组件。
搜索组件
搜索组件提供了一个用于输入查询文本的文本框。onSearch 函数是一个钩子，它可以在 Search.tsx 中调用主函数来进行 Amazon Kendra
Query API 调用。
结果组件
结果组件显示来自 Query API 的响应。结果显示在三个不同的区域中。
-
建议答案 - 这些是
QueryAPI 返回的热门结果。它最多包含三个建议的答案。在响应中，它们的结果类型为ANSWER。 -
常见问题答案-这些是回复返回的常见问题解答结果。 FAQs 分别添加到索引中。在响应中，它们的类型为
QUESTION_ANSWER。有关更多信息，请参阅问题和答案。 -
推荐文档-这些是回复中 Amazon Kendra 返回的其他文档。在
QueryAPI 的响应中，它们的类型为DOCUMENT。
结果组件共享一组用于突出显示、标题、链接等功能的组件。必须存在共享组件才能让结果组件正常工作。
分面组件
分面组件列出了搜索结果中可用的分面。每个分面都按特定的维度（例如，作者）来对响应进行分类。通过从列表中选择一个分面，您可以将搜索范围缩小到特定的分面。
选择一个分面后，该组件会使用属性筛选条件调用 Query，该筛选条件将搜索范围限制为与该分面匹配的文档。
分页组件
分页组件允许您在多个页面中显示来自 Query API 的搜索结果。它使用 PageSize 和 PageNumber 参数调用 Query API 以获取特定页面的结果。
