Build a custom portal with embedded Amazon SageMaker AI MLflow Apps

随着机器学习团队规模扩大，将Amazon SageMaker AI MLflow Apps嵌入自定义门户需要可扩展的访问管理方法。分发预签名URL无法满足拥有数十名数据科学家的团队需求，而单独授予AWS管理控制台访问权限会增加管理员管理访问控制的操作负担。依赖集成单点登录（SSO）的内部门户的团队需要通过单个可书签化的URL，在其他内部应用程序旁访问MLflow实验跟踪功能。通过自定义门户，您可以缩短新成员入职时间，简化访问管理，并为数据科学家提供一致的内部工具体验。

借助本方案，您的机器学习（ML）团队可通过持久化、可书签化的URL访问完整的MLflow Web UI，无需预签名URL或AWS管理控制台访问权限。您可以将MLflow实验跟踪UI直接嵌入组织的SSO集成内部门户或自定义仪表板，让用户只需一次身份验证，即可通过同一内部工具访问实验跟踪功能。您的持续集成/持续交付（CI/CD）管道和自动化脚本可通过同一代理端点与MLflow REST API进行程序化交互，后台自动处理SigV4身份验证。

本文将指导您构建嵌入SageMaker AI MLflow Apps UI的自定义门户。您将了解基于React前端与Flask反向代理组合的架构模式，该代理负责AWS Signature Version 4（SigV4）身份验证，通过AWS Cloud Development Kit（AWS CDK）部署完整堆栈，验证部署结果，并审查安全注意事项及清理流程。

解决方案概述

您将部署一个嵌入SageMaker AI MLflow Apps UI的自定义React Web应用程序，由运行于Amazon Elastic Compute Cloud（Amazon EC2）的Flask反向代理支持。该架构包含四个协同工作的组件，为团队提供经过身份验证的MLflow访问：

应用负载均衡器

应用负载均衡器（ALB）作为用户的单一入口点。它处理HTTPS终止，将流量路由到适当的后端目标，并与组织现有的DNS和证书基础设施集成。ALB为门户提供稳定、面向公众的URL，可与现有SSO基础设施集成。它负责React仪表板和MLflow API请求的流量分配，并支持自定义域名和SSL终止。

注意： 此实现使用HTTP协议的应用负载均衡器。对于生产环境，您应通过AWS Certificate Manager（ACM）添加HTTPS并配置SSL/TLS证书。

React前端门户

React前端为团队提供品牌化的MLflow访问入口。它通过iframe嵌入MLflow跟踪UI，作为组织品牌形象和附加工具的集成点。静态文件通过Flask代理从/app路径提供。

Flask反向代理服务

Flask反向代理位于前端与MLflow后端之间，确保用户无需直接管理AWS凭证。基于Python的Flask应用程序执行以下操作：

• 拦截传入请求，包括UI路径和REST API调用
• 使用临时凭证（通过承担专用AWS Identity and Access Management（IAM）角色获取）对每个请求进行AWS SigV4签名
• 将已签名请求转发至Amazon SageMaker AI MLflow Apps端点
• 重写HTML响应中的绝对MLflow URL为相对路径，并移除X-Frame-Options标头，确保UI在iframe中正确渲染

Amazon SageMaker AI MLflow Apps

Amazon SageMaker AI全托管MLflow Apps为您完全管理服务器，无需手动配置或修补。它提供实验跟踪（包含运行记录、指标、参数和工件），以及模型注册表用于版本管理和生命周期管理。作为全托管后端，无需维护任何基础设施。

该架构支持安全通信，同时兼容现有企业门户。代理服务充当桥梁，将标准HTTPS请求转换为经过身份验证的AWS API调用。

架构与请求流程

下图展示了各组件如何协同工作，为团队提供安全的浏览器访问Amazon SageMaker AI MLflow Apps：

以下是用户访问门户时的流程：

