安全静态网站入门 - Amazon CloudFront
AWS 文档中描述的 AWS 服务或功能可能因区域而异。要查看适用于中国区域的差异,请参阅中国的 AWS 服务入门

如果我们为英文版本指南提供翻译,那么如果存在任何冲突,将以英文版本指南为准。在提供翻译时使用机器翻译。

安全静态网站入门

您可以通过使用本主题中介绍的解决方案为您的域名创建安全静态网站来开始使用 Amazon CloudFront。静态网站 仅使用静态文件(如 HTML、CSS、JavaScript、图像和视频),并且不需要服务器或服务器端处理。使用此解决方案,您的网站将获得以下好处:

  • 使用 Amazon Simple Storage Service (Amazon S3) 的持久存储 – 此解决方案创建一个 Amazon S3 存储桶来托管静态网站的内容。要更新您的网站,只需将新文件上传到 S3 存储桶。

  • 通过 Amazon CloudFront 内容分发网络加快速度 – 此解决方案创建一个 CloudFront 分配,以便以低延迟将您的网站提供给查看器。此分配配置了来源访问标识,以确保网站只能通过 CloudFront(而不是直接从 S3)访问。

  • 由 HTTPS 和其他安全标头保护 – 此解决方案在 AWS Certificate Manager (ACM) 中创建 SSL/TLS 证书,并将其附加到 CloudFront 分配。此证书使分配能够使用 HTTPS 安全地为您的域名网站提供服务。

    此解决方案还使用 Lambda@Edge 向每个服务器响应添加安全标头。安全标头是 Web 服务器响应中的一组标头,它们告诉 Web 浏览器采取额外的安全预防措施。有关详细信息,请参阅本博客邮寄: 使用Lambda@Edge和AmazonCloudFront添加HTTP安全标头.

  • 使用 AWS CloudFormation 进行配置和部署 – 此解决方案使用 AWS CloudFormation 模板来设置所有组件,因此,您可以更多地关注网站的内容,而更少地关注配置组件。

这个解决方案在 GitHub 上是开源的。要查看代码、提交拉取请求或开设问题,请转到 https://github.com/aws-samples/amazon-cloudfront-secure-static-site

解决方案概述

下图显示此静态网站解决方案的工作原理的概述:


                安全静态网站概览图 CloudFront
  1. 查看器在 www.example.com 上请求访问网站。

  2. 如果缓存请求的对象,则 CloudFront 将对象从其缓存返回给查看器。

  3. 如果对象不在 CloudFront 的缓存中,则 CloudFront 从源(S3 存储桶)请求对象。

  4. S3 将对象返回到 CloudFront,这将触发 Lambda@Edge 源响应事件

  5. 对象(包括由 Lambda@Edge 函数添加的安全标头)被添加到 CloudFront 的缓存中。

  6. (未显示)对象将返回给查看器。对去往同一 CloudFront 边缘站点的对象的后续请求将从 CloudFront 缓存中提供服务。

部署解决方案

要部署此安全静态网站解决方案,您可以从以下任一选项中进行选择:

  • 使用 AWS CloudFormation 控制台部署具有默认内容的解决方案,然后将您的网站内容上传到 Amazon S3。

  • 将解决方案克隆到您的计算机以添加您的网站内容。然后,使用 AWS Command Line Interface (AWS CLI) 部署解决方案。

Prerequisites

要使用此解决方案,您必须具有以下先决条件:

  • 指向 Amazon Route 53 托管区域的注册域名(例如 example.com)。托管区域必须位于您部署此解决方案的同一 AWS 账户中。如果您没有已注册的域名,可以向 Route 53 注册一个。如果您有注册的域名,但它未指向 Route 53 托管区域,请将 Route 53 配置为您的 DNS 服务

  • AWS Identity and Access Management (IAM) 启动创建 IAM 角色的 CloudFormation 模板的权限,以及在解决方案中创建所有 AWS 资源的权限。

使用此解决方案时产生的费用由您负责。有关成本的更多信息,请参阅每项 AWS 服务的定价页面

使用 AWS CloudFormation 控制台

