在您的应用程式中嵌入 Amazon OpenSearch Service 仪表板

主要要点

在这篇文章中，我们将说明如何在您的应用程式中嵌入一个即时的 Amazon OpenSearch 仪表板，使最终用户可以在不离开网站的情况下，访问综合的即时视图。这将提升用户体验并优化工作流程。

客户广泛依赖 Amazon OpenSearch Service 进行互动式日志分析、实时应用监控、网站搜索和向量数据库，从数据中提取有意义的洞见，并利用 OpenSearch 仪表板可视化这些洞见。此外，客户也常常寻求便捷分享视觉仪表板和将这些仪表板无缝嵌入其应用程式的功能。

解决方案概述

我们将展示如何使用 OpenSearch 仪表板部署一个样本航班数据仪表板，并通过 iFrame 将其嵌入到您的应用中。以下图表提供了解决方案的高层次概览。

工作流程包括以下步骤：

用户通过在浏览器中打开静态网络服务器的端点来请求嵌入的仪表板。请求到达 NGINX 端点，NGINX 将流量路由到自管的 OpenSearch 仪表板伺服器。该伺服器充当用户介面，连接到 OpenSearch Service 领域。自管的 OpenSearch 仪表板伺服器与 Amazon 管理的 OpenSearch Service 领域交互，以获取所需数据。所请求的数据被发送到 OpenSearch 仪表板伺服器。所请求的数据通过 NGINX 代理从自管的 OpenSearch 仪表板伺服器发送到网络服务器。仪表板利用数据进行可视化渲染，并显示在网站上。

前提条件

您将在 Amazon Elastic Compute Cloud (Amazon EC2) 实例上启动自管的 OpenSearch 仪表板伺服器，并将其连接到管理的 OpenSearch Service 领域以创建可视化。自管的 OpenSearch 仪表板伺服器充当用户界面，连接到 OpenSearch Service 领域。此过程假设存在公共和私有子网的 VPC。

创建 OpenSearch Service 领域

如果您已经设置了 OpenSearch Service 领域，则可跳过此步骤。

要创建 OpenSearch Service 领域的指导，请参阅 开始使用 Amazon OpenSearch Service。创建领域大约需要 1520 分钟。当领域状态为 Active 时，请记下领域端点，这将在后续步骤中用于设定代理。

nordvnp下载 android

部署 EC2 实例作为 NGINX 代理

在这一步，您将启动一个 AWS CloudFormation 堆叠，以部署以下资源：

资源描述安全组用于 EC2 实例的安全组进入规则附加到 OpenSearch Service 领域的安全组进入规则，允许来自代理实例的 443 端口流量EC2 实例包含 NGINX 代理和自管 OpenSearch 仪表板的 EC2 实例

请遵循以下步骤来创建堆叠：

选择 启动堆叠 以在 useast1 运行 CloudFormation 堆叠。您可以根据需要更改 AWS 区域。

提供 OpenSearch Service 领域的参数。

选择 创建堆叠。 该过程可能需要 34 分钟，因为它设置了 EC2 实例和所需的堆叠。请等到堆叠状态变更为 CREATECOMPLETE。

在堆叠的 输出 标签中，记下 DashboardURL 的值。

使用 NGINX 代理访问 OpenSearch 仪表板并设置嵌入

在这一步，您将在 OpenSearch 仪表板中创建一个新的仪表板以便于嵌入。由于您在 VPC 内启动了 OpenSearch Service 领域，因此无法直接访问。要建立连接，您将使用之前步骤配置的 NGINX 代理设置。

使用浏览器访问 DashboardURL 的链接。输入您在创建 OpenSearch Service 领域时配置的用户名和密码。

为了方便演示，您将使用一个样本数据集，其中有一些预设的可视化和仪表板。

选择 添加数据 以导入样本数据集。

选择 样本航班数据 数据集，然后选择 添加数据。

要打开新导入的仪表板并获取 iFrame 代码，请选择 嵌入代码 在 分享 菜单中。在 生成链接为 下，选择 快照，然后选择 复制 iFrame 代码。

iFrame 代码类似于以下代码：

html

将此代码复制到您喜爱的文本编辑器中，删除 /dashboards 部分，并将框架高度和宽度从 height=600 width=800 更改为 height=800 width=100。用以下示例中的 HTML 代码包装 iFrame 代码并将其保存为 indexhtml 文件到您的本地系统：

html

航班仪表板 body { fontfamily Arial margin 0 } header { padding 1px textalign center fontfamily Arial background black color white } content {padding20px}

托管 HTML 代码

接下来的步骤是托管 indexhtml 文件。该文件可以从任何具有 Firefox 或 Chrome 浏览器的本地笔记本电脑或桌面进行快速测试。

有多种选择可供托管网络服务器，如 Amazon EC2 或 Amazon S3。欲了解如何在 Amazon S3 上托管网络服务器的指导，请参阅 教程：在 Amazon S3 上配置静态网站。

下面的截图显示了我们嵌入的仪表板。

清理

如果不再需要您创建的资源，请删除 CloudFormation 堆叠和 OpenSearch Service 领域如果您创建了新的以防止产生额外的费用。

总结

在这篇文章中，我们展示了如何将使用 OpenSearch 仪表板创建的仪表板嵌入到您的应用程式中，以提供洞见给用户。如果您觉得这篇文章有用，请查看 使用 OpenSearch仪表板与 Amazon OpenSearch Service 和 OpenSearch 仪表板快速入门指南。

关于作者

Vibhu Pareek 是 AWS 的高级解决方案架构师。自 2016 年以来，他指导客户使用完善的、可重复的模式进行云采用。凭借对数据库、数据分析和人工智慧的专业知识，他擅于将复杂的挑战转化为创新解决方案。在工作之余，他喜欢短途徒步旅行和羽毛球、足球、游泳等运动。

Kamal Manchanda 是 AWS 的高级解决方案架构师，专注于构建和设计数据解决方案，重点在湖泊架构、数据治理、搜索平台、日志分析解决方案以及生成 AI 解决方案。在空闲时间，Kamal 喜欢旅行和与家人共度时光。

Adesh Jaiswal 是 Amazon Web Services 支持工程团队的云支持工程师，专注于 Amazon OpenSearch Service。他为客户提供指导和技术支持，帮助他们在 AWS 云中建立可扩展、高可用且安全的解决方案。在空闲时间，他喜欢观看电影、电视剧，还有足球。