![Olawale Olaleye Olawale Olaleye](https://d1.awsstatic.com/xuefezha-jennie/%e7%ba%a7%e5%88%ab_level%201.01c35fea97656a6beac50b0c8ae81e8afc1eedef.png)
![](https://d1.awsstatic.com/xuefezha-jennie/Group%20281.67a8494bd80a4bd979e37efcb490ada486dd72ae.png)
![](https://d1.awsstatic.com/guoheng/product.2d7b328b4c088795e2ac7b9c03e03d54eb5ea73f.png)
![](https://d1.awsstatic.com/xuefezha-jennie/Group%20287.a27381901d308706720071b52d42054d154eab4c.png)
介绍
现在,Amazon S3 的存储浏览器是一种开源 UI 组件,您可以将其添加到 Web 应用程序,以支持最终用户与 Amazon Simple Storage Service(Amazon S3)中存储的数据交互。使用此前端组件,授权的最终用户可以根据其特定权限浏览、上传、下载、复制和删除来自 Amazon S3 的数据。权限由 AWS 身份和安全服务或自定义托管解决方案进行控制。
对于希望为最终用户提供 S3 中数据的访问权限的开发人员,适用于 S3 的存储浏览器缓解了他们的压力。它旨在让客户、合作伙伴和员工等最终用户无论是否熟悉 Amazon S3 或 Amazon Web Services,都能高效地处理数据。此外,开发人员可以自定义存储浏览器界面的外观和风格,使其与应用程序的设计保持一致。
安装
适用于 S3 的存储浏览器是 AWS Amplify UI React 组件,因此,您必须在使用 React 或基于 React 的框架(例如 Next.Js、Gatsby、Remix 或任何其它框架)构建的 Web 应用程序中使用该组件。您还必须同时安装 AWS Amplify 和 AWS Amplify UI React 包。
本演示使用 Next.js。如果您想学习如何从头开始设置应用程序,请查看这份关于配置 AWS Amplify 以及在新的 Next.js 应用程序中使用 Amplify React UI 组件的分步指南。
您无需安装整个 @aws-amplify/ui-react 库,即可使用适用于 S3 的存储浏览器。您可以使用以下命令仅安装特定于存储的包,如果这是您的全部使用需求的话。
npm i @aws-amplify/ui-react-storage aws-amplify
![](https://d1.awsstatic.com/lili/hands-on/for-amazon-s3/1.1de14c4f93e18d425dc140dcfb52676d596824f2.png)
如果您的现有应用程序已经安装 Amplify UI React 包,请确保更新依赖项以导入最新版本,然后运行 npm install 以更新任何现有安装。
最后,如果您从头开始构建应用程序,请务必在应用程序的目录中运行 npm create amplify@latest,以便您可以使用 Amplify 提供的各种类别,例如身份验证、存储等。
选择授权模式
适用于 S3 的存储浏览器需要配置身份验证和授权,以便它可以呈现最终用户可以访问的 S3 桶或前缀,以及他们可以执行的操作。
有三种设置权限的选项,每个选项都适用于不同的使用案例:
使用 AWS Amplify Auth – 当您希望为客户和第三方合作伙伴提供 Amazon S3 中数据的访问权限时,此选项是理想之选。您可以设置 Amplify Storage,它默认使用 AWS Amplify Auth 来管理文件的访问控制和安全。它由 Amazon Cognito 提供支持,并附带预构建的 UI 组件,用于实施用户注册、登录和注销流程。
使用 AWS IAM Identity Center – 此选项是可扩展解决方案的理想之选,可让您的全体员工通过适用于 S3 的存储浏览器访问 S3 中的数据。您可以将 S3 访问权限管控实例与您的 AWS Identity and Access Management(IAM)Identity Center 关联,以集中管理您的用户和组的 S3 访问权限管控权限,包括外部身份提供商(例如 Microsoft Entra ID、Okta 等)上托管的用户和组。此外,S3 的每个 AWS CloudTrail 数据事件都会引用访问您的数据的最终用户身份,这有助于提高数据访问的可观测性。
将 IAM 角色与 Amazon S3 访问权限管控结合使用 – 当您希望通过适用于 S3 的存储浏览器向 IAM 主体提供对数据的访问权限时,此选项是理想之选。要进行此设置,您必须先创建一个 S3 访问权限管控实例,您可以使用该实例将 S3 桶和前缀的权限映射到所需的 IAM 身份。然后,您创建一个 IAM 角色,该角色有权调用 s3:GetDataAccess,以获得对 S3 桶或前缀的临时最低权限访问权限。
本演示假设最终用户不属于我们的组织,因此 Amplify Auth 非常适合此案例。
设置权限
首先,您必须按照本指南设置 Amplify Storage。然后,打开 amplify/storage/resource.ts,按照 Amplify 授权模型声明 S3 桶以及所需的访问规则。Amplify 授权模型利用前缀为授权用户配置隔离存储。
![](https://d1.awsstatic.com/lili/hands-on/for-amazon-s3/2.4610d37086e48536e26f76d978e98d93549060d2.png)
接下来,创建一个名为 StorageBrowser 的组件,该组件封装了与 Amplify Auth 的集成,以后我们可以轻松地将其拖放到页面中。务必调用 Amplify.config () 将其全部拼接在一起,并引用 amplify_outputs.json 作为参数。
![](https://d1.awsstatic.com/lili/hands-on/for-amazon-s3/3.dda4b1a4e174b039c110d064f2a48515a12c1f3b.png)
有关为适用于 S3 的存储浏览器设置身份验证和授权的详细说明,请访问 S3 用户指南。
将适用于 S3 的存储浏览器添加到我的应用程序
现在,组件已创建,您只需在要通过声明 <StorageBrowser/> 呈现该组件的页面中,将其添加到应用程序即可。
![](https://d1.awsstatic.com/lili/hands-on/for-amazon-s3/4.ad677c181c7274811abfff1a2077a5f94c022b84.png)
使用 npm run dev 来运行应用程序。加载后,导航到已添加适用于 S3 的存储浏览器的页面,您应该会看到它加载了默认布局。另请注意,它配置的路径和权限与我们在上面的 amplify/storage/resource.ts 中定义的路径和权限相同,允许用户浏览、读取、写入和删除我们设置的 S3 桶和前缀中的文件。
![](https://d1.awsstatic.com/lili/hands-on/for-amazon-s3/5.d019b23a37bcef963b06bb5151d7d3a86dc7ea66.png)
您可以下载文件和浏览文件夹,同时从子菜单访问管理操作,该子菜单会自动将所有不可用的操作变为灰色。
![](https://d1.awsstatic.com/lili/hands-on/for-amazon-s3/6.d2205a9cb3ebadeb05acfc73ea3d0359771316d2.png)
适用于 S3 的存储浏览器可自动对结果进行分页,并且可以筛选和搜索文件和文件夹,从而轻松浏览和管理数据。
![](https://d1.awsstatic.com/lili/hands-on/for-amazon-s3/7.adec91ad81bf25400e21283e6555596b4991f00a.png)
所有数据访问均由配置的授权模型管控,使最终用户能够通过高度直观的界面与 S3 桶和前缀进行无缝交互,而不会影响您的安全性或合规性要求。
自定义界面
得益于灵活的设计,您可以自定义适用于 S3 的存储浏览器,以匹配您的应用程序的外观和风格。与任何其它 Amplify UI 组件一样,它默认使用您在应用程序中激活的 Amplify 主题。但是,您可以直接使用 CSS 创建自己的主题或定位元素,从而轻松修改其任意组件,例如按钮、面包屑导航、分页控件、文本字段等。
要创建主题,首先您必须使用 @aws-amplify/ui-react/server 库中的 defineComponentTheme() 函数对其进行声明。您为其命名,例如 'storage-browser',然后定位您要设计的元素。
![](https://d1.awsstatic.com/lili/hands-on/for-amazon-s3/8.ed74e1e15e09c96d4d9f0169810571161c927663.png)
如果您愿意,您甚至可以重新排列布局。例如,在代码中,您可以看到我们将所有控件的 flexDirection 设置为 'row-reverse'。
然后,您使用 createTheme() 函数(该函数使用我们之前声明的 storage-browser 主题)创建主题并应用主题。我们还会覆盖 primaryColor 并将其设置为绿色。
![](https://d1.awsstatic.com/lili/hands-on/for-amazon-s3/9.5b06db0e4c708875132bb4bd528922b21a17fb8a.png)
重新加载页面后,您应该会看到适用于 S3 的存储浏览器组件,该组件采用了更紧凑的新布局和带绿色文本的新配色方案。
![](https://d1.awsstatic.com/lili/hands-on/for-amazon-s3/10.c231b036ee7c8aa06e3b3f016c16b1caf4a946e1.png)
您基本上可以自定义 UI 界面的任何元素,包括任何显示文本,例如写有 Home 的标题等。当然,唯一的例外是有关数据的详细信息,例如桶名称和密钥。例如,您可以借此添加对不同语言的支持。
最后,如果您更愿意从头开始创建自己的 UI,您可以调用 createStorageBrowser() 函数,以编程方式为 S3 组件创建存储浏览器。它会返回 useView() 钩子,借此您可以与自己的自定义前端集成,从而完全控制外观和风格,同时利用所有相同的功能。要了解更多信息,请参阅文档,详细了解各种自定义选项及其配置方式。
结论
适用于 S3 的存储浏览器是一款高度可定制且用户友好的 AWS Amplify UI React 组件,支持最终用户安全地与 Amazon S3 上的数据进行交互。它使您可以完全控制访问规则,确保前端符合您的访问要求,同时通过界面提供出色的用户体验。您可以对界面进行样式设置,使其看起来像应用程序的自然扩展。
注意事项
兼容性 – 适用于 S3 的存储浏览器兼容所有 Amazon S3 存储类别,但 Glacier Flexible Retrieval 和 S3 Glacier Deep Archive 除外。它与 S3 Intelligent-Tiering 兼容,但不与 S3 Intelligent-Tiering Archive Access Tier 或 S3 Intelligent-Tiering Deep Archive Access Tier 兼容。
性能和耐久性 – 适用于 S3 的存储浏览器包含内置逻辑,可增强对高吞吐量数据传输的上传请求,计算上传数据的校验和(拒绝未通过耐久性检查的请求),并优化性能以缩短应用程序的加载时间。
定价 – 适用于 S3 的存储浏览器为开源,您可以将其与您的应用程序集成,无需额外付费。您只需为使用适用于 S3 的存储浏览器的基础 AWS 资源付费。
支持 – 与 S3 的任何其它功能一样,适用于 S3 的存储浏览器由 AWS Support 提供支持。拥有 Business 和 Enterprise Support 计划的客户可以全天候访问 AWS Support 工程师,以支持他们使用适用于 S3 的存储浏览器。
更多教程
快速搭建容量高达 35GB 的免费个人网盘
本教程将介绍如何搭建一个没有使用限制的免费私人网盘。
构建企业专属智能客服机器人
本文将演示如何结合多种服务,打造企业专属的智能客服。
使用生成式 AI 构建多语言问答知识库
使用多种服务,构建可汇总搜索结果的多语言知识库。
免费套餐
AWS 海外区域
拓展海外业务或个人体验
免费使用 100 余种云产品或服务, 长达 12 个月
AWS 中国区域
发展中国业务
免费使用 40 余种核心云服务产品,长达 12 个月