本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# Web 用户界面和存储管理
<a name="web-ui-and-storage-management"></a>

我们使用 [React](https://reactjs.org/) 开发了网页用户界面。Web UI 提供了前端控制台，允许用户在 AWS 上与 Workload Discovery 进行交互。

 [Amazon](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) 配置 CloudFront为向网页用户界面的每个 HTTP 请求附加安全标头。这提供了额外的安全层，可以抵御[跨站点脚本](https://docs.aws.amazon.com/waf/latest/developerguide/waf-rule-statement-type-xss-match.html) (XSS) 等攻击。

 **在 AWS Web 用户界面和存储管理组件上发现工作负载** 

![工作负载发现 webui 存储管理](http://docs.aws.amazon.com/zh_cn/solutions/latest/workload-discovery-on-aws/images/workload-discovery-webui-storage-management.png)


网页用户界面资源托管在 `WebUIBucket` Amazon S3 存储桶中并由亚马逊分发 CloudFront。AWS Amplify 提供了一个抽象层，用于简化与 AWS 和 A AppSync mazon S3 的集成。

该解决方案使用 AWS AppSync 来促进与 AWS 上工作负载发现中可用的各种配置的交互，包括管理导入的区域。AWS AppSync 利用 `Settings` AWS Lambda 函数来处理诸如导入新账户或区域之类的请求。