使用腾讯云对象存储 COS 和亚马逊 CloudFront 部署 Hexo,开启自定义 HTTPS 域名

使用对象存储部署静态网站,并通过亚马逊 CDN (CloudFront) 大大加快网站的访问速度

我原来的 Hexo 博客部署在 GitHub Pages 上,因为 GitHub Pages 在国外,所以为了加快访问速度,我做了很多优化的工作。然而,连接的响应延迟实在是不能忍,初次打开网站的时间有时候可能要半分钟之久,另外 GitHub Pages 无法被百度访问到,因此百度也不会收录 GitHub Pages 部署的网站,所以我最近在不断寻找其他的代替方案。

静态网站托管平台

首先,我寻找了一些 GitHub Pages 的代替方案。国内也有一些网站提供了类似 GitHub Pages 的服务,比如 Coding PagesGitee Pages 等。这两个 Pages 服务同样也不需要备案,所以我都试用了一下。发现速度还是一如既往地很慢,Coding Pages 服务器部署在美国等地,而 Gitee Pages 只有一个单独的阿里云香港结点,速度甚至还不如 GitHub Pages。国外也有一些类似的静态网站托管平台,比如 netlifyheroku 等。这两个体验还不错,都可以直接连 GitHub 的一个仓库,并在 Push 的时候自动更新,然而 netlify 的访问速度和 GitHub Pages 差不多,heroku 的访问速度较快,但是 Free dyno 计划不支持自定义域名的 SSL 加密,解决速度慢的一个有效办法是使用 CDN 加速,但是国内的 CDN 加速都需要备案。

服务访问速度支持自定义域名支持 SSL构建方式其他限制
Coding Pages较慢Git Push
Gitee Pages付费购买 Pro 版付费Git Push
GitHub Pages较慢Git Push百度不收录
netlify一般自动同步 GitHub 仓库
heroku较快付费支持自动同步 GitHub 仓库定时休眠

除了这些平台之外,还有很多国内网的对象存储服务也提供了静态网站的托管,而且还支持自定义域名的绑定,但在国内要使用自定义域名绑定同样需要给域名备案,否则只能用提供的域名访问。确实对象存储服务应当是目前最快的托管静态网站的平台了,但是如何解决自定义域名的问题呢?我的第一个想法是,使用国外的对象存储服务,于是我很自然地想到了亚马逊的 S3 存储。

大概看了一下文档,发现 S3 同样也是支持静态网站的托管的,我把文件传上去试了一下,发现确实可以托管静态网站,但是自定义域名不支持 HTTPS,这就很头疼了。我继续查阅相关的文档,发现官方给出的方法是使用 CloudFront 作 S3 的分发,而 CloudFront 可以通过 ACM 生成证书,来支持 HTTPS 的自定义域名。我研究了半天,发现亚马逊所谓的 CloudFront 其实就是 CDN 服务,只是起了一个名字而已。

解决方案

看到这里,我心里有了大概的一个解决方案,就是使用亚马逊云的 S3 做静态网站托管,配合 CloudFront 做分发。因此我初步尝试了一下,不得不说,S3 提供的配置选项非常非常详细,相比国内的 OSS 提供商就提供公有读 / 私有写这种权限,S3 大概列出了 20 多种权限,并且需要编写权限策略脚本来控制权限。详细归详细,带来的问题就是花了我好长时间大概搞懂了整个配置过程。配置完 S3 后再配置 CloudFront,又是各种繁琐的配置过程。配置完又是各种错误,各种 Google 之后才好不容易解决了。在看到 StackOverflow 别人的解答后我突然发现,CloudFront 其实并不一定需要和亚马逊云的其他服务配合使用,也可以直接提供源站让 CloudFront 给我加速呀。这样一方面我不用再配置繁琐的 S3 了,另一方面我也不用为 S3 付费了,使用国内的 OSS 还能方便不少。

考虑到腾讯云的对象存储 COS 每个月提供 50GB 的免费流量包,我最后的部署方案就是,将静态网站托管在 COS 上,然后使用静态网站托管功能生成静态网站,COS 会提供一个静态网站的访问节点,然后我再使用 CloudFront 将该访问结点作为源站,然后使用我自己的域名作为 CloudFront 的对外访问节点。由于 COS 提供的是腾讯云的地址,没有使用自定义域名,所以直接可以访问,而 CloudFront 服务在国外,因此不需要给域名备案,这样整个问题就解决啦!

