【AWS征文】如何利用 AWS CloudFront 给您的站点全站安全加速

如何给你的站点加速，如何作到静态资源动态资源同时加速，本文将详细为你介绍 AWS CloudFront，而且如何利用 CloudFront 为您的站点加速，以及使用 CloudFront 的注意事项。

CloudFront 是什么

如今愈来愈多的产品开始走出国内，迈向全球。如今移动互联网愈来愈火热，你们都是经过官方网站去浏览产品的特性，那么咱们就须要为产品创建一个全球化的网站，把产品介绍推送给全球用户。那么如何才可让全球的用户以最快的速度打开站点呢？咱们知道，全球的网络传输依托于光纤，而光的速度是不变的，距离服务器越远的用户延迟注定会越高，通过的路由也会越多多，速度也会越慢。

如何克服困难，给用户一个好的体验，AWS 云服务中哪一个产品能够帮助咱们实现？咱们须要了解一下 AWS CloudFront，CloudFront 是什么，拥有什么功能，相比于其余的 CDN 服务，又有什么优点呢，咱们后面一一解答。

CloudFront 是 AWS 推出的 CDN 服务，能够对网站资源进行缓存加速。咱们一般理解的 CDN 就是对静态资源加速，静态资源会分发到 AWS 全球的边缘节点，用户就近访问所须要的资源。那么针对动态资源怎么办？这个咱们也不用担忧，AWS 拥有很是庞大的基础设施，利用这些基础设施，CloudFront 一样能够对动态资源加速，好比咱们的 PHP、ASP 等动态资源。这里的加速并非把这些资源分发的全球，而是让用户的流量最快进入 AWS 的骨干网。骨干网依托于 AWS 的基础设施，骨干网由 AWS 本身维护，拥有高速带宽，智能路由，AWS 会制定最优的路由策略，让用户的请求最快稳定的到达源站。

那么废话很少说，咱们下面看看如何设定，让咱们的站点推向全球吧。

准备站点

我此次以一个 wordpress 站点作演示，咱们不须要破坏站点的任何结构，就能够实现全站加速，静态资源缓存到全球边缘节点，请求动态资源经过 AWS 骨干网动态路由到源站。

CloudFront 虽说能够加速第三方站点，可是为了最好的效果，很是推荐把站点放在 AWS 的服务中，此次咱们把站点放置在 EC2 上面进行测试。

我 EC2 的系统是 Amazon Linux 2，环境是用 LNMP 一键安装包建立的，关于 LNMP 的使用方式我这里再也不介绍，一台 EC2 能够部署多个虚拟主机网站，默认咱们的 EC2 只提供 HTTP 的服务，若是须要 HTTPS 的话，那咱们把证书挂载 ALB 或者 CloudFront。

咱们从最开始指导你们如何一步步操做，最终配置完成 CloudFront 实现全站加速。

查看默认站点

默认域名是直接解析到 EC2 的，使用的是 HTTP 请求访问，咱们查看一下效果。

配置 ALB 启用 HTTPS

虽说 CloudFront 能够直接为网站加速，可是那须要咱们准备两个域名，一个加速域名，一个源站域名，弄起来比较复杂，咱们借助 ALB 中间这个工具，只负责一个域名就能够了，管理起来很是简单，关于 ALB 的配置，我这里也再也不介绍，你们看我配置好的效果吧。

当咱们使用 HTTPS 访问的时候，发现不少链接都被浏览器 blocked 掉了，那么这是为何呢？

咱们首先就是要解决这个 HTTPS 的问题，否则使用 CloudFront 会有一样的问题，咱们首先了解一下目前的架构状况。

虽然用户使用的 HTTPS 发起请求，可是在通过 ALB 以后，转换成 HTTP 请求源站的 wordpress，wordpress 其实并不知道用户使用的 HTTPS 请求的，发现过来的请求是 HTTP，因而 wordpress 构建的 document 里面嵌入的是 HTTP 的资源连接，返回给浏览器以后，浏览器由于一些安全的设定，会 blocked 这些 HTTP 的资源请求，这也就致使了咱们的站点不能正常展现，顺便说一下，我使用的是 Chrome 浏览器，其余浏览器是否会 blocked 你们能够去试一下。

那么如何解决这个问题呢？打个不恰当的好比，咱们要“欺骗” wordpress，让它认为咱们是用 HTTPS 请求的，其实也就是给 wordpress 作个设置，无论用户使用什么协议请求，都给客户端返回 HTTPS，那么咱们须要给 wordpress 的配置文件wp-config.php增长下面一段内容。

if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false)
    $_SERVER['HTTPS']='on';

而后咱们再次请求，看到 HTTPS 已经能够正常访问。

配置 CloudFront

建立 Distribution

