Amazon S3 上托管静态网站完整攻略(自定义域名、CDN 内容分发、配置 HTTPS)

最后更新时间 2019-12-30 02:40:43

 Amazon S3 存储桶

存储桶就是用来存放网页、图片、视频等资源的地方。控制台地址:https://console.aws.amazon.com/s3

创建存储桶

进入到控制台后,点击「创建存储桶」。

Amazon S3 存储桶


名称和区域

存储桶名称。填写你的域名网址。假如你的域名是 example.com,并且使用 example.com 作为网站的访问地址,那么这里就填写 example.com。注意,存储桶的名称是在所有用户中是唯一的,也就说如果有的用户创建了名称为 example.com 的存储桶,那么其他用户不可以创建。存储桶命名规则 https://docs.aws.amazon.com/zh_cn/AmazonS3/latest/dev/BucketRestrictions.html#bucketnamingrules

区域。建议根据你网站受众的地理位置就近选择。

Amazon S3 存储桶-名称和区域

配置选项

可以先略过,直接点击「下一步」。后面可以根据需要进行填写。

Amazon S3 存储桶-配置选项

设置权限

这里默认是勾选了「阻止全部公共访问权限」,我们需要只勾选前面两项。也就是关闭「阻止通过新的公有存储桶策略或接入点策略授予的对存储桶和对象的公有访问」和「阻止通过任何公有存储桶策略或接入点策略对存储桶和对象的公有和跨账户访问」。

Amazon S3 存储桶-设置权限

审核

点击「创建存储桶」即创建完成。

Amazon S3 存储桶-审核

存储桶设置

创建完存储桶后,系统自动回到存储桶列表页面,点击你刚才创建的存储桶进入到设置页面。

静态网站托管

在「属性」选项卡部分点击「静态网站托管」。

Amazon S3 存储桶-属性


选择「使用此存储桶托管网站」,「索引文档」建议填写「index.html」。终端节点。终端节点后面的有个网址(我马赛克掉了),这个就是可以用来访问网站。 

Amazon S3 存储桶-属性-静态网站托管

权限

「权限」选项卡,「存储桶策略」部分。

Amazon S3 存储桶-权限-存储桶策略

复制下面的内容,然后粘贴到里面,记得把 example-bucket 替换为你的存储桶名称。

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

概述-上传文件

上传你的网站内容文件后,你就可以访问了,但网址不是你的域名,而是使用「属性->静态网站托管」部分中的「终端节点」地址来访问。使用自定义域名访问也就是你的存储桶名称作为网址的话,我们这里先建立一个 Amazon CloudFront ,通过这个来实现。

Amazon S3 存储桶-概述

Amazon CloudFront 网站提速 

简单说,Amazon CloudFront 是极大的提高你的网站访问速度,飙速。控制台地址 https://console.aws.amazon.com/cloudfront/

点击「创建分配」。

Amazon CloudFront-创建分配

选择 web 部分的「入门」。

Amazon CloudFront-创建分配-选择内容分发方式

创建分配

源域名里面,选择你的存储桶的静态网站托管终端节点,选择后,会自动填写到输入框里面。例如 example.com.s3.amazonaws.com。

接着对这个网址做一下编辑,在这个网址中的 s3 和 amazonaws.com  之间添加你的存储桶区域。创建存储桶时,我选择的区域是新加坡。最后修改为 example.com.s3.ap-southeast-1.amazonaws.com。ap-southeast-1 代表的就是新加坡区域。

Amazon CloudFront-创建分配-源设置

关于区域代码,也可以点击右上角的「全球」来查看,

Amazon-区域

其他的选项,我只修改了「默认缓存行为设置」中的「查看器协议策略」,这里我选择了「将 HTTP 重定向到 HTTPS」。其它的我保持了默认,后面可以根据个人需要按需修改。最后点击创建分配后,页面自动跳转到了「CloudFront 分配」页面,在「状态」栏里面会显示「正在进行」,等待变为「已部署」就说明已经完成了。

Amazon CloudFront-状态-正在进行

CloudFront 有给你分配一个域名,这个时候,除了使用   Amazon S3 存储桶的静态网站托管中的终端节点域名访问外,你也可以通过这个域名来访问。但是这个并不是我们想要的,我们想要的是自己的域名,下面开始讲讲怎么自定义域名。

Amazon CloudFront-域名


自定义域名

Amazon Certificate Manager 预配置,管理和部署 SSL/TLS 证书

为了安全考虑,必须为域名配置 HTTPS 证书,地址 https://console.aws.amazon.com/acm/home?region=us-east-1#/wizard/

注意:因为这是和 CloudFront 搭配,区域上必须选择「美国东部 (弗吉尼亚北部) us-east-1」,上面地址进入到就是这个区域,不要选择其他的区域。

添加域名

输入你的域名,也就是你的存储桶名称。

Amazon Certificate Manager-请求证书-添加域名

选择验证方法

我这里选择的是 DNS 验证。

Amazon Certificate Manager-请求证书-选择验证方式

添加标签

可直接点击「审核」。

Amazon Certificate Manager-请求证书-添加标签

审核并请求

点击「确认并请求」。

Amazon Certificate Manager-请求证书-审核并请求

验证

到你的域名服务商那里,增加一个 CNAME 类型的记录,所需要的名称和值 Certificate Manager 都给出来了。点击「继续」。系统会自动进行校验,「验证状态」的「等待验证」变成「已颁发」就是完成了,一般几分钟就好了。

Amazon Certificate Manager-请求证书-验证

Amazon CloudFront 设置备用域名

在 Amazon CloudFront 列表页面,点击 ID 或者勾选后再点击分配设置,进入到设置页面。

Amazon CloudFront-设置

点击「常规」选项卡中的「编辑」

Amazon CloudFront-设置-常规-编辑

备用域名(CNAMEs)里面输入你的存储桶名称,也就是你的网址。「SSL 证书」选择你在 Certificate Manager 为这个域名创建的证书。最后点击「是,请修改」按钮,回到列表页面,等待它的「状态」变为「已部署」即大功告成。

Amazon CloudFront-设置-常规-编辑-编辑分配

自定义域名增加 CloudFront 别名

在域名服务商那边,增加一个 CNAME 记录,值就是 CloudFront 分配的域名。

总结

整体来说,存储桶用来存放网站文件,并且配置权限,启用静态网站托管,然后使用 CloudFront  提高网站速度,填写自定义域名。Certificate Manager 为域名生成证书。域名服务管理中增加 CNAME 记录。