部署步骤

下面,我将大致的介绍整个部署的步骤。你需要准备的东西有:

  1. 腾讯云账号
  2. 亚马逊云账号,需要一张信用卡来注册
  3. 一个自定义域名

上传静态文件到对象存储

首先,登录到 腾讯云对象存储 COS,点击左侧的存储桶列表,创建一个新的存储桶。由于浏览用户并不会直接接触存储桶,访问存储桶的主要是亚马逊云的 CloudFront 服务,在选择存储桶地域时,推荐选择美国的节点以加快 CloudFront 访问存储桶的速度。请注意要将访问权限设置为 “公有读私有写” 以对外提供访问。

create-oss-bucket

接下来,上传 Hexo 的 public 文件夹中的所有内容。你可以直接使用 Hexo 的 COS 的部署工具 hexo-deployer-cos 来进行部署。

最后,存储桶的基础配置中开启静态网站按钮,记录下 COS 提供的访问节点。你也可以直接打开该访问节点来测试静态网站是否部署成功。

oos-static-website

到这里,存储桶的配置部分就完成了。

使用 ACM 生成域名证书

在开启 CloudFront 分配之前,我们还需要在 AWS Certificate Manager (ACM) 中添加一张自定义域名的证书以支持 HTTPS 访问。访问 AWS Certificate Manager 页面,选择请求证书来生成证书,你可以导入已有的证书。然后输入你的自定义域名,AWS 可以直接分发泛域名证书,你还可以在这里输入多个域名。

aws-acm-add-domain

接下来,你可以选择使用 DNS 验证或者使用电子邮件验证的方式验证域名所有者。DNS 验证要求你在域名记录中添加一条 CNAME 记录,使用电子邮件验证会向你的域名的 WHOIS 信息发送邮件,或者向该域名的所属邮箱发送邮件,两种方式皆可,根据需要选择即可。然后根据要求完成验证。

aws-acm

ACM 支持自动续期证书,因此如果你保留 DNS 记录,ACM 会在证书快要过期时自动续期,不需要你做另外的操作了。至此,ACM 证书添加完毕。

开启 CloudFront 分配

现在打开亚马逊云的 CloudFront,创建一个 Web 内容分发。在源域名中填写刚刚 COS 提供的静态网站访问域名,在源协议策略设置为 HTTPS。在默认缓存行为设置中开启自动压缩对象,其余设置根据实际需要修改,也可以为默认。

cloudfront-source

在分配设置中的备用域名填写你的自定义域名,并在 SSL 证书中选择 “自定义 SSL 证书”,然后选择刚刚在 ACM 中添加的证书。

cloudfront-distribution

最后点击创建分配,CloudFront 会自动开始部署。大约等待 20 分钟左右后就可以完成了!部署完成后,将你的域名指向 CloudFront 提供的域名,CDN 就全部配置完成了。

总结

以上就是 COS+CloudFront 的部署方法,在完成 CloudFront 部署之后,你可能还需要配置文件的缓存时间以进一步提高性能。在价格方面,AWS 用信用卡注册后会提供一个一年的免费套餐,里面包含了 50GB 的流量以及每月 2000000 个 HTTP/HTTPS 请求,之后的流量单价也不高,应该是完全可以接受的。COS 每个月提供 50GB 的免费流量套餐,对于 Hexo 这种小流量的博客网站来说应该也完全够用了。经过测试,初次打开网站的速度可以控制在 5S 之内,相比远比动不动 30S 已经有了巨大的提高。

此外,我最近还转移了 DNS 提供商,发现原来使用的 DNSPod 已经不能同时添加 CNAME 和 MX 记录了,原来是可以的,我还在奇怪为什么突然就不行了,后来查了一下发现原来 CNAME 和 MX 本来就不能共存的,DNSPod 可以共存是因为之前不规范。搜索了一圈,发现国内的 CloudXNS 可以通过 LINK 记录设置隐式 CNAME,国外的 Cloudflare 可以通过 CNAME Flattening (也叫 ANAME) 实现共存。我两个都试了一下,最终选择了国内的 CloudXNC,感觉国内的解析应该会更快一点吧,不过我哪天又换掉了也说不定呢 ╮(╯▽╰)╭

你还可以点击下方的链接阅读到更多的 Hexo 性能优化文章

如果在部署过程中碰到任何问题,欢迎在下方留言,欢迎互相交流,讨论。

评论