使用Amazon CloudFront - 分发静态内容 - 实操

创建 CloudFront 分配

当我们想使用 CloudFront 分发我们的内容时,我们需要创建一个分发。我们使用 CloudFront 分配来指定我们希望从 CloudFront 交付的内容的位置以及用于跟踪和管理其交付的配置

让我们从 AWS 管理控制台创建一个 CloudFront 分配:

使用Amazon CloudFront | 分发静态内容 | 实操

我们已将源域设置为在上一节中创建的 S3 存储桶的存储桶网站端点,并将所有其他配置保留为默认值。分发需要几分钟才能更改为enabled状态

激活后,我们可以在 CloudFront 控制台中看到 CloudFront 分配域名:

使用Amazon CloudFront | 分发静态内容 | 实操

我们现在可以使用此 CloudFront 分配域名导航到我们的网站:https://d1yda4k0ocquhm.cloudfront.net.

保护对内容的访问

在前面的部分中,我们使用了驻留在公共 S3 存储桶中的静态资产,如果用户知道 S3 存储桶 URL,则用户可以访问所有内容,从而使其不安全。CloudFront 提供了许多配置来保护对内容的访问。让我们看一下其中的一些配置:

使用原始访问身份 (OAI) 保护内容

源访问身份 (OAI) 是与我们的分配相关联的特殊 CloudFront 用户。我们可以通过更新存储桶策略来限制对 S3 存储桶的访问,以向Principal策略定义中定义的 OAI 提供读取权限,如下所示:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "2",
      "Effect": "Allow",
      "Principal": {
        "AWS": "arn:aws:iam::cloudfront:user/
               CloudFront Origin Access Identity "
       },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::/*"
    }
  ]
}

让我们创建另一个 CloudFront 分配,但这次配置为使用 OAI 访问 S3 存储桶中的内容:

使用Amazon CloudFront | 分发静态内容 | 实操

这次我们从选择框中选择了 S3 REST API 端点作为源域,而不是存储桶网站端点。在 S3 存储桶访问部分中,我们选择了选项:Yes use OAI并创建了一个 OAI:my-oai以与此分配关联。

我们还选择了在创建分配后手动更新存储桶策略的选项。

如果我们有一个 OAI,我们也可以重用一个 OAI,而不是创建一个新的 OAI。一个 AWS 账户最多可以有 100 个 CloudFront 源访问身份 (OAI)。因为,我们可以将一个 OAI 添加到多个 CloudFront 分配,所以在大多数情况下,一个 AWS 账户的一个 OAI 就足够了。

如果我们在创建分配期间没有创建 OAI 并将其添加到 CloudFront 分配中,我们可以稍后创建它并使用 CloudFront 控制台或 CloudFront API 将其添加到分配中。

创建分发后,让我们更新 S3 存储桶的存储桶策略,如下所示:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "1",
      "Effect": "Allow",
      "Principal": {
        "AWS": "arn:aws:iam::cloudfront:user/
                CloudFront Origin Access Identity E32V87I09SD18I"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::io.myapp/*"
    }
  ]
}

此存储桶策略授予具有 id: 的 CloudFront 源访问身份 (OAI)E32V87I09SD18I获取(读取)我们的 Amazon S3 存储桶中的所有对象的权限。我们已将 设置为Principal可以从AWS 管理控制台找到的 OAI id 。

我们还禁用了对 S3 存储桶和静态 Web 托管属性的公共访问。

CloudFront 分配部署并激活后,我们可以使用 CloudFront 分配域名导航到我们的网站https://d4l1ajcygy8jp.cloudfront.net/index.html:

使用Amazon CloudFront | 分发静态内容 | 实操

CloudFront 用于保护内容的其他一些配置包括:

使用 HTTPS 保护

在我们之前的分配设置中,我们使用了 CloudFront 分配给我们的分配的域名,例如dxxxxxxabcdef8.cloudfront.net,并且可以使用 HTTPS 协议导航到我们的网站。在此配置中,CloudFront 提供 SSL/TLS 证书

我们还可以使用我们的域名,例如mydomain.com,并使用 AWS Certificate Manager (ACM) 提供的 SSL/TLS 证书,或者将第三方证书颁发机构的证书导入 ACM 或 IAM 证书存储。配置步骤请参考官方文档。

当我们从 CloudFront 访问内容时,请求通过两个分支:

使用Amazon CloudFront | 分发静态内容 | 实操

  1. CloudFront 的查看器
  2. CloudFront 到源服务器

我们可以选择通过使用 HTTPS 协议加密通信来保护一条或两条腿

我们可以将 CloudFront 配置为需要在查看器和 CloudFront 之间使用 HTTPS,方法是将 更改Viewer Protocol Policy为Redirect HTTP to HTTPS或HTTPS Only。

使用Amazon CloudFront | 分发静态内容 | 实操

当我们的源是 S3 存储桶时,我们使用 HTTPS 与 CloudFront 通信的选项取决于存储桶配置。如果我们的 S3 存储桶配置为网站终端节点,我们无法将 CloudFront 配置为使用 HTTPS 与我们的源通信,因为 S3 在该配置中不支持 HTTPS 连接

当我们的源是支持 HTTPS 通信的 S3 存储桶时,CloudFront 始终使用查看器用于发送请求的协议将请求转发到 S3。

基于地理位置限制内容

我们可以使用地理限制来阻止特定地理位置的用户访问通过 CloudFront 分配分发的内容。我们可以使用 CloudFront 地理限制功能或使用第三方地理定位服务。

使用Amazon CloudFront | 分发静态内容 | 实操

在这里,我们正在配置Allow list选项以允许查看者仅在他们位于允许列表中的批准国家之一时访问我们的内容。或者,Block list如果观众位于我们的黑名单上的被禁国家之一,我们可以使用该选项阻止观众访问我们的内容。

使用 AWS WAF(Web 应用程序防火墙)监控请求

AWS WAF 是一个 Web 应用程序防火墙,用于监控转发到 CloudFront 的 HTTP 和 HTTPS 请求。我们可以指定不同的条件,例如查询字符串的值或请求源自的 IP 地址,CloudFront 根据这些条件使用请求的内容或 HTTP 状态代码403(禁止)响应请求。

使用Amazon CloudFront | 分发静态内容 | 实操

我们可以创建 AWS WAF Web 访问控制列表 (Web ACL),并在创建或更新分配时将 CloudFront 分配与 Web ACL 关联。

结论

在本文中,我们将 Amazon CloudFront 配置为分发存储在 S3 存储桶中的静态内容。以下是我们快速参考的步骤摘要:

  1. 我们创建了一个具有公共访问权限的 S3 存储桶。
  2. 我们在 S3 存储桶上启用静态 Web 托管并获得存储桶网站端点。
  3. 我们添加了一个 S3 存储桶策略以允许所有用户访问 S3 存储桶的内容 ( *)。
  4. 我们上传了使用 React 库构建的单页应用程序 (SPA) 的 JavaScript、图像、HTML 和 CSS 文件形式的一些静态内容。
  5. 通过此设置,我们可以使用 S3 存储桶网站端点在浏览器中查看网站。
  6. 我们最终创建了一个 CloudFront 分配并将 S3 存储桶网站端点配置为源。
  7. 部署 CloudFront 分配后,我们可以使用 CloudFront URL 在浏览器中查看该网站。
  8. 接下来,我们通过删除公共访问来保护 S3 存储桶。
  9. 我们在 S3 存储桶上禁用了静态 Web 托管。
  10. 我们使用 S3 Rest API 端点创建了另一个 CloudFront 分配。
  11. 我们创建了一个原始访问身份 (OAI) 并将其与存储桶相关联。
  12. 我们更新了 S3 存储桶策略以仅允许访问来自 CloudFront 的 OAI。
  13. 部署此 CloudFront 分配后,我们可以使用 CloudFront URL 在浏览器中查看该网站。
发表评论
留言与评论(共有 0 条评论) “”
   
验证码:

相关文章

推荐文章