Using Open Data with Amazon S3

目标

1.创建 Amazon S3 存储桶。
2.将对象上传到 Amazon S3。
3.创建存储桶策略来设置存储桶的权限。
4.为存储桶创建跨源资源共享 (CORS) 配置策略。
5.为静态网站托管配置存储桶。
6.使用 JavaScript 在静态网页上显示存储桶的内容。

要打开实验，请选择 Open Console（打开控制台）。

  • 本实验中使用的服务 Amazon Simple Storage Service (Amazon S3) Amazon Simple Storage Service (Amazon S3) 是云中安全、可靠且高度可扩展的对象存储，通常用于备份和存储、应用程序或媒体托管、高流量网站托管或软件分发。

  • 要充分利用 Amazon S3，你需要了解几个简单的概念： Amazon S3 将数据以对象的形式存储在存储桶中。对象由文件和描述该文件的任何元数据（可选）组成。 要在 Amazon S3 中存储对象，你需要将其上传到存储桶。上传对象时，你可以设置对象和任何元数据的权限。 存储桶是存储对象的容器。你可以有一个或多个存储桶。对于每个存储桶，你可以： 控制对存储桶的访问权限，定义谁可以在存储桶中创建、删除和列出对象。 查看存储桶及其对象的访问日志。 选择 Amazon S3 存储存储桶及其内容所在的地理区域。 你可以创建文件夹以将存储桶中的对象分组。你还可以嵌套文件夹（在文件夹中创建文件夹）。如果你用过 Amazon S3 API 或其他实用程序，则可以参阅使用文件夹在 Amazon S3 控制台中组织对象，学习一些有关如何对文件夹应用其他分组惯例的重要知识。 在 Amazon S3 上发布数据 假设你有个数据集，想要对外共享。如果你没有 Web 服务器，会如何共享？如果数据集非常小，你可以通过电子邮件发送给他人或通过文件共享服务使其可用。但如果有许多数据，则你需要使用更复杂的方式。 幸运的是，Amazon S3 提供了一种非常灵活的解决方案，可以随时在 Web 上的任何位置存储和检索任意数量的数据。Amazon S3 就像用于存储数据的 Web 服务器，但不需要你维护 Web 服务器或为其付费。在 Amazon S3 上存储数据时，你只需支付数据存储以及任何请求和数据传输的费用。 Amazon S3 上提供的数据文件可以通过简单的 HTTP 终端节点进行访问，这使人们能够以编程方式轻松访问。在 Amazon S3 上发布数据还便于使用 Amazon Web Services 的计算和数据分析产品（如 Amazon EC2 或 Amazon Redshift）进行分析。

我现在向你展示一种使用 Amazon S3 使任何人都能通过 Web 浏览器访问数据的方法。

本实验中未使用的 AWS 服务 本实验中使用的 AWS 服务功能仅限于实验所需的功能。如果访问其他服务或执行本实验指南中未描述的操作，可能会出现错误。

任务 1：创建 Amazon S3 存储桶

Amazon S3 中的每个对象都存储在存储桶中。

在本任务中，你将在 Amazon S3 中创建存储桶来存储数据和网站。

Region（区域）：从下拉菜单中选择 US East (N. Virginia) us-east-1（美国东部 (弗吉尼亚北部) us-east-1）。

在 AWS 管理控制台顶部的搜索栏中，搜索并选择 S3。

选择 Create bucket（创建存储桶），然后进行以下配置：

Bucket name（存储桶名称）：在文本框中输入 websiteNUMBER。 使用随机数字替换 NUMBER。 将存储桶的名称复制到文本编辑器中。 在 Object Ownership（对象所有权）部分，进行以下配置： ACLs enabled（ACL 已启用） Object writer（对象写入器） 选择 Create bucket（创建存储桶）。 注意：每个 Amazon S3 存储桶必须具有唯一的名称。

Amazon S3 创建存储桶后，控制台将在存储桶列表中显示存储桶名称。