打开 CloudFront 控制台，建立一个 WEB Distribution，由于不少小伙伴并不清楚站点的结构，不知道哪些目录是静态资源，哪些目录是动态资源，若是默认直接都缓存的话，那会产生不少问题，好比没法登录，没法提交信息等。因此咱们换个思路去操做，那就是咱们先全站动态加速，不进行任何缓存，而后再去检查哪些目录是静态文件，在设置规则，对这些目录的文件进行缓存，初次建立，那你们就按照我下面的参数设置吧。

注意：表格里面没有写的，选择默认便可。

Parameter	Value
Origin Domain Name	AuroraMigrationTask
Origin Protocol Policy	HTTP Only
Allowed HTTP Methods	GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
Cache Based on Selected Request Headers	All
Forward Cookies	All
Query String Forwarding and Caching	Forward all, cache based on all
Alternate Domain Names	wp.wzlinux.com
SSL Certificate	Custom SSL Certificate，域名证书在 us-east-1 区域申请

查看效果

而后咱们建立分发，在修改域名解析以前，咱们测试一下站点如今全球的延时状况，目前网站所在区域为爱尔兰。

能够看到除了欧洲区域，其余地域延迟都比较高，如今咱们修改域名解析指向 CloudFront Domain Name，而后再测试一下延迟状况。

使用 CDN 以后，咱们能够看到海外的延迟明显降了下来，由于大陆防火墙的缘由，降低没有那么明显，不过也比以前好多了。

咱们继续浏览器访问一下，又发现了不少连接没有返回 https，因此被 blocked 了，这是为何，咱们继续分析一下如今的架构图。

前面用户访问 ALB 使用的 HTTPS，用户的请求协议其实透过请求头经过 ALB 传递到了后端服务器，如今访问 ALB 变成了 HTTP，虽然用户访问 CDN 使用的 HTTPS，CloudFront 没有把请求头没有传到后端，因此后端一直觉得是用 HTTP 访问的，致使返回的连接被浏览器 blocked。那这种状况该怎么办呢？既然请求协议没有传递到后端，那咱们能够在 CloudFront 上面添加请求头X-Forwarded-Proto。

打开咱们建立好的 distribute，选择 Origins and Origin Groups，编辑添加 Origin Custom Headers。

等待生效，本觉得这样就能够了，可是仍是不行，后来了解到 ALB 会更换请求头X-Forwarded-Proto，由于 ALB 看到 CloudFront 使用的 HTTP 请求的，因此即使咱们在 CloudFront 上面添加请求头，也是会被 ALB 重置，那么咱们只有从 wordpress 上面去下手解决问题了。

应该还记得咱们前面对 wordpress 添加的一个配置，里面有一个 if 判断条件，咱们能够去掉这个条件，让 wordpress 无论用户使用什么请求，都返回给用户 HTTPS 的连接。那咱们就这样作，把以前的配置修改以下：

$_SERVER['HTTPS']='on';

由于咱们是全站动态加速，因此看到缓存结果没有命中，这是正常的，那下面咱们来针对站点进行缓存优化，毕竟不进行缓存，那 CDN 和咸鱼又有什么区别呢？

优化缓存

咱们打开开发者模式，多访问几个页面，查看一下静态资源都在什么路径下面，好比我找到的几个静态资源URL 地址以下：

https://wp.wzlinux.com/wp-content/uploads/2020/07/mp53182456_1452216795463_2.jpeg
https://wp.wzlinux.com/wp-includes/css/dist/block-library/style.min.css?ver=5.4.2
https://wp.wzlinux.com/wp-includes/js/wp-embed.min.js?ver=5.4.2
https://wp.wzlinux.com/wp-content/themes/twentytwenty/style.css?ver=1.2
https://wp.wzlinux.com/wp-content/themes/twentytwenty/assets/js/index.js?ver=1.2

大家找到的 URL 可能比我多，不一样的主题 URL 会有些不一样，咱们就拿着几个为例子进行设置一下，能够大胆一点，咱们对整个目录进行缓存，咱们整理的路径有以下几个。

wp-content/uploads/*
wp-includes/css/*
wp-includes/js/*
wp-content/themes/twentytwenty/*

若是有什么问题，咱们能够再针对具体状况调整，那下面咱们就开始优化缓存吧。

打开 Distribution，选择建立 Behaviors，把上面的路径填写在 Path Pattern 里面，由于咱们后端服务是虚拟主机，须要咱们把 Host 这个 Request Header 传递过去，加入白名单中，其余选择默认便可：

按照这样的模式，咱们把其余几个路径也填写好。

而后咱们再去请求站点，查看咱们进行缓存的一些文件是否缓存命中。

目前看来一切正常了，你们能够慢慢完善须要缓存的内容。还等什么，给你的站点去作全站加速吧！

注意：由于咱们开启了 HTTPS 访问，因此遇到了一些问题，本文一一解释了问题的缘由以及如何解决办法，若是你不须要 HTTPS，那整个过程会更加简单。

欢迎你们扫码关注，获取更多信息