CloudFront + S3 教程：我如何在 AWS 上安全地托管我的作品集

Source: Dev.to

前置条件

• AWS 账户（免费套餐即可）
• 静态网站构建产物（React/Vite 或普通 HTML/CSS/JS）
• 对 AWS 控制台有基本了解

步骤 1：构建并上传作品集文件到 S3

上传前，先生成优化后的生产构建。

针对 React/Vite：

npm run build

这会生成一个 dist/build 文件夹，包含：

• index.html
• vite
• assets/（文件夹）

仅将这些文件（而不是源码）上传到 S3：

1. 创建一个存储桶。
2. 保持 Block Public Access ON（开启）。
3. 打开 S3 控制台。
4. 将 dist/build 文件上传到存储桶根目录。

步骤 2：启用静态网站托管（可选）

1. 前往存储桶的 Properties（属性）。
2. 滚动到 Static Website Hosting（静态网站托管）并启用。
3. 将 Index document（索引文档）设置为 index.html。

步骤 3：创建 CloudFront 分配

1. 打开 CloudFront 控制台。
2. 点击 Create Distribution（创建分配）。
3. 选择你的 S3 存储桶作为源（origin）。
4. 对于 Origin Access，选择 Origin Access Control (OAC)。
5. CloudFront 会生成所需的权限并应用到你的存储桶。

这样可以保持 S3 存储桶私有，由 CloudFront 负责公开路由。

步骤 4：限制直接访问 S3

CloudFront 会提供一个存储桶策略，你需要将其粘贴到存储桶权限中。这可确保：

• 存储桶不对公众可读。
• 只有 CloudFront 能提供内容。

步骤 5：设置默认根对象

在 CloudFront 分配设置中，将 Default Root Object（默认根对象）设为 index.html。这样访问作品集时无需显式输入文件名。

步骤 6：等待部署并测试

部署可能需要几分钟。完成后，你会得到类似如下的域名：

d37dnhohvgt3x2.cloudfront.net

访问该域名即可看到已上线且安全的作品集。

---

使用 S3 + CloudFront 可以实现私有存储桶，遵循生产最佳实践，兼容免费套餐，并受益于全球性能提升。

---

标签: aws cloud cloudfront s3 webdev portfolio tutorial

如果觉得本文有帮助，请点个 ❤️ 或收藏！