亚马逊云科技玩法：用 S3 + CloudFront，给你的静态网站上个全球 CDN 加速 ✈️
你可能已经用 React、Vue 或者就是纯粹的 HTML/CSS/JavaScript 精心打造了一个漂亮的静态网站。现在，是时候让全世界看到你的作品了。传统的做法可能是购买虚拟主机，然后用 FTP 客户端颤颤巍巍地上传文件。这种方式不仅过程繁琐，而且当你的访客来自世界各地时，访问速度往往不尽人意。 我用了一种现代、专业的方式来解决这个问题。采用一套被全球顶尖公司广泛使用的云原生架构来托管我的静态网站。这个架构的核心是三项亚马逊云科技的服务： - **Amazon S3 (Simple Storage Service)** ：它将作为网站文件的“存储仓库”。Amazon S3 提供了行业领先的持久性和可用性，你可以把它想象成一个几乎永远不会丢失数据的、无限大的硬盘 。 - **Aamzon CloudFront**：这是一个全球内容分发网络（CDN）。它会在全球数百个边缘节点缓存你的网站内容。当用户访问你的网站时，内容会从离他们最近的节点提供，从而极大地降低延迟，实现飞一般的加载速度 。 - **Amazon Route 53**：这是一个高可用、可扩展的域名系统（DNS）服务。它将扮演“地址簿”的角色，将你酷炫的自定义域名（例如 `www.your-awesome-site.com`）指向 CloudFront，让用户可以通过友好的地址访问你的网站 。 这套架构并非遥不可及的复杂技术，恰恰相反，它是当今托管高性能静态网站的黄金标准。跟着这篇分享，你会发现，即便是个人开发者，也能轻松地为自己的项目搭建起这套企业级的网站基础设施。  ## 第1步：用 Amazon S3 当的“网站硬盘” 📁 第一步，使用 Amazon S3 来存放网站的所有文件。 ### A. 创建和上传 1. [登录亚马逊云管理控制台}([aws.amazon.com/cn/free?trk…](https://link.juejin.cn/?target=https%3A%2F%2Faws.amazon.com%2Fcn%2Ffree%3Ftrk%3Dd0a200fd-0331-451c-b145-bab98ddc9611%26sc_channel%3Dsm)%25EF%25BC%258C%25E5%25AF%25BC%25E8%2588%25AA%25E5%2588%25B0) Amazon **S3** 服务。  1. 点击 **创建存储桶**。  1. **存储桶名称**：输入一个全球唯一的名称。Amazon S3 存储桶名称是全局共享的，所以你可能需要加上一些独特的前缀或后缀，例如 `my-static-website-` 加上你的名字和日期。 1. **亚马逊云区域**：选择一个离你或你的主要用户群体最近的区域。 1. 其他设置保持默认，滚动到底部，点击 **创建存储桶** 。  1. 创建成功后，点击进入你的存储桶。点击 **上传** 按钮，然后通过“添加文件”和“添加文件夹”将你本地网站的所有文件（如 `index.html`、`error.html`、CSS 文件、JavaScript 文件和图片文件夹等）上传到这个存储桶中。  ### B. 启用静态网站托管 默认情况下，Amazon S3 只是一个对象存储服务。需要明确告诉它，这个存储桶里的内容要作为一个网站来对外提供服务。 1. 在你的存储桶页面，点击 **属性** 标签。 1. 滚动到页面最下方，找到 **静态网站托管** 卡片，点击 **编辑**。 1. 选择 **启用** 静态网站托管。 1. 在“托管类型”中，选择 **托管静态网站**。 1. 在 **索引文档** 字段中，输入你的网站入口文件名，通常是 `index.html`。 1. （可选）在 **错误文档** 字段中，输入你的自定义 404 错误页面文件名，例如 `error.html`。 1. 点击 **保存更改** 。 ### C. 配置公开访问权限 这是整个 Amazon S3 配置中最关键也最容易出错的一步。为了让互联网上的任何人都能访问你的网站文件，需要授予他们公共读取权限。这需要两步操作：“解锁”和“授权”。 1. **解锁：关闭“阻止公开访问”** 亚马逊云出于安全考虑，默认会阻止对 Amazon S3 存储桶的所有公开访问。需要先为这个特定的存储桶解除这个限制。 1. 在你的存储桶页面，点击 **权限** 标签。 1. 找到 **阻止公开访问（存储桶设置）** 卡片，点击 **编辑**。 1. **取消勾选** “阻止所有公开访问”复选框。 1. 系统会提示你确认此操作，勾选确认框，然后点击 **保存更改** 。 这一步操作本身并不会让你的存储桶变公开，它只是允许你接下来通过存储桶策略来设置精细化的公开访问权限。这个“先解锁，再授权”的流程是理解 Amazon S3 权限模型的关键，它能有效防止因误操作导致整个存储桶内容被意外暴露。 1. **授权：应用存储桶策略** 现在已经“解锁”了，接下来需要明确地“授权”公共读取权限。 1. 在“权限”标签页下，滚动到 **存储桶策略** 部分，点击 **编辑**。 1. 在策略编辑器中，粘贴以下 JSON 代码。**请务必将 `YourBucketName` 替换为你自己的存储桶名称**。 ``` { "Version": "2012-10-17", "Statement": } ``` 1. 点击 **保存更改** 。 这个策略的含义是：允许（`Effect: "Allow"`）任何主体（`Principal: "*"`）对你存储桶（`Resource`）中的所有对象（`/*`）执行读取操作（`Action: "s3:GetObject"`）。 完成以上步骤后，你的 S3 存储桶就已经配置成一个可以公开访问的网站了。你可以回到“属性”标签页，在“静态网站托管”部分找到你的网站端点 URL，它看起来像 `http://your-bucket-name.s3-website.your-region.amazonaws.com`。在浏览器中打开它，你应该能看到你的网站了！ ## 第2步：套上 CloudFront CDN - 让网站“飞”一会儿 💨 虽然网站已经上线，但它的访问速度受限于 Amazon S3 存储桶所在的单个亚马逊云区域。为了给全球用户提供最佳体验，需要引入 CloudFront。 ### A. 创建 CloudFront 分发 1. 在亚马逊云管理控制台，导航到 Amazon **CloudFront** 服务。 1. 点击 **创建 Amazon CloudFront 分发**。 ### B. 配置源 (Origin) “源”就是 CloudFront 获取内容的服务器，在这个案例中，它就是刚刚配置好的 S3 存储桶。这里有一个重要的选择，推荐使用更安全、更专业的方式。 |特性|S3 网站端点|S3 REST API 端点 (配合 OAC)| | --- | --- | --- | |存储桶隐私|必须公开|可保持私有| |源站协议|仅 HTTP|支持 HTTPS| |安全性|较低|推荐/更高| |配置复杂度|更简单|略微复杂（但更安全）| 采用 **S3 REST API 端点** 配合 **源访问控制 (OAC)** 的方式。这种方式允许 S3 存储桶保持私有，只允许 CloudFront 通过一个特殊的身份来访问，从而杜绝了直接访问 S3 的可能性，更加安全 。 1. 在“源域”字段的下拉菜单中，**选择你的 Amazon S3 存储桶**。控制台会自动填充 Amazon S3 的 REST API 端点（例如 `your-bucket-name.s3.your-region.amazonaws.com`）。 1. 在“源访问”部分，选择 **源访问控制设置 (推荐)** 。 1. 点击 **创建控制设置**，在弹出的窗口中保持默认设置并点击 **创建**。 1. 创建后，你会看到一条提示信息，告诉你需要更新 Amazon S3 存储桶策略。**点击“复制策略”按钮**，然后点击“转到 Amazon S3 存储桶权限”链接，在新标签页中打开你的 Amazon S3 存储桶策略编辑器，将刚刚复制的策略粘贴进去并保存。这个策略会自动替换掉之前设置的公共读策略，只允许 CloudFront 访问。 ### C. 关键设置 在创建分发的页面继续向下滚动，配置以下关键选项： - **查看器协议策略**：选择 **Redirect HTTP to HTTPS**。这将强制所有用户使用安全的 HTTPS 连接访问你的网站 。 - **默认根对象**：输入 `index.html`。这样当用户访问你的根域名（如 `https://www.your-awesome-site.com`）时，CloudFront 会自动提供 `index.html` 文件 。 - 其他设置保持默认，滚动到页面底部，点击 **创建分发**。 Amazon CloudFront 分发的创建过程需要一些时间（通常是 5-15 分钟）。在此期间，你可以看到状态为“正在部署”。部署完成后，状态会变为“已启用”。 ## 第3步：安排上 Route 53 - 绑定专属域名 🌐 当 Amazon CloudFront 分发部署完成后，你可以在分发列表中看到一个“分发域名”，形如 `d12345abcdefg.cloudfront.net`。现在，要将域名指向这个地址。 1. 在亚马逊云管理控制台，导航到 **Route 53** 服务。 1. 在左侧导航栏中选择 **托管区**，然后点击你的域名对应的托管区。 1. 点击 **创建记录**。 1. 在这里，将创建一个 **别名 (Alias) 记录**。这是 Route 53 的一个强大功能，它允许你将域名指向亚马逊云资源，并且比传统的 CNAME 记录更优越，特别是它可以用于根域名（例如 `example.com` 而非 `www.example.com`）。 1. **记录名称**：如果你想配置 `www.your-awesome-site.com`，就在这里输入 `www`。如果你想配置根域名 `your-awesome-site.com`，则将此字段留空。 1. **记录类型**：保持为 **A – 将流量路由到 IPv4 地址和部分亚马逊云资源**。 1. 打开 **别名** 开关。 1. 在“将流量路由到”下拉菜单中，选择 Amazon **CloudFront 分发的别名**。 1. 在下方的输入框中，选择或粘贴你刚刚创建的 Amazon CloudFront 分发域名。 1. 点击 **创建记录** 。 如果你想让根域名和 `www` 子域名都能访问你的网站，你可以为它们分别创建别名记录，都指向同一个 CloudFront 分发。 ## 总结两句 大功告成！现在，在浏览器中输入你的自定义域名，稍等 DNS 传播生效后，你就能看到一个通过全球 CDN 加速、并由 HTTPS 加密保护的专业网站了。 来看看刚刚搭好的这套架构有多牛： - **安全可靠**：内容存储在设计持久性高达 99.999999999% 的 S3 中，并通过 HTTPS 加密传输。 - **全球高速**：CloudFront 的全球网络确保了世界各地的用户都能获得极速的加载体验。 - **可扩展且经济**：这套架构可以从容应对从个人博客到大型商业网站的流量，而你只需为实际用量付费。 --- 以上就是本文的全部内容啦。**最后提醒一下各位工友，如果后续不再使用相关服务，别忘了在控制台关闭，避免超出免费额度产生费用～**
