使用 Amazon S3 托管静态网站

在本文中，我想演示如何通过将您的网站内容上传到 S3 存储桶、配置存储桶以进行网站托管以及使用 AWS CloudFront 加快内容交付来使用 AWS 部署静态网站。

首先，让我解释一下一些术语。

什么是 Amazon S3？

Amazon S3（简单存储服务）是 AWS 通过 Web 服务接口提供的对象存储服务。它可用于存储或检索任意数量的数据，例如文档、图像、视频等。S3 存储
桶是 Amazon S3 中的一种资源。它是一个可以上传文件和文件夹的容器。

什么是 Amazon CloudFront？

Amazon CloudFront 是 AWS 提供的内容分发网络 (CDN) 服务。它用于加速内容分发，并可与 Amazon S3 集成。

使用 AWS S3 存储桶的好处

每个对象最多可包含 5TB 的数据。
只有所有者才能访问资源，直到授予其他人权限，这使其更加安全。
它很便宜。
您可以在 S3 存储桶上启用多重身份验证 (MFA) 删除，以防止意外删除和意外数据丢失。

先决条件

如果您想遵循本教程，请确保满足以下要求。

AWS 账户。您可以点击此处注册并按照本教程进行设置。
静态网站。如果您没有，可以克隆此演示项目。

步骤 1 — 创建 S3 存储桶

您需要创建一个 S3 存储桶来存放您网站的文件和文件夹。

为此，请登录您的 AWS 管理控制台，然后点击顶部导航栏上的“服务” 。从“服务”下拉菜单中，从“存储”部分选择“S3”。这将显示S3仪表板。

在 S3 仪表板中，单击“创建存储桶”。为存储桶指定一个唯一的名称，该名称必须是全局唯一的（最佳实践是将您的 AWS 账户 ID 附加到名称中）。

接下来，从下拉菜单中选择您喜欢的AWS 区域。

在“阻止此存储桶的公共访问设置”部分下，取消选中“阻止所有公共访问”复选框并接受确认。这样做是为了让该存储桶可供公众访问，因为您将在其中托管一个网站。

单击“禁用Bucket Versioning”。

您还可以向存储桶添加标签，以便于识别。

在默认加密部分下，单击禁用服务器端加密。

然后点击创建存储桶。

步骤 2 — 将 Web 文件上传到 S3 存储桶

创建存储桶后，您需要将网站的文件和文件夹上传到其中。

在S3仪表板中，单击刚刚创建的存储桶的名称。

在“对象”选项卡上，您可以看到存储桶当前为空，单击“上传”按钮。

这将带您进入上传页面。点击“添加文件”添加网站文件，然后点击“添加文件夹”添加网站文件夹。

注意：不要一次性添加整个网站文件夹。应该逐个添加其内容。例如，在顶部链接的演示项目中，我将signup.html作为一个文件上传，将signup.js作为一个文件上传，将 css作为一个文件夹上传，将img作为一个文件夹上传。

添加必要的文件和文件夹后，向下滚动并单击“上传”。

上传过程大约需要几分钟，具体取决于您的网络状况和内容大小。此外，上传过程中请勿关闭标签页。

步骤 3 — 通过 IAM 策略保护 S3 存储桶

现在您需要添加一些策略来保护您的存储桶。

在S3仪表板中，单击存储桶的名称，然后单击“权限”选项卡。向下滚动到“存储桶策略”部分，然后单击其“编辑”按钮。

向其中添加以下存储桶策略并确保将其替换bucket-name为您的存储桶的名称。



{
"Version":"2012-10-17",
"Statement":[
 {
   "Sid":"AddPerm",
   "Effect":"Allow",
   "Principal": "*",
   "Action":["s3:GetObject"],
   "Resource":["arn:aws:s3:::bucket-name/*"]
 }
]
}

然后向下滚动并单击“保存更改”。

这应该将存储桶访问权限更改为公开，如下所示。

步骤 4 — 配置 S3 存储桶

您需要为您的网站指定默认页面和错误页面。

在S3仪表板中，单击存储桶的名称，然后单击“属性”选项卡。

向下滚动到静态网站托管部分并单击其编辑按钮。

选择启用静态网站托管。

另外，选择托管静态网站作为托管类型。

输入索引文档和错误文档的文件。错误文档是可选的。我使用了signup.html作为索引文档和错误文档。

向下滚动并单击“保存更改”。

保存后，如果您点击存储桶网站端点，它将显示您的网站。

步骤 5 — 使用 CloudFront 从 S3 存储桶提供内容

从“服务”下拉菜单中，向下滚动到“网络和内容交付”部分，然后单击“CloudFront”。这将带您进入CloudFront仪表板。

点击“创建分发”。在“选择内容页面的交付方式”上，点击“ Web”部分下的“开始”。

在“源设置”部分下，单击“源域名”字段，然后选择您之前创建的 S3 存储桶。在“源路径”字段中，输入/以指示根级别。

对于限制存储桶访问，选择是。

对于源访问身份，选择创建新身份。

对于授予存储桶读取权限，选择是，更新存储桶策略。

向下滚动到“默认缓存行为设置”部分。对于“查看器协议策略”，选择“将 HTTP 重定向到 HTTPS”。

接下来，向下滚动到“分发设置”部分。在“默认根对象”字段中，输入根目录下的文件名，也就是你的落地页。我使用了signup.html作为我的默认根对象。

将其余选项保留为默认值，然后单击“创建分发”。

现在，您可以从 CloudFront 仪表板查看您创建的分发。部署可能需要几分钟时间。

CloudFront 发行版部署完成后，从“域名”列复制 URL 并将其粘贴到浏览器中。耶！🎉 就是这样！

现在，您可以通过以下方式访问您的网站：

CloudFront 域名，例如 d3450i4qtm1w2p.cloudfront.net
网站端点，例如http://demo-95581515414.s3-website-us-east-1.amazonaws.com
S3 对象 URL，例如https://demo-95581515414.s3.us-east-1.amazonaws.com/signup.html

现在您应该知道如何使用 Amazon S3 托管静态网站，并使用 AWS CloudFront 加速内容交付。虽然需要完成几个步骤，但您已经完成了，而且很棒！

如果您觉得这篇文章对您有帮助，请点赞或留言。如果您有任何疑问或建设性反馈，请在评论区告诉我。

另外，别忘了关注我，以便阅读更多文章。谢谢！

文章来源：https://dev.to/mariehposa/hosting-a-static-website-with-amazon-s3-i5p

Hosting a Static Website with Amazon S3