零基础5分钟上手亚马逊云科技AWS核心云架构知识-用S3桶托管静态网页

简介：

小李哥从今天开始将开启全新亚马逊云科技AWS云计算知识学习系列，适用于任何无云计算或者亚马逊云科技技术背景的开发者，让大家0基础5分钟通过这篇文章就能完全学会亚马逊云科技一个经典的服务开发架构。

我将每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿云开发/架构技术基础解决方案，帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS AI最佳实践，并应用到自己的日常工作里。本次我将介绍如何利用亚马逊云科技的S3存储桶托管前端静态网页资源，提供可扩展和安全的前端网页服务器解决方案。本方案架构图如下：

方案所需基础知识

什么是 Amazon S3？

Amazon Simple Storage Service（简称 S3）是亚马逊云科技（AWS）提供的一种高度可扩展、可靠和低延迟的对象存储服务。S3 旨在为各种规模的开发者和企业提供安全、持久和高达99.999999999% (11 nines) 的高可用的数据存储解决方案。

网页托管服务功能

Amazon S3 也为开发者部署前端资源提供了便利的功能，即静态网站托管。通过 S3，您可以轻松地托管静态网站，包括 HTML、CSS、JavaScript 文件以及图像等静态资源。

S3 网页托管的优势

高可用性和持久性：

S3 设计用于 99.999999999%（11个9）的数据持久性，并且在多个地理区域冗余存储数据，确保高可用性。

弹性扩展：

S3 可以根据流量自动扩展，无需担心流量高峰导致的性能问题，确保网站始终快速响应。

成本效益：

S3 提供按使用量计费的模式，没有预付费用或最低消费要求，适合各种规模的应用，从个人项目到企业级应用。

安全性：

S3 提供多种安全机制，如身份和访问管理（IAM）、存储桶策略和访问控制列表（ACL），确保数据的安全存储和访问。

全球内容分发：

通过将 S3 与 Amazon CloudFront 集成，可以进一步加速全球用户访问您的网站，提高网站性能和用户体验。

本方案包括的内容：

利用存储桶安全策略保护存储桶被安全地访问

开启S3存储桶的网页托管功能

项目搭建具体步骤：

进入到亚马逊云科技控制台，打开S3存储桶

创建一个S3存储桶，名字为"website-bucket-xxxxx"

上传我们的静态网页资源：index.html, main.js, style.css, error.html到存储桶内。

点击S3存储桶的permission按键

确认"限制所有公开访问"选项是被关闭的，否则将无法访问S3桶内的网页

6. 接下来我们在bucket policy的界面中添加policy策略，内容按照下方展示的代码配置

需要配置的策略如下：

TypeScript 复制代码

{
  "Version": "2012-10-17",
  "Id": "StaticWebPolicy",
  "Statement": [
    {
      "Sid": "S3GetObjectAllow",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::website-bucket-707dc2f0/*"
    }
  ]
}

接下来我们进入S3的Properties界面，找到Static website hosting功能，点击Edit配置网页托管功能

接下来我们点击"Enable"开启静态网页托管，选择托管静态网页，配置网页托管的默认访问主页index.html和错误跳转界面error.html，最后点击save保存配置

9. 我们可以在静态网页托管界面找到服务器网页URL，点击打开

这样我们就可以看到我们上传的静态网页资源了。

以上就是在亚马逊云科技上利用S3托管前端静态网页资源的全部步骤。欢迎大家关注0基础5分钟上手AWS系列，未来获取更多国际前沿的AWS云开发/云架构方案！