1. 用户在浏览器中打开应用负载均衡器（ALB）的URL，可以直接访问或通过组织内部门户的链接进入。ALB将请求路由到运行Flask代理的Amazon EC2实例。
2. Flask代理提供React仪表盘（来自/app路径）。React应用程序渲染页面并在指向/mlflow-ui/的iframe中加载MLflow UI。
3. 从此时起，iframe发出的所有请求均通过Flask代理转发，无论是加载MLflow UI页面还是调用API端点（如/api/2.0/mlflow/experiments/search）。代理使用临时凭证（通过承担专用IAM角色获取）对每个请求进行AWS SigV4签名，并将其转发至无服务器MLflow App端点。
4. 当MLflow App响应时，代理会在将响应返回给浏览器之前执行两项操作：重写绝对MLflow URL为相对路径以确保导航正常工作；移除X-Frame-Options标头以便浏览器允许内容在iframe中呈现。

您的用户可以在浏览器中看到完整的MLflow跟踪UI，包括实验、运行记录、指标和模型注册表，而AWS身份验证则在后台自动处理。

操作指南

以下部分将引导您完成解决方案的部署。### 前提条件

要跟随本指南，请确保满足以下前提条件：

• AWS账户。
• AWS命令行界面（AWS CLI）v2.34.5或更高版本（用于create-mlflow-app、list-mlflow-apps和describe-mlflow-app命令）。
• 本地安装Python 3.13或更高版本（部署脚本用于解析JSON输出）。
• 在目标账户和区域中安装并初始化AWS CDK v2（aws-cdk-lib 2.243.0或更高版本）。请参阅开始使用AWS CDK。
• 本地安装Node.js 18.x或更高版本（用于CDK部署）。
• Amazon EC2实例上安装Python 3.13（由设置脚本自动完成）。
• 创建VPC、Amazon EC2实例、ALB、Amazon SageMaker AI域、MLflow Apps和IAM角色所需的IAM权限。
• 目标AWS区域可用的Ubuntu 24.04 LTS AMI（通过SSM Parameter Store自动解析）。
• 必备知识：
• 对AWS服务和IAM权限的基本了解。
• 熟悉Python和Flask应用程序。
• 理解MLflow概念和操作。
• 成本考虑：
• 本解决方案会创建可能产生费用的AWS资源。
• 主要成本驱动因素包括：
• Amazon EC2实例。
• 应用负载均衡器。
• Amazon SageMaker AI资源。
• Amazon Simple Storage Service (Amazon S3)存储。

有关AWS服务定价的信息，请参阅AWS Pricing Calculator。

部署解决方案

本节指导您在AWS账户中部署解决方案并验证其功能。部署使用单个deploy.sh脚本，协调CDK堆栈部署和无服务器MLflow App创建。

#### 第一步：克隆仓库并部署基础设施

1. 下载解决方案代码并安装依赖项：```

克隆仓库

git clone https://github.com/aws-samples/sample-sagemaker-mlflow-embedded-ui.git

进入项目目录并安装依赖项

cd sample-sagemaker-mlflow-embedded-ui npm install

2. 将AWS账户ID和区域设置为环境变量：```
export CDK_DEFAULT_ACCOUNT=<your-account-id>
export CDK_DEFAULT_REGION=<your-region>
export AWS_DEFAULT_REGION=<your-region>
export AWS_REGION=<your-region>

注意： 如果之前在不同区域部署过，请删除缓存的上下文文件。

rm -f cdk.context.jsonBash

1. 为AWS CDK初始化环境（如果您的AWS账户和区域已配置CDK，则跳过此步骤）。初始化AWS账户和区域以供CDK使用： cdk bootstrap aws://<ACCOUNT_ID>/<REGION>Bash
2. 在您的AWS账户中部署所需资源。运行部署脚本以部署堆栈： bash deploy.shBash

注意部署输出中的ALB DNS名称和Amazon EC2实例ID，后续步骤需要这些信息。

#### 第二步：在Amazon EC2上设置Flask代理服务

