AWS S3 + CloudFront + Route53 完整生产环境部署指南

📅 2026-01-31

✅第一部分：前置准备

准备清单

  • AWS 账户（已激活支付方式）
  • 自有域名（如：example.com）
  • 网站文件准备完毕（HTML/CSS/JS）
  • 浏览器打开 AWS 控制台 (console.aws.amazon.com)

关键概念理解

  • S3 桶：存储网站文件的容器
  • CloudFront：全球 CDN，加速内容分发
  • Route53：DNS 解析服务，关联域名
  • ACM：免费 SSL/TLS 证书服务
  • OAC：Origin Access Control，保证只有 CloudFront 能访问 S3

💾第二部分：S3 桶创建与配置

1创建 S3 桶

路径：AWS 控制台首页 → S3 → 桶 → 创建桶

详细步骤

  1. 登录 AWS 控制台
  2. 在顶部搜索框输入 S3 → 点击进入 S3 服务
  3. 左侧边栏点击 "桶"
  4. 点击 "创建桶" 按钮（蓝色）

填写表单

┌─ 桶名称 │ 输入：example-com-website │ ✓ 全球唯一 │ ✓ 仅小写、数字、连字符 │ ✓ 不能以 "xn--" 开头 │ ├─ 区域 │ 选择：us-east-1（或离你最近的区域） │ 💡 建议用 us-east-1 以减少 CloudFront 成本 │ ├─ 对象所有权 │ 选择：ACL 已禁用 │ ├─ 公开访问阻止设置 │ ✓ 保持全部勾选（稍后通过 CloudFront 控制访问） │ ├─ 版本控制 │ ○ 禁用（可选，建议禁用以降低成本） │ ├─ 服务器端加密 │ ○ 使用 Amazon S3 托管密钥 (SSE-S3) │ └─ 创建按钮 点击 "创建桶"
✅ 成功标志：桶列表中出现新桶，状态显示 ✓

2启用静态网站托管

路径：S3 桶 → 属性 → 编辑静态网站托管

详细步骤

  1. 点击刚创建的桶名称（example-com-website）
  2. 点击 "属性" 选项卡（右侧第五个）
  3. 向下滚动找到 "静态网站托管" 区域
  4. 点击 "编辑" 按钮

配置项

┌─ 静态网站托管 │ ○ 启用 ← 必须选择此项 │ ├─ 托管类型 │ ○ 托管网站 ← 选择此项（不选择重定向请求） │ ├─ 索引文档 │ 输入：index.html │ 说明：用户访问 / 时返回的文件 │ ├─ 错误文档 │ 输入：error.html │ 说明：返回 404/403 错误时返回的文件 │ └─ 保存更改 → 点击 "保存" 按钮
✅ 验证成功：
  • 页面显示 "✓ 更新完成"
  • "静态网站托管" 下显示 "启用"
  • 会看到一个网站端点 URL

3上传网站文件

路径：S3 桶 → 对象 → 上传

文件结构示例

my-website/ ├── index.html ← 必需 ├── error.html ← 必需 ├── css/ │ └── style.css ├── js/ │ └── app.js ├── images/ │ └── logo.png └── about.html

上传方式

方式 A：拖拽上传
将网站文件夹拖入上传区域，支持递归上传子文件夹

方式 B：点击选择
点击 "添加文件" 或 "添加文件夹"，逐个选择文件
✅ 验证上传：
  • 看到上传进度达到 100%
  • 返回桶后看到所有文件列表

🔐第三部分：创建 Origin Access Control (OAC)

4创建 OAC

路径：CloudFront → 安全 → Origin Access

详细步骤

  1. 在顶部搜索框输入 CloudFront → 进入 CloudFront 服务
  2. 左侧边栏展开 "安全" 菜单
  3. 点击 "Origin Access"
  4. 点击 "创建 Origin Access Control" 按钮

填写表单

┌─ Origin Access Control 名称 │ 输入：s3-website-oac │ 说明：便于识别，可自定义 │ ├─ 源类型 │ ✓ S3 ← 必须选择 S3 │ ├─ 说明（可选） │ 输入：For example.com static website │ └─ 创建按钮 点击 "创建"
✅ 成功标志：
  • 页面显示新建的 OAC
  • 复制显示的 OAC ID（如：E127EXAMPLE51Z）
⚠️ 重要提示：记住 OAC ID，后续配置时需要使用

⚡第四部分：创建 CloudFront 分布

5创建 CloudFront 分布

路径：CloudFront → 分布 → 创建分布

源配置 - Origin 部分

