本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# Web UI 和儲存體管理
<a name="web-ui-and-storage-management"></a>

我們使用 [React](https://reactjs.org/) 開發 Web UI。Web UI 提供前端主控台，允許使用者與 AWS 上的工作負載探索互動。

 [Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) 設定為將安全標頭附加到 Web UI 的每個 HTTP 請求。這提供了多一層的安全性，可防範[跨網站指令碼 ](https://docs.aws.amazon.com/waf/latest/developerguide/waf-rule-statement-type-xss-match.html)(XSS) 等攻擊。

 **AWS Web UI 上的工作負載探索和儲存管理元件** 

![工作負載探索 Webui 儲存體管理](http://docs.aws.amazon.com/zh_tw/solutions/latest/workload-discovery-on-aws/images/workload-discovery-webui-storage-management.png)


Web UI 資源託管在 `WebUIBucket` Amazon S3 儲存貯體中，並由 Amazon CloudFront 分發。AWS Amplify 提供抽象層，可簡化與 AWS AppSync 和 Amazon S3 的整合。

此解決方案使用 AWS AppSync 來促進與 AWS 上工作負載探索可用的各種組態的互動，包括管理匯入的區域。AWS AppSync 利用 `Settings` AWS Lambda 函數來處理請求，例如匯入新帳戶或區域。