基于 AWS 的 HTTPS 静态网站搭建

TL;DR

在 AWS 上部署一个带 CDN 的 HTTPS 静态网站:

获取 SSL证书,并用 AWS CLI aws cloudformation 创建: AWS CloudFormation Template

用到服务:Cloud Formation,Amazon S3,Amazon Certificate Manager (ACM),CloudFront, Route 53(可选)

为什么要用 AWS

  1. 因为好玩~
  2. 质量有保证,资料齐全,操作简单
  3. 有很多相关的服务可以使用,方便搭积木
  4. 按量收费,SSL 证书不要钱
  5. 方便自动化

当然,静态网站本身的不足,以及 AWS 服务在中国访问慢的问题还是存在的。

关于开销

以日本区域(2019.9 时间点的价格)为例:

S3 存储: $0.025 per GB
S3 GET 请求:由于经过 CloudFront, 免费
CloudFront GET 请求: $0.0120 per 10,000 requests
CloudFront 流量: $0.140 per GB
ACM:免费

假设是一个有10G数据,每月 50K 请求的静态网站,则:

10GB S3 数据 - $0.25
50K 个 CloudFront GET 请求 - $0.06
(50K * 1MB = ) 50G CloudFront 流量 - $7

每月总开销只需要 $8 !

步骤

1 获取 ACM SSL 证书

打开 Amazon Certificate Manager (ACM) 切换到 us-east-1 Region:
https://console.aws.amazon.com/acm/home?region=us-east-1#/
注意 CloudFront 只能使用 us-east-1 区域的证书

选择“新建证书 - 公有证书”
填入域名 *.yourdomain.com,如想重定向 www.yourdomain.comyourdomain.com,还要添加 yourdomain.com 别名。
选择 DNS validation ,确认

首次验证需配置 DNS CNAME 记录,在确认页面找到 CNAME 的 Name - Value,添入 DNS 记录。
注意 Name 的格式虽然是 _xxxxxxxx.yourdomain.com.
如果使用的 DNS 服务商是 NameCheap ,最好再填一条 Name 为 _xxxxxxxx 的记录。
Screen-Shot-2018-09-14-at-13.28.27

如果 DNS 使用的是 AWS Route 53,这里会有一个一键添加 DNS 记录的功能,非常方便。

之后只要 CNAME 记录存在,证书即可以自动更新 (不用每年用域名邮箱收 ACM 的邮件了!)

PS:如果已有 SSL 证书,需要手动导入到 IAM 中。

2 创建 CloudFormation Stack

用 AWS CLI aws cloudformation 自动创建:

  • S3 存储桶
  • CloudFront Distributions 及相应的权限
  • 关联配置 SSL 证书

3 上传静态网站到 S3

可以用拖拽的方式,将 index.html 等文件/文件夹上传到 S3 上。
文件上传后,需要在 S3 中打开静态网站托管功能。
Screen-Shot-2018-09-14-at-13.07.49

4 配置 CloudFront

AWS CloudFormation 已经自动做了这一步。下面只是手动配置时的参考说明。

打开 CloudFront,“新建 Distributions - Web”
“Orign” 选第一步使用的 S3 的存储桶,可设置可选路径
勾选 “Redirect HTTP to HTTPS”
勾选 “Custom SSL Certificate (example.com)”,证书中选择上一步配置的 SSL 证书
“Default Root Object” 填 index.html,确认

最后将创建的 Distributions 的 Domain Name 填入 DNS 的 CNAME 中
这是个坑:
https://serverfault.com/questions/613829/why-cant-a-cname-record-be-used-at-the-apex-aka-root-of-a-domain

好的做法是用自定义 NS Record 指向 AWS Route53 的 NS Server(如果还没有在用 Route53 的 NS),在Route53 中创建 A 记录,指定 Alias Target 为 CloudFront Distribution。

参考:
https://stackoverflow.com/questions/51198472/cname-entry-not-working-on-namecheap-using-amazon-certificate-manager

5 自定义 CloudFront 错误页面(可选)

使用 CloudFront 时,HTTP 错误页面可以在 CloudFront 的 “Error Pages” 中配置:
Screen-Shot-2018-09-14-at-12.58.23

这里不仅可以根据 HTTP 错误代码分别设置 Cache 的 TTL,自定义错误页路径,还可以改变最终返回给用户的错误代码,比如可以将 501 502 等等统一转成 500 返回。

comments powered by Disqus