教程简介
本教程将介绍如何使用 Amazon S3，在 CloudFront 覆盖的全球 CDN（Content Distributed Network, 内容分发网络）上加速形成缓存内容，以便协同构建静态多语言网站的具体实施步骤。
Amazon Simple Storage Service（Amazon S3）是一种对象存储服务，提供行业领先的可扩展性、数据可用性、安全性和性能。各种规模和行业的客户都可以使用 Amazon S3 存储和保护任意数量的数据，用于数据湖、网站、移动应用程序、备份和恢复、归档、企业应用程序、IoT 设备和大数据分析。
Amazon CloudFront 是一项加快将静态和动态 Web 内容（例如 .HTML、。CSS、。JS 和图像文件）分发给用户的速度的 Web 服务。CloudFront 通过全球数据中心（称作边缘站点）网络传输内容。
本教程需要拥有一个 AWS 账户作为必要的资源（具备 IAM 权限），并确保有操作 S3 和 CloudFront 的权限。
同时，本教程需率先创建好您的静态网站文件并按照不同语言组织好页面文件。
前提条件
- Tag：Amazon S3, CloudFront
- 难度：初级
- 时间：4 - 8 小时
- 费用：按需付费
- 受众：开发者
- 前提条件：具有 AWS 账户/IAM 用户
- 示例代码：无代码
- 上次更新时间：2025 年 9 月 8 日
- 相关行业：通用
- 相关产品：Amazon S3, CloudFront
第一步 创建一个本地多语言静态网站
全部打开预先安装好 Visual Studio Code，并适当规划需要部署到 CloudFront 的静态网站基本架构。
打开 VS Code，在硬盘相应卷标下新建项目文件夹：S3+CloudFront，并在其下逐个创建多语言子目录及对应的静态 Web 页面文件。例如：
- En/index.html(代表英文页面)
- Zh/index.html(代表中文页面)
- Es/index.html(代表西班牙语页面)
- Fr/index.html(代表法语页面)
- /assets/style.css(代表首页层叠样式表)
- /assets/script.js(代表首页JavaScript文件)
利用 VS Code 完成多语言静态网站代码编写，与上述项目架构相一致。
为了集中说明如何用 S3 实现多语言静态网站，作为示例，该 Web 页面示例内容做到简洁明快，教程侧重于页面在 AWS 部署时的多语言实现。
以该 Web 站点根目录的 index.HTML 页面作为入口，用户可在此选择语言。HTML 示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AWS Tutorials</title>
</head>
<body>
<h1>Welcome to visit AWS tutorials.</h1>
<p>Select a language to browse:</p>
<ul>
<li><a href="en/index.html">English</a></li>
<li><a href="zh/index.html">中文 (Chinese)</a></li>
<li><a href="es/index.html">Español (Spanish)</a></li>
<li><a href="fr/index.html">Français (French)</a></li>
</ul>
</body>
</html>
完成该静态网站部署后，可在 VS Code 中使用右键菜单的“Show Preview”进行预览。
本地部署完毕，可由本地主机及端口号访问页面，http://127.0.0.1:3000/index.HTML。
接下来，将分步骤配置 AWS 相关服务，逐步将该网站部署到 CloudFront，供用户访问。
第二步 创建并配置 Amazon S3 存储桶
全部打开首先，您可以登录亚马逊云科技官网：AWS.Amazon.com 注册一个新用户，作为您的根账户。为了确保账户安全，在注册了 AWS 根账户后，需要创建一个具有特定权限的 IAM 用户及角色。
创建 AWS 根账户后，以根账户身份登录 AWS 管理控制台。
关键字搜索
在控制台搜素栏中，搜索关键字”iam”，用来访问 IAM 服务。
用户创建
在左侧导航栏中，选择“用户“，点击页面右上角”创建用户“。
用户信息
出现“指定用户详细信息“页面。
访问权限管理
输入待创建的“用户名“，复选”向用户提供 AWS 管理控制台的访问权限 – 可选“，点击”下一步“。
点击“直接附加策略“按钮，在”权限策略“中搜索”AmazonS3”关键字，选择 AmazonS3FullAccess 权限。点击”下一步“。
查看和创建
在“查看和创建“页面，点击“创建用户“按钮。
返回列表
显示“已成功创建用户“，点击”下载 CSV 文件“，然后，点击”返回用户列表“。
在控制台搜索栏中，搜索“s3”关键字，用来访问 Simple Storage Service (S3）服务。
区域选择
调整区域，选择最近的亚太地区（新加坡），即 ap-southeast-1，重定向到 S3 管理控制台，点击“创建存储桶”按钮。
选择存储桶
选择默认存储桶类型“通用“，输入存储桶名称。
其它按照默认选项，点击“创建存储桶“按钮。
*注意：该存储桶名称为全球唯一，因此，命名时要避免重复，否则可能创建错误。
创建成功
创建完毕后，显示“已成功创建存储桶。
为了确保所有存储桶对象数据可被用户访问，需要进一步设置存储桶策略。
要防止公开访问的风险，需要屏蔽公共访问权限。在“编辑‘屏蔽公共访问权限（存储桶设置）‘“页面，保持默认选项，”阻止所有公开访问“。
点击进入新创建的存储桶，需按照静态网站架构创建多语言文件夹，点击页面右侧“创建文件夹”。
创建文件夹
创建名为 en 的文件夹，代表英语网页文件。
创建存储位置
再根据上述操作以此类推，分别创建了其它文件夹 en, es, fr 和 zh，分别代表中文、西班牙语和法语静态网页存放位置。
点击上传
点击“上传”，选择“添加文件”，找到静态网站项目文件夹根目录下的 index.HTML 文件，点击“上传”按钮，上传到 S3.
文件全部上传
返回将四个子文件夹的网页文件都上传完毕。
Origin Access Control (OAC）作为 CloudFront 的现代功能，其取代了旧的 Origin Access Identity (OAI)。OAC 能够提供更强的安全性和灵活性，对于静态 Web 网站托管，推荐使用 OAC 来安全访问私有的 S3 存储桶。
1. 确保存储桶的公共访问权限关闭
进入到 S3 存储桶，选择“权限”选项卡；找到“阻止所有公共访问”，点击“编辑”。
确保所有复选框都被勾选，确保屏蔽公共访问权限。
2. 部署 CloudFront
在管理控制台搜索栏，搜索“CloudFront”以打开 CloudFront 服务。
创建 CloudFront 分配
出现 Amazon CloudFront 页面，点击“创建 CloudFront 分配“。
分配管理
在 CloudFront 管理控制台页面，选择“分配“(Distribution)，点击右侧”创建分配”。
分配类型
填写分配名称及描述后，按照默认分配类型–Singe website or App（单一 Web 站点或 App)，点击 Next 进行下一步。
设置S3
在 Specify origin(指定起源)页面，按照默认起源类型- Amazon S3, 设置 S3 起源的唯一路径后，点击“Next”进行下一步。
安全防护
在 Enable security（启用安全性）页面，选择“启用安全保护”。* 提示：这里有价格估算提示，根据 1 千万个请求/月，此 AWS WAF 配置的成本估算为 14 美元。请您注意并控制使用 WAF 的成本。
创建分配
在”Review and create”(审核与创建)页面，确认信息后点击”Create distribution”(创建分配)。
分配成功
随即显示“已成功创建新分配”。
创建新的源
选择点击“源”选项卡，选择新创建的源，点击“编辑”。
可以看到，在“来源访问”项，默认选择了“来源访问控制设置（推荐）”，这说明存储桶可用来限制之访问 CloudFront。
* 提示：来源访问控制即 Origin Access Control (OAC)，它是来源访问身份 Origin Access Identity (OAI）的升级版本。
点击“Create new OAC”(创建新的 OAC)
保存修改
创建 OAC 成功后，用户会被带回到“编辑源”控制台页面，新的 OAC 会被自动选择，点击页面下方按钮“保存更改“。
当按照上述步骤配置 OAC 并保存时，CloudFront 控制台就提供了一个选项，即可以自动生成并应用正确的 S3 存储桶策略。
注意：
1. 在您保存起源配置后，页面顶部通常会显示一个黄色的提示框，内容大致是：“您可以使用 OAC 访问您的存储桶。但是，您的存储桶策略需要更新以授予 OAC 权限。”
2. 在这个提示框中，会有一个按钮叫做 复制策略 或 自动更新存储桶策略。请务必点击这个按钮。
3. 系统会自动跳转到 S3 存储桶的权限策略页面，并填充一个已经生成好的策略。这个策略的 Principal 是您刚刚创建的 OAC，而不是公共用户 ("*")。
4. 审查并保存该策略。
第三步 测试与验证
全部打开在 CloudFront 管理控制台，看到已创建的分配呈“已启用“状态。
查看该分配（Distribution）页面，填写分配信息，描述等信息，选择默认的分配类型为 Single website or App（单页网站或 App)，适用于静态网站；而另一个选项则为 Multi-tenant architecture（多租户架构），适用于多域架构的 SaaS 提供商。
下方选项”定制域（Custom domain)”可选（或稍后单独由 Amazon Route 53 创建定制域域名）。点击 Next 进行下一步。
源选项卡分配
在该分配的“源”选项卡，可以看到源名称，以及为该源(origin)生成的源域：
jackson-s3-sample.s3.ap-southeast-1.amazonaws.com
在页面下方 Settings(设置)中，选择“源设置“为默认选项。点击 Next 继续下一步。
使用安全设置
在 Enable security（使能安全性）页面，在 WAF 选项中，选择“启用安全保护“。点击 Next 进行下一步。
*提示：这里提示价格估算，根据 1 千万个请求/月，此 AWS WAF 配置的成本估算为 14 美元。
创建成功
在 Review and create(审查和创建)页面，点击 Create distribution(创建分配)。显示“已成功创建新分配”。
- 通过您的 CloudFront域名（格式如 https://d123abc.cloudfront.net/index.html），即分配域名及其主页面文件 index.html 访问网站。一切 Web 功能应正常工作，自动重定向和多语言切换都应正常。
- 尝试直接访问 S3 对象 URL。
- 此时，通过浏览器可以看到出现 Access Denies(访问拒绝)的错误页面。这证明所创建的的 S3 存储桶是真正私有的，公众无法通过静态网站域名直接访问。这同时也验证了该存储桶的安全性。
- 只有通过 CloudFront 域名访问，才能看到内容。这证明了 OAC 和存储桶策略正在正常工作，CloudFront 被授权作为唯一的访问代理。
1. 测试正常访问
2. 测试安全防护（关键验证）
URL 格式为：https://[your-bucket-name].s3.[region].amazonaws.com/index.html
具体请见前述分配中的域名文本。
* 注意：启用 AWS WAF 服务，可能即刻产生成本，用户可以在“账单和成本管理”的控制台页面，查看已经使用的费用。以下是 Cost breakdown（成本分解）显示的结果
可以看到当月已产生 $3.44 成本。
Amazon S3 采用“按需付费”（Pay As You Go）模式，没有预付费或最低费用。您只需为实际使用的服务量付费。Amazon S3 依照亚马逊云科技定价策略进行收费。
AWS 仍然为新用户提供 Free Tier 免费套餐，具体详情请参看亚马逊云科技官方网站免费套餐页面。
* 注意：Amazon S3 服务的价格因 AWS 区域略有不同，请务必查阅最新官方定价页面（Amazon S3 Pricing）：https://AWS.Amazon.com/cn/s3/pricing/，以获取具体定价信息。
第四步 总结
全部打开通过本教程，可以学到如何使用户保持 S3 存储桶为私有，并且只允许 CloudFront 分配来访问存储桶中的对象。当用户创建了一个源访问控制（OAC）并定义一个存储桶策略，只允许通过 CloudFront 访问自己的 S3 资源，使得静态网站能够被稳定、安全地托管。
这种做法借助 CloudFront 全球 CDN 的额外保护，为保持 S3 存储桶的安全性提供了坚实的基础。
找到今天要查找的内容了吗？
请提供您的意见，以便我们改进网页内容的质量