AWS S3 + CloudFront 搭建全球加速静态网站完整教程（2026最新版）

Meta Description: AWS S3静态网站托管搭配CloudFront CDN全球加速实战：从S3桶创建到CloudFront分发、自定义域名HTTPS、缓存策略优化，完整操作步骤+价格对比表格+常见问题FAQ。

关键词：AWS S3静态网站、CloudFront CDN加速、S3网站托管、AWS全球加速、CloudFront分发、静态网站部署、S3+CloudFront教程

前言

想部署一个高可用、全球低延迟的静态网站，但又不想管理服务器？AWS S3 + CloudFront 组合是最经典的解决方案。S3 提供近乎无限的存储和 99.999999999%（11个9）的数据持久性，CloudFront 通过全球 600+ 边缘节点将内容缓存到离用户最近的位置。本教程带你从零搭建一个生产级的全球加速静态网站，涵盖控制台操作、CLI命令、缓存策略和成本优化。

S3 + CloudFront 架构全景

在动手之前，先理解整体架构：

用户请求 → Route 53 DNS → CloudFront CDN → S3 Bucket（源站）
                ↓                            ↓
         ACM SSL 证书                   静态文件（HTML/CSS/JS/图片）

步骤一：创建 S3 存储桶并开启静态网站托管

1.1 通过 AWS 控制台创建 S3 桶

1. 登录 AWS Management Console
2. 点击 创建存储桶（Create bucket）
3. 填写配置：

1. 点击「创建存储桶」

1.2 开启静态网站托管

进入 S3 桶 → 属性（Properties） → 最底部 静态网站托管（Static website hosting）：

• 选择「启用」
• 托管类型：托管静态网站
• 索引文档：index.html
• 错误文档：error.html（可选）
• 点击「保存更改」

1.3 设置存储桶策略（允许公开读取）

进入 权限（Permissions） → 存储桶策略（Bucket policy），粘贴：

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

⚠️ 将 www.yourdomain.com 替换为你的桶名称。

1.4 上传静态文件

点击 对象（Objects） → 上传（Upload），将你的 HTML/CSS/JS/图片文件上传。

或用 AWS CLI 一键同步：

# 安装AWS CLI后配置
aws configure

# 同步本地构建目录到S3
aws s3 sync ./dist/ s3://www.yourdomain.com/ \
  --delete \
  --cache-control "max-age=31536000,public"

# 对HTML文件设置不同缓存策略
aws s3 cp ./dist/index.html s3://www.yourdomain.com/index.html \
  --cache-control "max-age=0,no-cache,must-revalidate"

上传完成后，S3 会提供一个静态网站终端节点 URL： http://www.yourdomain.com.s3-website-us-east-1.amazonaws.com

步骤二：通过 AWS Certificate Manager 申请免费 SSL 证书

重要：CloudFront 使用的证书必须在 us-east-1（北弗吉尼亚）区域申请！

1. 切换到 us-east-1 区域
2. 进入 ACM 控制台
3. 点击 请求证书（Request certificate） → 请求公有证书
4. 填写域名：

• yourdomain.com
• *.yourdomain.com（通配符，覆盖所有子域名）

1. 验证方法选择 DNS 验证（推荐，可自动续期）
2. 在 Route 53 中点击「创建记录」自动添加验证记录
3. 等待验证通过（通常 1-5 分钟）

步骤三：创建 CloudFront 分发

3.1 创建分发配置

1. 进入 CloudFront 控制台
2. 点击 创建分发（Create Distribution）

3.2 🔴 关键配置：Origin Domain 不要选自动补全

AWS 控制台在下拉框中会自动列出 S3 桶名，但不要选择。选自动补全的桶时 CloudFront 使用 S3 REST API 端点而非静态网站托管端点，会导致：

• 无法设置默认索引文档
• 子路径访问返回 403（如 /about/ 无法自动加载 /about/index.html）
• 错误页面配置失效

正确的做法是：手动粘贴 S3 静态网站托管终端节点 URL。

