一名云计算从业者的思考

大家都在搜：

热搜词1 热搜词2 热搜词3

当前位置：首页 > 日常方案 > 正文内容

使用Amazon S3与CloudFront搭建静态网站，确保内容仅通过CDN访问

anycodes7个月前 (07-11)日常方案3300

在当今的数字时代，静态网站因其简单性、安全性和高性能而越来越受欢迎。Amazon S3(Simple Storage Service)结合CloudFront CDN提供了一种经济高效的方式来托管静态网站，同时确保最佳的全球性能和安全性。本文将指导您如何使用Amazon S3部署静态网站，并配置CloudFront CDN，确保网站内容只能通过CDN访问，无法直接通过S3 URL访问。

## 为什么要限制直接访问S3桶？

在配置静态网站时，限制对S3桶的直接访问有几个重要原因：

1. **安全性增强**：限制直接访问可减少潜在的攻击面
2. **成本优化**：通过CloudFront访问可减少S3的请求成本
3. **性能优化**：CloudFront提供全球边缘位置，减少延迟
4. **高级功能**：CloudFront提供HTTPS、HTTP/2支持等S3不直接支持的功能

## 解决方案架构

我们将实现以下架构：

1. 将静态网站内容存储在S3桶中
2. 创建CloudFront分配，以S3桶为源
3. 配置CloudFront使用Origin Access Control (OAC)访问S3
4. 修改S3桶策略，只允许CloudFront分配访问

## 步骤一：创建S3桶并上传网站内容

首先，我们需要创建一个S3桶并上传网站内容：

