网站优化实践1 – 部署CDN，基于NGINX反向代理配合后端负载的架构

之前的坑

在之前的文章中提到了本站的大体架构是后端WordPress服务器 + NGINX反代服务器，也就是两个独立的物理主机；并且为了更方便地支持HTTPS，将SSL的配置从反代服务器转移到了后端上。

但是随着运行的服务越来越多，为了方便集中管理和避免端口混淆，现在又将证书配置转移到了反代上。并且经过一番研究，发现之前出现混合内容警告的主要原因主要是WordPress没能正确识别HTTPS，具体地是因为请求中头中缺少“HTTPS”字段或其值不为“on”——这是因为HTTP链接默认不会添加“HTTPS”头部。这时候需要添加PHP代码使得WordPress能正确认识到我们需要HTTPS协议，例如当请求携带X-Forwarded-Proto为“HTTPS”时认为网站使用了HTTPS。这里我的解决方案是在wp-settings.php头部添加如下内容：

if ($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') {
    $_SERVER['HTTPS'] = 'on';
}

需要注意的是这段代码需要添加在WordPress读取请求头之前，否则会不生效（is_ssl()返回false）。经过测试发现添加在wp-settings.php头部能生效，并且再也没出现混合内容的错误。

CDN是？

简单来说就是协助网站分发部分资源（大多是静态的资源例如图片、JS、样式和下载文件）的分发网络。事实上，大部分网站都应该使用上CDN，不仅是为了提高加载速度，也在一定程度上能缓解DDoS（虽然效果有待商讨，不过确实能很大程度缓解源站压力）。

主动型CDN需要提前将待分发的资源上传到CDN服务网络当中，用户直接从CDN获取内容即可。而被动型需要等到用户请求指定资源时检查缓存状态，如果发现请求的资源不在CDN中，则CDN会向源站请求该资源、缓存源站返回的内容或状态码并将其返回给用户；而如果请求的资源命中了缓存则直接返回资源，不再回源。阿里云和腾讯云提供的就是被动型CDN。

初步尝试

因为腾讯云给了免费的半年100G流量，于是就在腾讯云上部署了一个cdn域名专门分发博客的js、css、上传的图片等体积小的内容。需要注意的是如果托管HTTPS请求需要提前将证书上传至腾讯云，并且HTTPS的免费额度有限，虽然普通用户基本用不完就是了。具体过程不是很复杂，可以阅读官方文档，不再赘述。

还有就是如果要在源站上引用cdn域名则构成跨域请求，需要在CDN配置页或者源站后端添加Access-Control-Allow-Origin头部，否则浏览器会报CORS错误并拒绝加载资源。具体过程去谷歌即可。

如果你对域名配置了HTTPS（上传并部署了证书），强烈建议将HTTP2和OCSP装订打开。前者的多路复用可以避免多个连接的慢启动对加载速度造成影响，后者会直接缓存SSL证书状态以提高SSL握手速度。其他HTTPS选项按需配置就好。

可能性

其实本质上CDN也可以看作是一个代理，用户直接访问你的源站和访问代理都能获得相同的内容。因为CDN内部网络做了大量优化，因此其稳定性也就十分亮眼。这里的稳定性不一定是说网页加载的响应速度。因为大陆网络环境异常复杂，DNS污染随处可见，再加上本站的反代服务器位于香港延迟和抖动本来就比较大，如果不去做优化的话在有些地区甚至会出现不能访问的现象。因此，下篇文章中将探讨并记录部署全站CDN的可行性与实践过程。

References

1. What is a content delivery network (CDN)? | How do CDNs work? - CloudFlare
2. 内容分发最佳实践 - Google Cloud
3. OCSP 装订配置 - 腾讯云