借助 Amazon S3 存储浏览器,将用户与应用数据无缝连接

Olawale Olaleye
难度
中级
时间
20 分钟
相关产品
上次更新时间
2024 年 12 月 6 日

介绍

现在,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

如果您的现有应用程序已经安装 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 授权模型利用前缀为授权用户配置隔离存储。

接下来,创建一个名为 StorageBrowser 的组件,该组件封装了与 Amplify Auth 的集成,以后我们可以轻松地将其拖放到页面中。务必调用 Amplify.config () 将其全部拼接在一起,并引用 amplify_outputs.json 作为参数。

有关为适用于 S3 的存储浏览器设置身份验证和授权的详细说明,请访问 S3 用户指南

将适用于 S3 的存储浏览器添加到我的应用程序
现在,组件已创建,您只需在要通过声明 <StorageBrowser/> 呈现该组件的页面中,将其添加到应用程序即可。

使用 npm run dev 来运行应用程序。加载后,导航到已添加适用于 S3 的存储浏览器的页面,您应该会看到它加载了默认布局。另请注意,它配置的路径和权限与我们在上面的 amplify/storage/resource.ts 中定义的路径和权限相同,允许用户浏览、读取、写入和删除我们设置的 S3 桶和前缀中的文件。

您可以下载文件和浏览文件夹,同时从子菜单访问管理操作,该子菜单会自动将所有不可用的操作变为灰色。

适用于 S3 的存储浏览器可自动对结果进行分页,并且可以筛选和搜索文件和文件夹,从而轻松浏览和管理数据。

所有数据访问均由配置的授权模型管控,使最终用户能够通过高度直观的界面与 S3 桶和前缀进行无缝交互,而不会影响您的安全性或合规性要求。

自定义界面

得益于灵活的设计,您可以自定义适用于 S3 的存储浏览器,以匹配您的应用程序的外观和风格。与任何其它 Amplify UI 组件一样,它默认使用您在应用程序中激活的 Amplify 主题。但是,您可以直接使用 CSS 创建自己的主题或定位元素,从而轻松修改其任意组件,例如按钮、面包屑导航、分页控件、文本字段等。

要创建主题,首先您必须使用 @aws-amplify/ui-react/server 库中的 defineComponentTheme() 函数对其进行声明。您为其命名,例如 'storage-browser',然后定位您要设计的元素。

如果您愿意,您甚至可以重新排列布局。例如,在代码中,您可以看到我们将所有控件的 flexDirection 设置为 'row-reverse'

然后,您使用 createTheme() 函数(该函数使用我们之前声明的 storage-browser 主题)创建主题并应用主题。我们还会覆盖 primaryColor 并将其设置为绿色。

重新加载页面后,您应该会看到适用于 S3 的存储浏览器组件,该组件采用了更紧凑的新布局和带绿色文本的新配色方案。

您基本上可以自定义 UI 界面的任何元素,包括任何显示文本,例如写有 Home 的标题等。当然,唯一的例外是有关数据的详细信息,例如桶名称和密钥。例如,您可以借此添加对不同语言的支持。

最后,如果您更愿意从头开始创建自己的 UI,您可以调用 createStorageBrowser() 函数,以编程方式为 S3 组件创建存储浏览器。它会返回 useView() 钩子,借此您可以与自己的自定义前端集成,从而完全控制外观和风格,同时利用所有相同的功能。要了解更多信息,请参阅文档,详细了解各种自定义选项及其配置方式

结论

适用于 S3 的存储浏览器是一款高度可定制且用户友好的 AWS Amplify UI React 组件,支持最终用户安全地与 Amazon S3 上的数据进行交互。它使您可以完全控制访问规则,确保前端符合您的访问要求,同时通过界面提供出色的用户体验。您可以对界面进行样式设置,使其看起来像应用程序的自然扩展。

注意事项

入门 – 您可以从 GitHub 页面安装适用于 S3 的存储浏览器。有关入门的更多信息,请访问 UI 文档

兼容性 – 适用于 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 个月