┌─ Origin 域 │ 点击输入框 → 下拉选择 S3 桶 │ 应显示：example-com-website.s3.us-east-1.amazonaws.com │ ⚠️ 不要选择 s3-website 端点，选择标准 S3 URL │ ├─ Origin 访问 │ ○ Origin Access Control 设置 ← 选择此项 │ ├─ 源 Access Control │ 点击下拉框 → 选择前面创建的 "s3-website-oac" │ └─ S3 为源时的协议 ○ HTTPS 只 ← 建议选择（更安全）

默认缓存行为配置

┌─ 查看器协议策略 │ ○ Redirect HTTP to HTTPS ← 选择此项 │ 说明：自动将 HTTP 重定向到 HTTPS │ ├─ 允许的 HTTP 方法 │ ✓ GET, HEAD（保持默认） │ ├─ 缓存策略和源请求策略 │ 缓存策略：点击下拉 → 选择 "CachingOptimized" │ 源请求策略：点击下拉 → 选择 "S3Origin" │ └─ 压缩对象 ✓ 启用 ← 可降低数据成本

分布配置

┌─ 启用此分布 │ ✓ 必须勾选 │ ├─ 备用域名 (CNAME) │ ⚠️ 暂不填写，后续配置 │ ├─ 默认根对象 │ 输入：index.html │ 说明：访问 / 时返回此文件 │ ├─ IPv6 │ ✓ 启用（已是默认） │ └─ 创建分布 点击 "创建分布" 按钮
⏳ 等待：分布部署需要 5-10 分钟，状态从 "进行中" 变为 "已部署"

6复制 CloudFront 域名

路径：CloudFront → 分布 → 分布详情

  1. 分布创建完成后，点击分布 ID
  2. 在 "分布详情" 标签查看以下信息
  3. 复制分布域名（d111111abcd.cloudfront.net）
分布域名：d111111abcd.cloudfront.net ↑ 复制此项（稍后使用） 分布 ID：E1234ABCD

7应用 S3 桶策略

路径：S3 → 桶 → 权限 → 桶策略

操作步骤

  1. 返回 S3 服务
  2. 选择网站桶（example-com-website）
  3. 点击 "权限" 选项卡
  4. 向下找 "桶策略"，点击 "编辑"
  5. 将以下 JSON 粘贴到编辑框

桶策略 JSON（需修改）