1. 登录AWS管理控制台并打开[Amazon S3控制台](https://console.aws.amazon.com/s3/)
2. 点击"创建桶"
![](https://www.runor.cn/zb_users/upload/2025/07/202507111926089296662.png)
3. 输入桶名称
![](https://www.runor.cn/zb_users/upload/2025/07/202507111926394470160.png)
4. 保持"阻止所有公共访问"设置为开启状态
5. 创建桶后，上传您的网站文件（HTML、CSS、JavaScript等）
![](https://www.runor.cn/zb_users/upload/2025/07/202507111928484789767.png)

> **注意**：与传统的S3静态网站托管不同，我们不需要启用"静态网站托管"功能，因为我们将通过CloudFront访问内容。

## 步骤二：创建CloudFront分配

接下来，我们需要创建CloudFront分配：

1. 打开[CloudFront控制台](https://console.aws.amazon.com/cloudfront/)
2. 点击"创建分配"
![](https://www.runor.cn/zb_users/upload/2025/07/202507111929394437036.png)
3. 对于"源域"，选择您刚创建的S3桶
![](https://www.runor.cn/zb_users/upload/2025/07/202507111930435823912.png)
![](https://www.runor.cn/zb_users/upload/2025/07/202507111930595630588.png)
4. 在"源访问"部分，选择"源访问控制设置(推荐)"
![](https://www.runor.cn/zb_users/upload/2025/07/202507111931134456697.png)
5. 在"Web应用程序防火墙(WAF)"部分，根据需要选择适当的安全选项
![](https://www.runor.cn/zb_users/upload/2025/07/202507111931336290136.png)
6. 点击"创建分配"
![](https://www.runor.cn/zb_users/upload/2025/07/202507111932031285679.png)

## 步骤三：配置S3桶策略以限制访问

现在，我们需要更新S3桶策略，以仅允许CloudFront分配访问S3桶：

1. 返回S3控制台，选择您的桶
2. 点击"权限"选项卡
3. 在"桶策略"部分，点击"编辑"
4. 添加以下策略（记得替换占位符值）：

```json
{
  "Version": "2012-10-17",
  "Statement": {
    "Sid": "AllowCloudFrontServicePrincipalReadOnly",
    "Effect": "Allow",
    "Principal": {
      "Service": "cloudfront.amazonaws.com"
    },
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*",
    "Condition": {
      "StringEquals": {
        "AWS:SourceArn": "arn:aws:cloudfront::YOUR-ACCOUNT-ID:distribution/YOUR-DISTRIBUTION-ID"
      }
    }
  }
}
```

例如：
![](https://www.runor.cn/zb_users/upload/2025/07/202507111935033462261.png)

5. 点击"保存更改"

此策略确保只有您的CloudFront分配可以访问S3桶中的对象。"Condition"元素是关键，它确保即使有人知道您的S3 URL，也无法直接访问内容。

## 步骤四：测试配置

配置完成后，应该测试以确保一切正常工作：

1. 尝试通过CloudFront域名访问您的网站（例如：https://dxxxxx.cloudfront.net）
2. 尝试直接通过S3 URL访问您的内容 - 这应该会失败并返回"Access Denied"错误

![](https://www.runor.cn/zb_users/upload/2025/07/202507111939115427829.png)

![](https://www.runor.cn/zb_users/upload/2025/07/202507111938531835750.png)

> 注意，此处访问域名必须要有 /index.html，佛祖鹅会找不到文件。最本文最后，会告诉如何配置默认的首页信息。

## 最佳实践和注意事项

1. **使用OAC而非旧版OAI**：AWS推荐使用Origin Access Control (OAC)而非旧版的Origin Access Identity (OAI)。OAC支持更多功能，包括所有AWS区域的S3桶、AWS KMS加密(SSE-KMS)和对S3的动态请求。

2. **使用自定义域名**：您可以将自定义域名添加到CloudFront分配，以提供更专业的用户体验。

3. **启用HTTPS**：考虑为CloudFront分配启用HTTPS，使用AWS Certificate Manager(ACM)提供的免费SSL/TLS证书。

4. **缓存优化**：根据您的内容类型和更新频率，调整CloudFront的缓存行为。

5. **监控和日志**：启用CloudFront日志和S3访问日志，以监控访问模式和潜在的安全问题。

## 结论

通过使用Amazon S3结合CloudFront CDN并实施Origin Access Control，您可以创建一个安全、高性能的静态网站，同时确保内容只能通过CloudFront CDN访问。这种方法不仅提高了安全性，还优化了性能和成本。

## 参考资料

1. [限制对Amazon S3源的访问 - Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html)
2. [使用CloudFront分配限制对Amazon S3桶的访问 - AWS知识中心](https://repost.aws/knowledge-center/cloudfront-access-to-amazon-s3)
3. [Amazon S3静态网站托管教程](https://docs.aws.amazon.com/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html)
4. [配置安全访问并限制对内容的访问 - Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/SecurityAndPrivateContent.html)

通过遵循本指南中的步骤和最佳实践，您可以成功部署一个安全的静态网站，确保内容只能通过您的CloudFront分配访问，即使有人知道您的S3 URL也无法直接访问您的内容。

----

## 如何配置默认的index.html为首页？

![](https://www.runor.cn/zb_users/upload/2025/07/202507111941128401679.png)

![](https://www.runor.cn/zb_users/upload/2025/07/202507111941308806005.png)

![](https://www.runor.cn/zb_users/upload/2025/07/202507111942303268935.png)

扫描二维码推送至手机访问。

本文链接：https://www.runor.cn/?id=28

标签: 静态网站托管 Amazon S3 CloudFront CDN 安全访问控制性能优化

分享给朋友：

返回列表

上一篇：Amazon S3 文件大小限制及其实现方案

下一篇：OpenSearch向量搜索实践：使用Flow Framework快速部署

刘博说云

大家都在搜：

使用Amazon S3与CloudFront搭建静态网站，确保内容仅通过CDN访问

“使用Amazon S3与CloudFront搭建静态网站，确保内容仅通过CDN访问” 的相关文章

OpenSearch向量搜索实践：使用Flow Framework快速部署

管理AWS Kinesis Video Streams：理解流生命周期与自动化清理

OpenSearch自定义模型上传详解：文件处理与分块机制深度解析

AWS EC2自定义主机名管理系统

AWS EC2 自动镜像创建与弹性伸缩部署指南

AWS账号分账的悖论：为什么"最佳实践"总是失效

发表评论

Powered By Z-BlogPHP. Theme by TOYEAN.

刘博说云

大家都在搜：

使用Amazon S3与CloudFront搭建静态网站，确保内容仅通过CDN访问

“使用Amazon S3与CloudFront搭建静态网站，确保内容仅通过CDN访问” 的相关文章

OpenSearch向量搜索实践：使用Flow Framework快速部署

管理AWS Kinesis Video Streams：理解流生命周期与自动化清理

OpenSearch自定义模型上传详解：文件处理与分块机制深度解析

AWS EC2自定义主机名管理系统

AWS EC2 自动镜像创建与弹性伸缩部署指南

AWS账号分账的悖论：为什么"最佳实践"总是失效

发表评论取消回复

Powered By Z-BlogPHP. Theme by TOYEAN.

发表评论