【教程】使用阿里云 OSS + CDN 加速 Gravatar

由于某些众所周知的原因，Gravatar 这一在全球范围内广为使用的头像源服务在中国大陆地区处于不可用状态。因此，在建立博客评论系统时往往需要选择使用 Gravatar 镜像源。然而，由云服务商/社区建立的镜像源（如 v2ex 源）目前大多也处于不可用或使用体验不佳的状态，而个人建立的镜像源（如 cdn.sep.cc）往往缺乏可用性保证，且可能加入了一些针对作者自身的特殊优化（如替换默认头像）。目前，常见的解决方法是换用 Cravatar 这一国内源，而本文将简要介绍使用阿里云 OSS + 阿里云 CDN 自建 Gravatar 镜像源的方法。

需求

已实名认证的阿里云账号
一个域名（建议不使用根域）

若域名未备案，在接下来的步骤中需要注意 CDN 的加速区域/OSS 的可用区不能选择包含中国大陆！

使用 OSS 建立镜像源

创建 OSS Bucket

登录阿里云账号，进入 OSS 控制台 - Bucket 列表，选择创建 Bucket，填写以下信息：

Bucket 名称：用于区分该 Bucket，建议起一个好记的名字（创建后不可修改）
地域：Bucket 数据存放的位置（建议选择有地域属性-中国香港，有 5GB 的免费储存空间及 5GB/月的免费流量，选择中国大陆范围内的地域需要有备案域名）
储存类型：选择标准存储（其他存储方式适用于冷数据）
存储冗余类型：本地冗余存储（同城冗余价格更高，且没有免费额度，对于镜像源来说不需要同城冗余提供的数据安全性）
阻止公共访问：关闭（开了将无法从公网直接访问 OSS 内数据，需要通过 API 认证）
读写权限：公共读（允许未认证用户访问数据，但不允许未认证用户写入）

其他选项可以参照文档按需开启。

Bucket 信息

填写完成后点击“完成创建”，进入 OSS 管理页面。

OSS 基础配置

进入 OSS 控制台 - Bucket 列表 - OSS Bucket 名称页面，这里可以查看并设置 OSS 的一些相关信息。

首次使用，建议按照以下步骤进行一些基础设置：

文件管理

这里建议创建一个文件夹，命名为 avatar，用于之后存放头像文件。

数据安全 - 防盗链

开启后，将只有白名单内的网站才能引用 OSS 内的文件，如果担心被刷流量可以打开并把自己的网站添加进去，如果后面开了 CDN 这里可以忽略。

数据管理 - 生命周期

这里可以设置定时清理 OSS 内的头像文件，节约空间同时实现自动刷新缓存。

点击“创建规则”，填写以下信息。

状态：启用
策略：按前缀匹配（不影响整个 Bucket，Bucket 内还可以存放一些网站的静态资源用于加速）
是否允许前缀重叠：默认不勾选，建议维持原样。
前缀：填写先前创建的文件夹名称（此处为 avatar/）

基本信息

下面的文件执行策略可以按照这个填写（碎片执行策略随意）：

策略

Bucket 配置 - 域名管理

此处可以为 OSS 配置自定义域名，如果需要使用 CDN 可忽略。

点击绑定域名，输入域名后按照提示添加 DNS 记录即可。

绑定后点击“证书托管”可以配置 SSL 证书开启 HTTPS 访问。

镜像配置

点击左侧数据管理 - 镜像回源，选择创建规则，填写以下信息：

回源类型：镜像（会将头像文件保存到 OSS 中起到加速效果）
回源条件：
- HTTP 状态码：404（必选）
- 文件名前缀：填入前面创建的文件夹名称，此处为 avatar/
源站类型：不勾选“回源 OSS 私有 bucket”
替换或截取前缀：勾选，在后面填入 avatar/（Gravatar 的头像 API 地址在 https://gravatar.com/avatar/ 下）
回源地址：分别填写 https 和 gravatar.com，第三个文本框不必填写
检查 MD5：不勾选，Gravatar 不支持。
携带 SNI：勾选。
回源参数：勾选“携带请求字符串”，否则只能获取默认尺寸的头像。
3xx 请求响应策略：勾选“跟随源站重定向请求”。

镜像回源

保存即可。

此时，使用“概览”页面的外网访问域名（请使用 Bucket 域名）或者先前添加的自定义域名（假设为 example.com），即可替换 gravatar.com。

例如：https://example.com/avatar/

使用 CDN 加速镜像源

OSS 访问速度固然不错，但是使用 CDN 加速能更快。

开通 CDN

进入 CDN 控制台 - 域名管理，选择“添加域名”，填写以下信息：