{ "Version": "2012-10-17", "Statement": [ { "Sid": "AllowCloudFrontOAC", "Effect": "Allow", "Principal": { "Service": "cloudfront.amazonaws.com" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::example-com-website/*", "Condition": { "StringEquals": { "AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/E1234ABCD" } } } ] }
⚠️ 必须修改的三项：
  • example-com-website → 替换为您的桶名
  • 123456789012 → 替换为您的 AWS 账户 ID
  • E1234ABCD → 替换为您的 CloudFront 分布 ID
✅ 完成：点击 "保存更改"

🔒第五部分：ACM 证书申请

8申请 SSL/TLS 证书

路径：ACM (AWS Certificate Manager) → 证书 → 申请证书

重要提示

⚠️ 区域很重要：确保区域为 US East (N. Virginia)，CloudFront 只支持此区域的证书

详细步骤

  1. 在顶部搜索框输入 Certificate Manager → 进入 ACM 服务
  2. 确保区域为 US East (N. Virginia)
  3. 点击 "申请证书" 按钮

填写表单

┌─ 证书类型 │ ○ 公开证书 ← 必须选择此项 │ ├─ 添加域名 │ 点击 "添加域名" → 输入：example.com │ 再点击一次 → 输入：*.example.com │ │ 最终显示： │ ✓ example.com │ ✓ *.example.com │ ├─ 验证方法 │ ○ DNS 验证 ← 选择此项（比 Email 快） │ ├─ 密钥算法 │ ○ RSA 2048（保持默认） │ ├─ 标签（可选） │ 输入：website-cert │ └─ 申请按钮 点击 "申请"

后续 DNS 验证

申请后页面会提示您进行域名验证：

步骤：
  1. 在 "域验证" 区域看到验证记录
  2. 点击 "创建 Route53 记录" 按钮
  3. AWS 会自动在 Route53 中添加 CNAME 记录
  4. 等待 5-30 分钟，状态变为 "已颁发"
✅ 完成：证书状态变为 "已颁发"

🌐第六部分：Route53 DNS 配置

9创建 Route53 托管区域

路径：Route53 → 托管区域 → 创建托管区域

详细步骤

  1. 在顶部搜索框输入 Route53 → 进入 Route53 服务
  2. 左侧边栏点击 "托管区域"
  3. 点击 "创建托管区域" 按钮

填写表单

┌─ 域名 │ 输入：example.com │ ⚠️ 不包含 www 或 http:// │ ├─ 描述（可选） │ 输入：Website hosting │ ├─ 类型 │ ○ 公有托管区域 ← 选择此项 │ └─ 创建托管区域 点击 "创建托管区域" 按钮

记录重要信息

托管区域 ID：Z1234567890ABC ↑ 复制记下此项 名称服务器（NS 记录）： ns-1111.awsdns-22.com ns-2222.awsdns-33.co.uk ns-3333.awsdns-44.org ns-4444.awsdns-55.net ↑ 复制这 4 个 NS 记录

10更新域名注册商 DNS 设置

在域名注册商处操作（如 GoDaddy、Namecheap、阿里云等）

步骤

  1. 登录您的域名注册商账户
  2. 找到 "DNS 管理" 或 "域名管理"
  3. 修改 Name Servers (NS 记录) 为上面复制的 4 个
  4. 保存更改
⏳ DNS 传播：可能需要 1-48 小时，您可以通过以下命令检查：
nslookup example.com # 应该看到 AWS NS 记录

11在 Route53 中创建别名记录

路径：Route53 → 托管区域 → 创建记录

创建第一条记录（根域名）

┌─ 记录名称 │ 留空（表示 example.com 根域） │ ├─ 记录类型 │ 点击下拉 → 选择 "A" │ ├─ 别名 │ ✓ 开启别名 ← 必须勾选 │ ├─ 选择流量策略 │ ○ 简单路由 ← 保持默认 │ ├─ 将流量路由到 │ 点击下拉 → 选择 "CloudFront 分布" │ ├─ 选择分布 │ 点击下拉 → 选择您的分布 (d111111abcd.cloudfront.net) │ ├─ 评估目标运行状况 │ ○ 否（保持默认） │ └─ 创建记录 点击 "创建记录"

创建第二条记录（www 子域）

重复上面的步骤，但将 "记录名称" 改为 www，其他配置相同。

✅ 完成：两条记录都应该指向同一个 CloudFront 分布

12配置 CloudFront CNAME 和证书

路径：CloudFront → 分布 → 编辑

步骤

  1. 返回 CloudFront 服务
  2. 选择您的分布（点击分布 ID）
  3. 点击 "编辑" 按钮
  4. 找到 "备用域名 (CNAME)" 字段
  5. 点击输入框，添加两个域名
备用域名输入框中添加： example.com www.example.com

选择 SSL 证书

向下滚动找 "自定义 SSL 证书" 或 "SSL 证书" ┌─ SSL 证书 │ ✓ 自定义 SSL 证书 │ ├─ 选择证书 │ 点击下拉 → 选择前面申请的证书 │ 应显示：example.com (和 *.example.com) │ └─ 保存 点击 "保存更改"
⏳ 等待部署：分布状态从 "进行中" 变为 "已部署"（通常 5-10 分钟）

⚙️第七部分：配置缓存策略

13为不同文件类型设置缓存

路径：CloudFront → 分布 → 行为 → 编辑

此步骤用于优化成本和性能。对不同类型文件设置不同的缓存时间。

默认行为设置

1. 返回 CloudFront 分布编辑页面 2. 点击 "行为" 选项卡 3. 选择默认行为 → 点击 "编辑" ┌─ 缓存键和源请求 │ 缓存策略：CachingOptimized（已设置） │ ├─ 查看器缓存控制请求头 │ ✓ 使用原始 Cache-Control 头 │ └─ 保存 点击 "保存"

可选：为 HTML 创建单独的行为

如需更精细的控制，可以为不同文件类型创建不同的行为规则：

HTML 文件行为：
路径模式：*.html 缓存策略：Cache Disabled（不缓存，每次获取最新） 源请求策略：S3Origin
JavaScript 文件行为：
路径模式：*.js 缓存策略：CachingOptimized 压缩：启用

✔️第八部分：测试和验证

14测试网站访问

测试 URL

在浏览器中访问： https://example.com https://www.example.com https://d111111abcd.cloudfront.net（CloudFront 直接 URL）

成功标志

  • ✅ 页面正常加载
  • ✅ HTTPS 有效（地址栏显示锁形图标）
  • ✅ 证书信息正确（点击锁形图标查看）

故障排查表

问题 原因 解决方案
显示 AWS S3 错误页面 S3 桶策略未正确配置 检查桶策略中的分布 ID
提示 "Access Denied" OAC 未正确应用 确认 S3 桶策略中有 OAC
自定义域名不工作 Route53 DNS 未生效 等待 DNS 传播（最多 48 小时）
无效的 SSL 证书 ACM 证书未部署到 CloudFront 在 CloudFront 中选择正确的证书
访问很慢 缓存未生效 检查 Cache-Control 头设置

🚀第九部分：性能优化

15配置缓存头优化

在 S3 中为文件设置合适的 Cache-Control 头可以大幅降低成本并提升性能。

方法 A：通过 AWS 控制台

  1. S3 → 桶 → 对象
  2. 选择文件 → "对象操作" → "编辑元数据"
  3. 添加自定义元数据（密钥：Cache-Control）

缓存时间建议

文件类型 Cache-Control 值 说明
HTML 文件 public, max-age=300, must-revalidate 5 分钟，必须重新验证
CSS/JS/图片 public, max-age=31536000, immutable 1 年，需要版本化文件名
API 响应 public, max-age=0 不缓存，每次获取最新

方法 B：通过 AWS CLI

# 上传并设置 HTML 缓存 aws s3 cp index.html s3://example-com-website/index.html \ --metadata "Cache-Control=public, max-age=300" # 上传并设置 JS/CSS 长期缓存 aws s3 cp app.a1b2c3d4.js s3://example-com-website/ \ --metadata "Cache-Control=public, max-age=31536000, immutable"

16启用 Gzip 压缩

在 CloudFront 中启用自动压缩可以减少 60-70% 的流量。

步骤

  1. CloudFront → 分布 → 编辑
  2. 找到 "默认缓存行为"
  3. 勾选 "启用压缩" ✓
💰 成本节省：启用压缩后，文本文件（HTML、CSS、JS）可减少 60-70% 的传输量

📊第十部分：监控和成本控制

17设置监控告警

监控 CloudFront 成本

  1. 进入 CloudWatch 或 成本管理
  2. 设置预算告警
预算名称：Website Monthly Cost 预算金额：$10（示例） 告警阈值：达到 80% 时通知

监控关键性能指标

在 CloudFront 分布中查看以下指标：

  • 请求数：每天的总请求数
  • 数据传输量：出站流量大小
  • 缓存命中率：应该 > 90%
  • 错误率：应该接近 0%

成本估算表（月度）

服务 成本 说明
S3 存储 $0.23 10GB × $0.023
S3 GET 请求 $0.04 1M ÷ 1000 × $0.0004
CloudFront 出站 免费 1TB 免费额度（100GB 用）
CloudFront 请求 免费 10M 免费额度（1M 用）
Route53 $0.50 托管区域月费
ACM 证书 免费 AWS 内部使用免费
合计 $0.77/月

常见问题解答

Q1：如何更新网站文件？

# 方式 1：使用 AWS CLI aws s3 cp ./new-file.html s3://example-com-website/ aws s3 sync ./website-files/ s3://example-com-website/ --delete # 方式 2：使用 AWS 控制台 # S3 → 桶 → 上传 → 选择文件 → 上传

Q2：如何清除 CloudFront 缓存？

  1. CloudFront → 分布 → 失效
  2. 创建失效 → 路径输入 /* → 创建
💡 提示：这会清除所有缓存文件（通常 5 分钟生效）

Q3：S3 + CloudFront 的数据传输流程是什么？

用户 → CloudFront 边缘节点 → S3 桶 ↓ 返回缓存内容（快速）

Q4：如何实现 HTTPS 重定向？

已在 CloudFront 中配置：

  • 查看器协议策略：Redirect HTTP to HTTPS

所有 HTTP 请求会自动重定向到 HTTPS。

✅总结检查清单

部署完成后，验证以下项目

  • S3 桶已创建并上传文件
  • 静态网站托管已启用（index.html, error.html）
  • OAC 已创建
  • CloudFront 分布已创建并已部署
  • ACM 证书已申请并已验证
  • Route53 托管区域已创建
  • 域名注册商 DNS 已更新为 Route53 NS
  • 别名记录（A 记录）已创建
  • CloudFront CNAME 已配置
  • CloudFront 已应用 ACM 证书
  • https://example.com 可正常访问
  • 缓存策略已优化
  • 压缩已启用
  • 成本监控已设置

后续维护

日常操作

  • 定期检查 CloudFront 缓存命中率（应 > 90%）
  • 监控月度成本
  • 更新网站内容时使用 aws s3 sync 命令

定期维护

  • 检查 ACM 证书过期时间（自动续期）
  • 检查 Route53 DNS 配置是否正确
  • 清理过期的 S3 对象版本（如已启用版本控制）

性能优化

  • 使用 CloudFront 的实时日志分析缓存命中率
  • 定期调整 Cache-Control 头配置
  • 考虑使用 Lambda@Edge 进行边缘计算

🎉 部署完成

您现在拥有一个生产级别的、低成本的静态网站托管解决方案

📊 成本：月均 $0.50 - $5
⚡ 性能：全球 < 500ms 加载
🔒 安全：HTTPS + DDoS 防护
📈 可扩展：自动处理流量增长