使用 CloudFormation 控制台进行部署

  1. 选择在 Launch on AWS (在 AWS 上启动) 以在 AWS CloudFormation 控制台中打开此解决方案。如有必要,请登录您的 AWS 账户。

    
                            在AWS上启动按钮

  2. 将在 AWS CloudFormation 控制台中打开 Create stack (创建堆栈) 向导,其中包含指定此解决方案的 CloudFormation 模板的预填充字段。

    在页面底部,选择 Next

  3. Specify stack details (指定堆栈详细信息) 页面上,输入以下字段的值:

    • SubDomain (子域名) – 输入要用于您的网站的子域名。例如,如果子域是 www,您的网站可在 www*.example.com (将 example.com 替换为您的域名,如以下项目符号中所述。)

    • 域名 – 输入域名,例如 example.com此域必须指向 Route 53 托管区域。

    在完成后,选择下一步

  4. (可选)在 Configure stack options (配置堆栈选项) 页面上,添加标签和其他堆栈选项

    在完成后,选择下一步

  5. Review (审核) 页面上,滚动到页面底部,然后选择 Capabilities (功能) 部分中的两个框。这些功能允许 AWS CloudFormation 创建允许访问堆栈资源并动态命名这些资源的 IAM 角色。

  6. 选择创建堆栈

  7. 等待 堆栈完成创建。堆栈会创建一些嵌套堆栈,并且可能需要几分钟才能完成。完成后,Status (状态) 将更改为 CREATE_COMPLETE

    当状态为 创建_完成,转到https://www.example.com 要查看您的网站(请将www.example.com替换为步骤3中指定的子域名和域名)。您应该看到网站的默认内容:

    
                            此解决方案的静态网站默认内容。它说: “我是一个静态网站!”

将网站的默认内容替换为您自己的内容

  1. 通过以下网址打开 Amazon S3 控制台:https://console.amazonaws.cn/s3/

  2. 选择名称以 amazon-cloudfront-secure-static-site-s3bucketroot- 开头的存储桶。

    注意

    请确保选择名称中包含 s3bucketroot 而不是 s3bucketlogs 的存储桶。名称中包含 s3bucketroot 的存储桶包含网站内容。具有 s3bucketlogs 的存储桶只包含日志文件。

  3. 删除网站的默认内容,然后上传您自己的内容。

    注意

    如果您查看了您的网站以及此解决方案的默认内容,那么某些默认内容可能会缓存在 CloudFront 边缘站点中。要确保查看器看到更新后的网站内容,请使文件 无效,以便从 CloudFront 边缘站点删除缓存的副本。有关更多信息,请参阅 使文件失效。)

当地克隆解决方案

先决条件:

要在部署此解决方案之前添加网站内容,您必须在本地打包解决方案的构件,这需要 Node.js 和 npm。有关更多信息,请参阅 https://www.npmjs.com/get-npm。)

添加网站内容并部署解决方案

  1. https://github.com/aws-samples/amazon-cloudfront-secure-static-site克隆或下载解决方案。克隆或下载后,打开命令提示符或终端并导航到 amazon-cloudfront-secure-static-site 文件夹。

  2. 运行以下命令来安装并打包解决方案的构件:

    make package-function
  3. 将网站的内容复制到 www 文件夹中,覆盖默认网站内容。

  4. 运行以下 AWS CLI 命令创建 Amazon S3 存储桶以存储解决方案的构件。Replace example-bucket-for-artifacts 使用自己的桶名称。

    aws s3 mb s3://example-bucket-for-artifacts --region us-east-1
  5. 运行以下 AWS CLI 命令将解决方案的构件打包为 AWS CloudFormation 模板。Replace example-bucket-for-artifacts 在上一步中创建的桶名称。

    aws cloudformation package \ --region us-east-1 --template-file templates/main.yaml \ --s3-bucket example-bucket-for-artifacts \ --output-template-file packaged.template
  6. 运行以下命令以使用 AWS CloudFormation 部署解决方案,同时替换以下值:

    • your-CloudFormation-stack-name – 替换为 AWS CloudFormation 堆栈。

    • example.com – 用域名替换。此域必须指向同一 AWS 账户中的 Route 53 托管区域。

    • www – 替换为您的网站使用的子域。例如,如果子域名为 www,则您的网站在 www.example.com 上可用。

    aws cloudformation deploy \ --region us-east-1 --stack-name your-CloudFormation-stack-name \ --template-file packaged.template \ --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \ --parameter-overrides DomainName=example.com SubDomain=www
  7. 等待 AWS CloudFormation 堆栈完成创建。堆栈会创建一些嵌套堆栈,并且可能需要几分钟才能完成。完成后,Status (状态) 将更改为 CREATE_COMPLETE

    当状态更改为 CREATE_COMPLETE 时,请转到 https://www.example.com 以查看您的网站(将 www.example.com 替换为您在前面步骤中指定的子域名和域名)。您应该看到您网站的内容。

查找访问日志

此解决方案为 CloudFront 分配启用访问日志。完成以下步骤以查找此分配的访问日志。

查找分配的访问日志

  1. 通过以下网址打开 Amazon S3 控制台:https://console.amazonaws.cn/s3/

  2. 选择名称以 amazon-cloudfront-secure-static-site-s3bucketlogs- 开头的存储桶。

    注意

    请确保选择名称中包含 s3bucketlogs 而不是 s3bucketroot 的存储桶。名称中具有 s3bucketlogs 的存储桶包含日志文件。带有 s3bucketroot 的存储桶包含网站内容。

  3. 名为 cdn 的文件夹包含 CloudFront 访问日志。