Wristo Wiki

Appearance

Return to top
On this page

S3配置静态域名访问bucket

🧩 场景目标

你希望通过自定义域名 cdn.wristo.io，访问 S3 中的静态资源，并支持 HTTPS 加密访问，例如：

https://cdn.wristo.io/assets/img1.png

✅ 第一步：创建并配置 S3 Bucket

🪣 1. 创建 Bucket

  • 打开 S3 控制台
  • 创建 Bucket，命名为任意（如：wristo-cdn-assets），不必等于域名
  • 区域选择：推荐与你用户近的 AWS 区域，如 ap-northeast-1（东京）或 us-west-2（俄勒冈）

📂 2. 启用公共读取

上传文件后，为了让 CloudFront 能访问这些文件：

设置权限（Bucket policy）为公开读取： 

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowPublicRead",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::wristo-cdn-assets/*"
    }
  ]
}

✅ 第二步：申请 SSL 证书（ACM）

📋 1. 打开 AWS Certificate Manager

  • 选择区域：必须是 us-east-1（弗吉尼亚北部），因为 CloudFront 只在该区支持 HTTPS。
  • 申请公有证书（Request a public certificate）
  • 添加域名：
    • cdn.wristo.io
  • 验证方式选：DNS 验证

🧷 2. 添加验证记录

AWS 会提示你添加一个 TXT 记录到 DNS 里，复制去你的域名服务商（如 Cloudflare、阿里云）配置。

完成后稍等几分钟，证书会变成 “已颁发 Issued” 状态。

✅ 第三步：创建 CloudFront 分发（Distribution）

⚙️ 打开 CloudFront 控制台，创建新的分发

📌 Origin 设置

  • Origin domain：选择你的 S3 bucket（不要选 website endpoint，而是直接选 bucket）
  • Origin Access：推荐使用 Origin Access Control (OAC)，更安全，自动为 CloudFront 创建访问权限（也可选公开访问）
  • Restrict Bucket Access：选择 Yes（CloudFront 访问，防止 S3 被直接绕过）

📌 默认行为

  • Viewer protocol policy：Redirect HTTP to HTTPS
  • Cache policy：使用 CachingOptimized 或自定义
  • Object caching：根据你的更新频率调整 TTL

📌 设置自定义域名

  • Alternate domain name (CNAME): cdn.wristo.io
  • SSL certificate: 选择刚申请的 ACM 证书（必须是 us-east-1 区域颁发的）

✅ 第四步：配置 DNS（指向 CloudFront）

进入你的域名服务商（Cloudflare、阿里云、Namecheap 等）

添加一条 CNAME 记录：

主机记录（Name）：cdn
记录类型（Type）：CNAME
记录值（Value）：xxxxxxxxxxxx.cloudfront.net
TTL：自动或 600 秒

CloudFront 域名在 CloudFront 控制台创建后生成，如：

d3nd78xxxxx.cloudfront.net

✅ 第五步：测试和验证

打开浏览器访问：

https://cdn.wristo.io/path/to/your/image.png
  • 显示资源 ✅
  • 使用 HTTPS ✅
  • 响应快 ✅

你可以使用 CloudFront 的日志功能或开启 CloudWatch 来查看访问情况。

🧠 附加建议（可选）

  • 开启 Gzip / Brotli 压缩：提高性能
  • 设置 Cache-Control header：提高缓存命中
  • 配置 WAF（Web Application Firewall）：防攻击
  • 用 CI 自动部署到 S3（如 GitHub Actions）