3.3 缓存策略优化

创建自定义缓存策略（推荐用于生产环境）：

{
  "minTTL": 0,
  "defaultTTL": 86400,
  "maxTTL": 31536000,
  "queryString": false,
  "cookie": false,
  "header": ["Origin", "Access-Control-Request-Method", "Access-Control-Request-Headers"],
  "compression": true
}

步骤四：配置 Route 53 DNS 指向 CloudFront

1. 进入 Route 53 控制台
2. 选择你的托管区域 → 创建记录
3. 配置：

Route 53 的别名记录不收费，且支持裸域（apex domain）指向 CloudFront。

等待 DNS 传播（通常 1-10 分钟），用 dig yourdomain.com 验证解析是否指向 CloudFront IP。

步骤五：自动部署与缓存失效

5.1 一键部署脚本

#!/bin/bash
# deploy.sh — S3 + CloudFront 自动化部署脚本
BUCKET="www.yourdomain.com"
DIST_ID="E1ABCDEFGHIJKL"  # CloudFront 分发ID
BUILD_DIR="./dist"

echo "▶ 上传文件到 S3..."
aws s3 sync "$BUILD_DIR/" "s3://$BUCKET/" \
  --delete \
  --exclude "*.html" \
  --cache-control "max-age=31536000,public"

# HTML 文件使用短缓存
aws s3 sync "$BUILD_DIR/" "s3://$BUCKET/" \
  --delete \
  --exclude "*" \
  --include "*.html" \
  --cache-control "max-age=0,no-cache,must-revalidate"

echo "▶ 刷新 CloudFront 缓存..."
aws cloudfront create-invalidation \
  --distribution-id "$DIST_ID" \
  --paths "/*"

echo "✔ 部署完成！"

5.2 GitHub Actions 持续部署

# .github/workflows/deploy.yml
name: Deploy to S3 + CloudFront
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci && npm run build
      - uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1
      - run: |
          aws s3 sync ./dist/ s3://www.yourdomain.com/ --delete \
            --cache-control "max-age=31536000,public"
          aws s3 cp ./dist/index.html s3://www.yourdomain.com/index.html \
            --cache-control "max-age=0,no-cache,must-revalidate"
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.CLOUDFRONT_DIST_ID }} \
            --paths "/*"

步骤六：成本分析与省钱技巧

S3 存储费用（us-east-1，截至 2026年）

CloudFront 数据传输费用（按区域）

月度成本估算对比

💡 10个省钱技巧

1. CloudFront 源站选 us-east-1：S3 → CloudFront（同区域）免数据传输费
2. 开启 S3 智能分层：访问模式不固定时自动降冷，省 40-60% 存储费
3. CloudFront 价格等级选「北美+欧洲」：如果用户集中在欧美，省 30-50%
4. 启用 Gzip/Brotli 压缩：CloudFront 自动压缩文本文件，减少 60-80% 流量
5. 合理设置 TTL：长缓存减少回源请求（S3 GET 按次收费）
6. S3 生命周期策略：旧版本 30 天后自动删除
7. CloudFront 预留容量：承诺月度最低消费可享 15-20% 折扣
8. 使用 AWS Budgets 设置告警：月度费用超 $10/$50/$100 自动发邮件提醒
9. CloudFront 日志：仅排查问题时开启，避免 S3 日志存储费累积
10. AWS 免费套餐：新用户前 12 个月每月 5GB S3 标准存储 + 20,000 GET 请求免费

S3 + CloudFront 静态网站 vs 其他方案对比

AWS CLI 常用命令速查

# ============ S3 ============
# 列出所有桶
aws s3 ls

# 列出桶内文件
aws s3 ls s3://www.yourdomain.com/ --recursive --human-readable

# 上传单个文件
aws s3 cp index.html s3://www.yourdomain.com/ --cache-control "max-age=0"

# 同步目录（增量上传）
aws s3 sync ./dist/ s3://www.yourdomain.com/ --delete --dryrun