1. 使用步骤1中获得的实例ID登录Amazon EC2实例。通过AWS Systems Manager Session Manager访问实例。详细说明请参阅Session Manager连接指南。
2. 安装Python 3.13及其依赖项。安装Python包：```

切换到root用户

sudo su - cd /root

安装Python和依赖项

chmod +x install_python13.sh ./install_python13.sh

**注意：** 此脚本适用于基于Ubuntu的系统。对于其他Linux发行版，请使用系统包管理器验证已安装Python 3.12+、PIP3和Virtualenv。

3. 安装并启动MLflow代理服务：```
chmod +x setup_mlflow_proxy_app.sh
./setup_mlflow_proxy_app.sh

1. 检查Flask MLflow代理服务状态： systemctl status mlflowproxyBash

如果服务未运行，请使用以下命令查看日志。

journalctl -u mlflowproxyBash

#### 第三步：验证部署

本节演示了如何通过应用负载均衡器（ALB）与 MLflow REST API 进行交互。以下示例使用 HTTP（未加密）协议，但在生产环境中建议使用 HTTPS。示例中使用 curl 工具发送 API 请求，您也可以使用 Postman 或类似工具。

1. 在浏览器中打开您在步骤 1 中记录的 ALB URL。您还可以通过 AWS CloudFormation 堆栈输出获取该 URL：aws cloudformation describe-stacks --stack-name sagemaker-infra-flaskapp --query 'Stacks[0].Outputs[?OutputKey==ALBUrl].OutputValue' --output text
2. 在浏览器中访问 http://<ALB-URL>/。系统会自动重定向到 /app，React 仪表板会显示嵌入 iframe 的 MLflow UI，如下图所示。
3. 验证健康检查端点：curl http://<ALB-URL>/health

应返回 {"status": "healthy"}。

1. 通过 REST API 测试 MLflow 实验跟踪：
2. 创建实验。使用 MLflow REST API 通过 ALB 创建新实验。从响应中记录实验 ID。curl -X POST http://<ALB-URL>/api/2.0/mlflow/experiments/create -H "Content-Type: application/json" -d '{"name": "my-first-experiment"}'
3. 创建并记录运行。在实验下创建运行并记录指标和参数。```

curl -X POST http://<ALB-URL>/api/2.0/mlflow/runs/create -H "Content-Type: application/json" -d '{"experiment_id": "<ID>", "run_name": "training-run-1"}'

curl -X POST http://<ALB-URL>/api/2.0/mlflow/runs/log-parameter -H "Content-Type: application/json" -d '{"run_id": "<RUN_ID>", "key": "learning_rate", "value": "0.01"}'

curl -X POST http://<ALB-URL>/api/2.0/mlflow/runs/log-metric -H "Content-Type: application/json" -d '{"run_id": "<RUN_ID>", "key": "accuracy", "value": 0.95, "timestamp": 1700000000000, "step": 1}'

    3. 在 React 仪表板中验证运行。刷新浏览器中的 `http://<ALB-URL>/app` 页面。MLflow UI 现在会显示您之前创建的实验、运行、指标和参数，如下图所示。![Image 3: React 仪表板中的 MLflow UI 显示通过 REST API 创建的新实验、运行、记录的参数和指标](https://d2908q01vomqb2.cloudfront.net/f1f836cb4ea6efb2a0b1b99f41ad8b103eff4b59/2026/05/21/ML-20734-3.png)

## 清理资源

为了避免持续产生费用并移除解决方案创建的资源，请按照以下步骤进行清理：

1. 在项目根目录运行清理脚本。`bash cleanup.sh`  
   该脚本按依赖关系逆序拆除已部署的资源。它首先销毁 Flask 应用程序堆栈，然后通过 AWS CLI 删除无服务器 MLflow App 并等待删除完成。之后，它会移除 MLflow 资源、Amazon SageMaker 域以及网络堆栈。网络堆栈包含一个基于 AWS Lambda 的自定义资源。它会自动清理 Amazon SageMaker AI 创建的 Amazon Elastic File System (Amazon EFS) 文件系统、孤立的网络接口和安全组，然后删除 VPC。

