教你利用腾讯云 cdn 加速网站静态资源

in 网站优化 with 0 comment

今天在给 onepoint 更换 js 库的 cdn 时突然想起来,腾讯云每个月还送我 10g 的 cdn 流量包。博客里面有时候会包含很多图片,正好可以把这闲置的资源用上了。

平台信息

bt(宝塔)、apache2、typecho

类型选择

cdn 可以选择全站加速,也可以选择只对指定的静态资源加速。全站加速是博客网站里面比较常见的一种方式,部署起来比较简单,但有时候这种方式不太灵活。静态资源加速是把静态资源放到一个单独的网站里面,然后主站使用该资源站的资源,二者相互分离,互不影响。

我个人只是想要加速访问这些图片时的速度,所以我选择了更具灵活性的静态资源加速。而静态资源加速,首先需要先为这些静态资源搭建一个网站,然后对这个网站全站套上 cdn,同时设置一个较长的缓存时间。

搭建静态站

我使用的是 typecho 博客系统,上传的图片文件都在网站的usr/子目录下,所以我可以以这个文件夹为基础搭建一个静态网站。

我使用了 bt(宝塔),可以很方便的创建出该静态站。由于搭建的是静态站,所以也就不需要执行 php 了。

image-20200213192614976.png

设置伪静态

搭建好网站后,我们就可以设置伪静态了。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^.*\.php$ ./404.html [F]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . /404.html [F]
</IfModule>

<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>

上面配置规则的大概意思就是禁止访问 php 文件,禁止除文件之外的其他请求,同时对于静态图片添加缓存控制时间(7天)。

image-20200227200233298.png

注:如果你想直接改配置文件,请参考 apache2 官网文档。

为什么要设置伪静态呢?

通常伪静态只在动态网站中出现,但是我甚至不想让用户通过静态站访问我的 php 文件,即使是静态 php 文本文件也不行。所以就配置了伪静态。

添加证书

image-20200227200353131.png

添加证书是为了能够使用 https。bt 面板可以一键签发证书,自己申请即可。注意记下密钥( KEY )和证书( PEM 格式)

检验

配置完成后可以自己试着直接访问静态网站,看看能否访问文件夹、php文件以及普通的图片资源。

添加部署 cdn

校验无误后,就可以配置cdn了。

首先需要在腾讯控制台开通 cdn 服务。新用户可连续 6 个月领取每月 50GB 的免费流量包,老用户每月免费 10GB 流量包。

https://console.cloud.tencent.com/cdn/package

添加域名

image-20200213200142892.png

都按默认配置即可,需要注意的是源站设置填服务器的 ip 地址,加速业务类型选择静态加速。

域名解析

image-20200213200710773.png

添加域名完成后,在基本配置选项里面可以看到一个 CNAME 选项,我们还需要把我们的域名 cname 解析到该网址才行。不知道如何做的请自行搜索 cname 解析。

配置证书

image-20200213195715588.png

证书内容填写 bt 中记录的证书( PEM 格式),私钥内容填写 bt 中记录的密钥( KEY )。

另外,回源协议选择协议跟随(截图中没有)。

访问控制

这一步主要是防止被恶意 ddos 造成损失。

设置 ip 访问限制

image-20200213194951787.png

在域名管理中,选择对应的域名,在访问控制选项卡可以找到该项。

一秒10次的访问限制基本够用了,如果觉得太少可以改大一点。

设置带宽封顶

image-20200213200436731.png

每秒 100Mb 足够了,如果觉得太少可以改大一点。

如果想限制 https 访问,也可以在这里设置。

配置结束

至此,我们的 cdn 就配置完成了,可以感受下速度了。

https://www.onesrc.cn/

上一篇: 一行代码解决百度文库不能复制的问题
下一篇: 聊一聊我为什么还在用 360 安全卫士
Responses