加速区域：选择“仅中国内地”或“全球”需要域名备案，如果没有备案域名请选择“全球（不包含中国内地）”
加速域名：填写需要使用的域名。
业务类型：图片小文件
源站信息：点击“新增源站信息”，填入以下信息：
- 源站信息：OSS 域名，选择刚刚创建的 OSS Bucket 公网访问域名。
- 优先级：主
- 权重：默认即可
- 端口：80（CDN 到 OSS 无需使用 HTTPS）

勾选“我理解并同意以上合规承诺”后点击下一步即可创建完成。接下来按照提示添加 CNAME 记录即可。“推荐配置”的内容可以稍后完成。

CDN 基础配置

待 CDN 开通完成后，点击域名进入配置页面。

基本配置

该页面无需配置，可以打开下方的“IPv6 开关”。

回源配置

配置

大部分配置无需修改，只需作如下配置：

回源 301/302 跟随：开，配置如图。
IPv6 回源：如果“基本配置”中的“IPv6 开关”打开则建议开启，配置如图。

回源配置1

重写回源 URL

此处的修改将在后文详细说明，此处暂时略过。

缓存配置

缓存过期时间

添加一条记录：

类型：目录
地址：先前创建的文件夹。此处为 /avatar
过期时间：考虑到 Gravatar 需要刷新，建议填写一个稍短的时间（7 天左右，不长于前面 OSS 配置的自动刷新时间）
权重：随意
规则条件：不使用

节点 HTTP 响应头

建议添加如下记录：

响应头操作：增加
自定义响应头参数：Cache-Control
响应头值：max-age=604800（此处以秒为单位，建议不长于前面 CDN 的缓存过期时间）

HTTPS 配置

在此页面上传 SSL 证书开启 HTTPS。

建议作如下配置：

HTTP/2 设置：开启
OCSP Stapling：开启
强制跳转：HTTP -> HTTPS
TLS 加密套件与协议版本配置：禁用 TLSv1.0 与 TLSv1.1，开启 TLSv1.2 与 TLSv1.3
HSTS：开启，过期时间 60 天（建议短于 SSL 证书有效期）

访问控制：

此处可开启防盗链，同上文 OSS 设置。

性能优化

此处优化建议全部打开。

HTML 优化、CSS 优化、JavaScript 优化：可开可不开（如果要存放该类文件建议打开）
Gzip 压缩：开启
Brotli 压缩：开启
图像处理：开启
- 支持转换的图像类型：全选
- 自适应 WebP：开启
- 图片自动旋转：可开可不开
- 图片自动瘦身：可开可不开
- 原图缓存：开启
忽略参数：开启
- 过略模式：保留指定参数
- 忽略参数：是
- 保留指定参数：s
- 保留回源参数：是
- 规则条件：不使用

QUIC 协议

此处可以开启 QUIC 协议，建议开启。

使 CDN 支持 `s` 参数

Gravatar 支持了 s 参数，可以指定获取的头像尺寸。然而，OSS 只会保留一个尺寸的版本，若首先访问了小尺寸的头像，则后续刷新前都将只能获取小尺寸头像。此处解决方案是通过 CDN 重写访问参数，让 OSS 只从 Gravatar 获取一个较大尺寸的头像并保存，并通过 OSS 的图片处理功能返回所需要尺寸的头像。

OSS 端设置

在 OSS 中开通“图片处理”功能，无需其他配置。

CDN 端配置

在“回源配置 - 重写回源 URL”中添加两条记录（按顺序）：

传入 s 参数时的重写规则（优先级高）
- 待重写的 Path：^/avatar/([a-f0-9]+)\?.*s=([0-9]+)
- 目标 Path：/avatar/$1?s=200&x-oss-process=image/resize,limit_0,w_$2
未传入 s 参数时的重写规则（优先级低）
- 待重写的 Path：^/avatar/([a-f0-9]+)
- 目标 Path：/avatar/$1?s=200&x-oss-process=image/resize,limit_0,w_80

此处使用正则表达式匹配 /avatar/ 目录下、文件名为小写十六进制（Gravatar 使用的邮箱 Hash）的请求，并重写其参数。

第一条规则匹配后面带有 ?s=xxxx 的请求，用正则表达式匹配出 s 参数，第二条匹配没有 s 参数的请求，直接指定默认值 80。

目标 Path 含义为：请求 /avatar/ 目录下对应文件，指定 s 参数为 200，并附加 x-oss-process=image/resize,limit_0,w_[图片宽度] 参数使用 OSS 图片处理的图片缩放功能，

保存并等待配置生效即可。

需求