2. 手动清理资源。MLflow 艺术品 Amazon S3 存储桶具有 `RETAIN` 删除策略，如果不再需要，必须手动删除。详细说明请参阅《Amazon S3 用户指南》中的[删除通用用途存储桶](https://docs.aws.amazon.com/AmazonS3/latest/userguide/delete-bucket.html)。

## CDK 堆栈详情

该解决方案部署四个 CDK 堆栈，每个堆栈负责架构的不同层级：

### 网络堆栈
该堆栈创建 VPC 及其关联的网络组件，包括公共和私有子网、路由表和安全组。它为其他所有堆栈提供网络基础架构。

### SageMaker AI 域堆栈
该堆栈设置 Amazon SageMaker AI 域，作为 SageMaker 资源的组织容器。域提供 MLflow App 所需的身份和访问上下文。

### SageMaker MLflow 堆栈
该堆栈在 SageMaker AI 域内部署无服务器 MLflow App，用于存储实验、运行、指标和模型注册数据。

### Flask 应用程序堆栈
该堆栈在 Amazon EC2 实例上部署 Flask 反向代理服务，位于 ALB 后面。它处理 SigV4 身份验证并提供 React 前端门户。

## 后续步骤

部署门户后，可考虑扩展以下用例：

* 为门户添加单点登录（SSO）身份验证。将 Amazon Cognito 或 Okta 等身份提供商与 ALB 集成，在用户到达代理前进行身份验证。详细说明请参阅[使用 Application Load Balancer 对用户进行身份验证](https://docs.aws.amazon.com/elasticloadbalancing/latest/application/listener-authenticate-users.html)。
* 使用 AWS PrivateLink 保护代理。如果团队需要无需通过公共互联网的私密连接，请参阅[AWS PrivateLink 支持 Amazon SageMaker with MLflow](https://aws.amazon.com/blogs/machine-learning/accelerating-ml-experimentation-with-enhanced-security-aws-privatelink-support-for-amazon-sagemaker-with-mlflow/)。
* 了解[AWS Signature Version 4 签名流程](https://docs.aws.amazon.com/IAM/latest/UserGuide/reference_sigv.html)。

在生产环境中部署此解决方案时，建议实施以下附加安全措施：

*   配置Amazon CloudWatch监控以跟踪基于Flask的代理服务的运行状况、检测异常并针对可疑活动设置警报。有关更多信息，请参阅[使用CloudWatch监控实例](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/using-cloudwatch.html)和[基于异常检测创建CloudWatch警报](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/Create_Anomaly_Detection_Alarm.html)。
*   为基于Flask的代理服务实施速率限制，以防范潜在的拒绝服务（DoS）攻击并控制单个客户端的请求数量。您可以结合使用[ AWS WAF](https://docs.aws.amazon.com/waf/latest/developerguide/waf-chapter.html) 和应用程序负载均衡器来实现基于速率的规则。
*   在应用程序负载均衡器级别启用HTTPS终止，以支持客户端与您的应用程序之间的安全通信。您可以使用ACM为您的应用程序预置和管理SSL/TLS证书。有关配置HTTPS监听器的说明，请参阅[应用程序负载均衡器HTTPS监听器文档](https://docs.aws.amazon.com/elasticloadbalancing/latest/application/create-https-listener.html)。

## 结论

在本文中，您学习了如何构建一个基于React的仪表板，通过iframe嵌入Amazon SageMaker AI MLflow Apps UI，并由处理SigV4身份验证的Flask反向代理提供支持。该解决方案帮助ML基础设施团队通过自定义门户集成现有组织基础设施，为用户提供持久可书签化的完整MLflow实验跟踪体验。

通过这种方法，您的团队可以获得无需预签名URL的持久可书签化MLflow实验跟踪URL，并直接集成到现有的SSO保护内部门户中。用户可以享受完整的MLflow UI体验，包括运行比较、指标可视化和模型注册表，而管理员则受益于减少的操作开销，因为不再需要为每位用户提供控制台访问权限。整个解决方案以基础设施即代码的方式部署，具有自动预置和清理功能。要开始使用，请克隆[示例存储库](https://github.com/aws-samples/sample-sagemaker-mlflow-embedded-ui)，并在您的AWS账户中部署堆栈。

* * *

## 关于作者