任务 2：上传文件

现在，你可以将文件上传到存储桶。在本任务中，你将上传一组示例文件。

下载以下文件：sample-files.zip(https://us-west-2-tcprod.s3.us-west-2.amazonaws.com/courses/spl-60/v2.2.10.prod-d961811d/scripts/sample-files.zip)

找到你下载的 sample-files.zip 文件，然后解压。这将创建一个包含多个文件的文件夹。

在 Amazon S3 控制台中，选择你在上一任务中创建的 websiteNUMBER 存储桶的链接。

选择 Upload（上传）。

选择 Add files（添加文件）。

此时将显示一个文件选择对话框。 浏览到通过 zip 格式文件创建的 sample-files 文件夹。

选中所有文件，然后选择 Open（打开）（适用于 Windows）或 Open（打开）（适用于 Mac）。

选择 Upload（上传）。

页面底部的状态栏会显示上传进度。验证文件上传成功。

任务 3：授予对存储桶的访问权限

现在，文件已作为对象上传到 Amazon S3 存储桶中。使用“对象”一词是因为文件存储在文件系统中，但 Amazon S3 实际上是对象存储系统。虽然它的行为类似于计算机上的文件系统，但实际上它具有更多的功能。

默认情况下，存储在 Amazon S3 中的对象是私有的。

  • 有关对象的信息将出现在屏幕上，包括： Etag：MD5 校验和，可用于确认对象是否已正确上传。 Storage class（存储类）：表示存储对象的持久性和成本。 Server side encryption（服务器端加密）：对象存储在 Amazon S3 上时是否加密。 Size（大小）：存储的对象的大小。 Object URL（对象 URL）：指向互联网上对象的链接。请注意，该 URL 包含存储桶的名称。

打开 websiteNUMBER - S3 bucket（websiteNUMBER – S3 存储桶）的浏览器标签页。

在页面顶部，选择 Buckets（存储桶）返回到存储桶列表。

选择 websiteNUMBER 存储桶的链接，查看其详细信息。

选择 Permissions（权限）选项卡。

导航到 Block public access (bucket settings)（屏蔽公共访问权限 (存储桶设置)）部分，选择 Edit（编辑）。

取消选中 Block all public access（阻止所有公开访问）选项，然后将所有其他选项保留未选中状态。

安全：请注意，各个选项均保持未选中状态。取消选中所有公开访问选项时，你随后必须根据你的情况和安全目标选择各个选项。在生产环境中，建议尽可能设置最低允许权限。

选择 Save changes（保存更改）。

此时将打开一个对话框，要求你确认更改。在文本框中输入 confirm，然后选择 Confirm（确认）。

导航到 Bucket policy（存储桶策略）部分，然后选择 Edit（编辑）。

此时将打开 Bucket policy editor（存储桶策略编辑器）面板，你可以在相应字段中输入存储桶的策略。

复制编辑：将以下策略复制并粘贴到 Bucket policy editor（存储桶策略编辑器）中（但尚未保存）：

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

  • 在该策略中，将 BUCKET 替换为存储桶的名称。将 /* 保留在存储桶名称之后！ 注：* 是通配符，因此在存储桶名称末尾添加 /* 会将此策略应用于存储桶中的所有对象。 通过添加特定文件夹的路径，你可以将策略限制到该文件夹，而不是公开整个存储桶。例如：“arn:aws:s3:::BUCKET/FOLDER/” 该策略允许任何人（由委托人“”表示）从存储桶下载对象 (GetObject)。 选择 Save changes（保存更改）保存新的存储桶策略。 提醒：如果你在保存时收到错误消息，这可能是因为与存储桶名称不匹配。确保 Resource（资源）行中的存储桶名称与你之前创建的存储桶的名称（显示在窗口顶部）匹配。

你现在可以测试对象是否可以访问。

将 Object URL（对象 URL）链接复制到剪贴板。

打开一个新的浏览器标签页，粘贴 Object URL（对象 URL）链接，然后按 Enter 键。

你将打开文件

返回到打开 websiteNUMBER - S3 bucket（websiteNUMBER – S3 存储桶）页面的浏览器标签页。

任务 4：配置静态网站托管

  • Amazon S3 还能够为静态网站托管配置存储桶，这让你可以执行以下操作： 定义在用户访问网站但未指定特定 HTML 页面时应显示的默认页面。 定义在用户导航到不存在的页面时显示的错误页面。 定义将用户转到其他位置的其他页面的重定向。

在本任务中，你将激活静态网站托管并将其配置为使用上传中包含的 index.html 和 error.html 页面。

选择页面顶部的 Properties（属性）选项卡。

向下滚动至 Static website hosting（静态网站托管）部分，然后选择 Edit（编辑）。

在 Edit static website hosting（编辑静态网站托管）页面上，选择 Enable（启用），然后进行以下配置：

Index document（索引文档）：在文本框中输入 index.html。（你必须输入这些值，即使它们已经显示为提示。） Error document（错误文档）：在文本框中输入 error.html。 选择 Save changes（保存更改）。

再次导航到 Static website hosting（静态网站托管）部分，复制 Bucket website endpoint（存储桶网站终端节点）链接。

注意：这是指向新网站的链接。它应如下所示：

http://website-XXX.s3-website-us-west-2.amazonaws.com 打开一个新的浏览器标签页，粘贴 Bucket website endpoint（存储桶网站终端节点）链接，然后按 Enter 键。 index.html 页面将在新标签页中打开。

提醒：你还将在该页面上看到错误消息。这没关系！你还要进行一些配置。

预期输出：

alt text

在错误消息窗口中，选择 OK（确定）。 接着，测试 error.html 页面。

在浏览器的地址栏中，在先前 URL 的末尾键入额外的字符以转到不存在的页面。 例如：

alt text

http://website-XXX.s3-website-us-west-2.amazonaws.com/wrong 注意：error.html 页面将显示一条消息 We’re sorry…（抱歉…）。此错误页面也称为 404 页面，因为错误 404 表示未找到页面。

预期输出：

你现在需要完成最后几个网站配置步骤！

任务完成：你已成功在 S3 存储桶上配置静态网站托管。

任务 5：启用跨源资源共享

你还能以编程方式访问 Amazon S3 存储桶。这允许存储桶中的对象在 Web 页面中显示，而用户甚至不知道这些对象来自 Amazon S3。

为了演示这一概念，你上传的 index.html 页面将使用 JavaScript 动态读取存储桶的内容并向访客显示对象列表。为此，你必须启用跨源资源共享 (CORS)。浏览器通常会阻止 JavaScript 允许请求读取存储桶的内容，但通过 CORS，你可以将存储桶配置为明确允许 JavaScript 执行此操作。

在本任务中，你将定义 CORS 配置以允许对存储桶进行跨源请求。CORS 配置是 XML 文档，其中包含可标识允许访问存储桶的源的规则、它支持对每个源执行的操作（HTTP 方法）以及其他特定于操作的信息。

注意：跨源资源共享 (CORS) 为在一个域中加载的客户端 Web 应用程序定义了一种与另一个域中的资源进行交互的方法。借助 CORS 支持，你可以使用 Amazon S3 构建丰富的客户端 Web 应用程序，并有选择地允许跨源访问 Amazon S3 资源。

将 We’re Sorry…（抱歉…）浏览器标签页保持打开状态。你很快还会用到它。

切换回打开 websiteNUMBER - S3 bucket（websiteNUMBER – S3 存储桶）页面的浏览器标签页。

向上滚动到页面顶部，然后选择 Permissions（权限）选项卡。

导航到 Cross-origin resource sharing (CORS)（跨源资源共享 (CORS)）部分，然后选择 Edit（编辑）。

复制编辑：复制以下策略，然后将其粘贴到编辑器中：

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "MaxAgeSeconds": 3000
    }
]

安全：这是非常基本和宽松的 CORS 配置，但 Amazon S3 支持广泛的配置选项。建议你始终尽可能使用最宽松的策略。

选择 Save changes（保存更改）。 还差最后一个步骤，即允许以编程方式列出存储桶。

导航到 Access control list (ACL)（访问控制列表 (ACL)）部分，然后选择 Edit（编辑）。

对于 Everyone (public access)（所有人 (公有访问权限)），选择 List（列出）。

导航到页面底部，然后选择 I understand the effects of these changes on my objects and buckets（我了解这些更改对我的对象和存储桶的影响）。

选择 Save changes（保存更改）。

提醒：Access control list (ACL)（访问控制列表 (ACL)）部分将会出现一条警告：AWS doesn’t recommend granting access to the Everyone grantee（AWS 不建议授予每个被授与者访问权限）。这在意料之中，因为你有意添加了公开访问权限。

你现在可以测试应用程序！

返回到 Web 浏览器中的 Error - 404 Not Found（错误 – 404 未找到）标签页，然后选择 try visiting our home page（尝试访问我们的主页）链接以返回到应用程序。 注意：如果你找不到该标签页，请选择 Properties（属性）选项卡的 Static website hosting（静态网站托管）部分中显示的 Bucket website endpoint（存储桶网站终端节点）URL。

预期输出：

alt text

注意：该页面包含应用程序的文档，页面底部列出了存储在 Amazon S3 存储桶中的对象。

任务完成：你已成功为 S3 存储桶启用跨源资源共享 (CORS)。

了解网站

你可以随时查看 index.html 文件的源代码。这是静态 HTML 文件，但是可以通过使用多个 JavaScript 插件和自定义 JavaScript 来显示 HTML 表中 Amazon S3 存储桶的内容，使其变为动态文件。JavaScript 包含了有助于你了解应用程序的注释。

  • 虽然本实验不要求你了解如何编写 JavaScript、HTML 或 CSS，但下面列出了 index.html 文件有趣的几个方面。 The AWS SDK for JavaScript index.html 页面在浏览器中使用 AWS SDK for JavaScript 来动态查询 S3 存储桶的内容。 JavaScript SDK 允许轻松地在 S3 存储桶中列出对象。该代码会执行以下操作：

  • 链接到 AWS JavaScript SDK。

  • 使用默认的 AWS 区域 us-west-2 配置 SDK。

  • 创建并初始化 Amazon S3 对象。

  • 通过 Amazon S3 对象，对 Amazon S3 进行未经身份验证的 listObjects 调用。

  • 聚合生成的对象列表。

  • 在有更多结果时按需反复调用 listObjects。 为了简单起见，该代码在查询存储桶时不会要求提供凭证，而是会对 Amazon S3 API 进行未经身份验证的调用。也就是说，这仅适用于公开可读的存储桶。因此，你需要设置存储桶的权限，以允许任何人列出存储桶的内容。

上述最后一点需要注意，因为 listObjects 每次仅会返回 1,000 个对象。因此，JavaScript 代码将持续查询存储桶，以查看是否有更多对象要检索。该代码已在包含 10,000 多个对象的存储桶上进行测试，没有遇到任何问题，但如果你尝试显示包含大量对象（例如，超过一百万个对象）的存储桶的内容，则可能会使浏览器超载。

JavaScript 每次只查询某个存储桶级别的对象。也就是说，它仅查找存储桶根目录中的对象，但不查找文件夹中的对象，除非你选择文件夹。

  • 其他功能 index.html 页面的运作依赖于以下这些库：

    JQuery这是一种常见的 JavaScript 库，用于创建基于浏览器的应用程序

    Bootstrap用于 CSS 样式

    Font Awesome用于矢量图标

    DataTables用于表组织、筛选和排序

    Bootbox用于弹出对话框和提醒，与 Bootstrap 配合使用

Moment用于时间格式（例如“2 天前”、“去年”）