# 查看桶策略
aws s3api get-bucket-policy --bucket www.yourdomain.com

# 启用静态网站托管
aws s3 website s3://www.yourdomain.com/ \
  --index-document index.html \
  --error-document error.html

# ============ CloudFront ============
# 列出所有分发
aws cloudfront list-distributions --query "Distributions[*].{Id:Id,Domain:DomainName,Status:Status}"

# 获取分发详细配置
aws cloudfront get-distribution --id E1ABCDEFGHIJKL

# 创建缓存失效
aws cloudfront create-invalidation \
  --distribution-id E1ABCDEFGHIJKL \
  --paths "/index.html" "/assets/*"

# 查看失效状态
aws cloudfront list-invalidations --distribution-id E1ABCDEFGHIJKL --max-items 5

# 查看分发实时指标
aws cloudwatch get-metric-statistics \
  --namespace AWS/CloudFront \
  --metric-name Requests \
  --dimensions Name=DistributionId,Value=E1ABCDEFGHIJKL Name=Region,Value=Global \
  --start-time 2026-07-26T00:00:00Z \
  --end-time 2026-08-02T00:00:00Z \
  --period 86400 \
  --statistics Sum

故障排查指南

问题1：访问 CloudFront 域名返回 403

原因：S3 桶策略未允许公开读取，或未使用 S3 静态网站托管终端节点。

排查：

# 1. 直接访问 S3 静态托管端点验证
curl -I http://www.yourdomain.com.s3-website-us-east-1.amazonaws.com/

# 2. 检查 CloudFront 源站配置
aws cloudfront get-distribution --id E1ABCDEFGHIJKL \
  --query "Distribution.DistributionConfig.Origins.Items[0].DomainName"
# 输出必须包含 "s3-website" 而非 "s3.amazonaws.com"

问题2：更新文件后 CloudFront 仍返回旧内容

原因：CloudFront 缓存未失效，边缘节点仍持有旧版本。

解决：

# 创建失效请求（免费额度：每月 1000 个路径）
aws cloudfront create-invalidation --distribution-id E1ABCDEFGHIJKL --paths "/*"

# 或用通配符指定具体路径
aws cloudfront create-invalidation --distribution-id E1ABCDEFGHIJKL --paths "/index.html" "/assets/*"

问题3：子路径路由失效（Vue/React SPA）

原因：SPA 路由由前端 JS 处理，但 CloudFront/S3 不知道 /about 应返回 index.html。

解决：在 CloudFront 分发 → 错误页面 → 创建自定义错误响应：

问题4：CORS 跨域请求被阻止

解决：在 S3 桶的 CORS 配置中添加：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <MaxAgeSeconds>3600</MaxAgeSeconds>
  </CORSRule>
</CORSConfiguration>

同时在 CloudFront 缓存策略中加入 Origin、Access-Control-Request-Method、Access-Control-Request-Headers 请求头白名单。

总结

AWS S3 + CloudFront 是搭建全球加速静态网站的黄金组合：S3 提供 11 个 9 的数据持久性，CloudFront 通过全球 600+ 边缘节点将内容缓存到距用户最近的位置。对于官网、博客、文档站、前端应用等纯静态场景，这套方案在性能、成本和运维便捷性上都远优于传统 VPS。

核心要点回顾：

1. CloudFront 源站必须用 S3 静态网站托管端点（含 s3-website），不要用自动补全的 REST API 端点
2. HTML 设短 TTL，静态资源设长 TTL + 版本号，兼顾更新速度与缓存效率
3. ACM 证书在 us-east-1 申请，CloudFront 只能用该区域的证书
4. GitHub Actions + aws s3 sync + create-invalidation 实现一键部署
5. 善用 AWS 免费套餐 + Budgets 告警，控制成本在可预期范围内

---

本文由 3.chengzicloud.cloud 提供，点击访问首页了解更多 AWS 国际版教程与云计算实战内容。