AWS JavaScript S3 探索者 - 简易浏览S3公共存储桶

AWS JavaScript S3 Explorer 是一个专为Web浏览器设计的JavaScript应用程序，利用AWS的JavaScript SDK和S3 API，使公共S3桶的内容易于浏览。这一工具旨在提升通过Amazon S3分享公共对象和数据的便利性。

该应用的核心在于一个名为index.html的文件，当访客访问这个页面时，会被提示输入一个Amazon S3桶名。一旦提供了桶名，页面上将即时显示桶内的内容。

重要提醒：除非您明确希望所有互联网用户都能读取您的S3桶，否则请确保您的桶是私有的。如果需要支持私有S3桶，请访问S3 Explorer (v2 alpha)页面，并查看Amazon S3安全最佳实践。

截图展示

1. 默认视图：

2. 文件夹内容全览：

3. 桶内全部对象：

权限设置与跨域资源共享（CORS）

为了使JavaScript能显示Amazon S3桶的内容，桶需允许任何人阅读，并可能需要正确的跨域资源共享（CORS）配置。在Amazon S3控制台中，选择你的桶，然后点击“权限”标签页，再点击“桶策略”。

设置桶权限

要分享Amazon S3桶的内容，你需要创建一个策略，让任何人都能看到和获取桶内的内容。在S3控制台上，转到选定的桶，“权限” -> “桶策略”，在“桶策略编辑器”面板中输入以下策略，但记得将“BUCKET-NAME”替换为你的桶名，然后点击“保存”。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicListGet",
      "Effect": "Allow",
      "Principal": "*",
      "Action": [
        "s3:List*",
        "s3:Get*"
      ],
      "Resource": [
        "arn:aws:s3:::BUCKET-NAME",
        "arn:aws:s3:::BUCKET-NAME/*"
      ]
    }
  ]
}

注意：以上策略会允许任何人列出你的桶内容和获取桶中的任何文件，但不会允许他们上传、修改或删除桶中的文件。

如果你希望限制可以访问桶内容的源IP，可以通过在桶策略中添加基于IP地址的条件来实现。

CORS配置

如果决定使用路径风格URL (https://s3.amazonaws.com/BUCKET-NAME/index.html) 访问index.html文件，则可能需要启用CORS。因为网页从s3.amazonaws.com加载，而AWS JavaScript SDK向BUCKET-NAME.s3.amazonaws.com发出请求。

出于安全考虑，浏览器通常阻止JavaScript代码访问与其源无关的URL（如你的桶），但借助CORS，您可以配置你的桶允许JavaScript这样做。

要在S3控制台上为桶启用跨域请求，你需要创建一个CORS配置，这是一个JSON文档，包含了定义允许的源、对每个源支持的操作以及操作特定信息的规则。

显示选项

该应用程序允许访客通过其文件夹或列出桶内所有对象的方式查看内容。默认视图是按文件夹，但用户可以在页面右上角点击“桶”以显示桶内所有对象。请注意，点击“桶”会加载桶中的所有对象。如果桶包含大量对象，这可能会导致浏览器负载过大。我们已成功测试了包含超过30,000个对象的桶，但是过多的对象加载可能导致较差的用户体验。

集成CloudFront支持

现在你可以将此应用与CloudFront分发结合使用。为了启用CloudFront支持，应用程序需要在桶根目录下有一个公共文件“s3_id.txt”，文件值应为完整的S3桶名，例如：“foobucket.s3.amazonaws.com”。

项目特点

• 简单易用：只需提供桶名即可立即查看内容。
• 安全可控：可配置权限，保证数据安全。
• 跨域兼容：支持CORS配置，允许浏览器访问。
• 显示灵活：两种视图模式，按需切换。
• 集成性强：可配合CloudFront进行分发。

使用AWS JavaScript S3 Explorer，您可以轻松地管理和共享公开的S3资源，无需复杂的后端逻辑，直接在前端完成一切。无论是用于数据分析展示还是数据共享，都是一个值得尝试的高效工具。