本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。
部署 Amazon Kendra
当您需要将 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。 -
SDK for Java 或 AWS SDK for JavaScript,以便对 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 的响应。结果显示在三个不同的区域中。
-
建议答案 - 这些是
Query
API 返回的热门结果。它最多包含三个建议的答案。在响应中,它们的结果类型为ANSWER
。 -
常见问题答案 - 这些是响应返回的常见问题答案结果。常见问题答案会单独添加到索引中。在响应中,它们的类型为
QUESTION_ANSWER
。有关更多信息,请参阅问题和答案。 -
推荐文档 - 这些是 Amazon Kendra 在回复中返回的其他文档。在
Query
API 的响应中,它们的类型为DOCUMENT
。
结果组件共享一组用于突出显示、标题、链接等功能的组件。必须存在共享组件才能让结果组件正常工作。
分面组件
分面组件列出了搜索结果中可用的分面。每个分面都按特定的维度(例如,作者)来对响应进行分类。通过从列表中选择一个分面,您可以将搜索范围缩小到特定的分面。
选择一个分面后,该组件会使用属性筛选条件调用 Query
,该筛选条件将搜索范围限制为与该分面匹配的文档。
分页组件
分页组件允许您在多个页面中显示来自 Query
API 的搜索结果。它使用 PageSize
和 PageNumber
参数调用 Query
API 以获取特定页面的结果。