cdn实战-七牛云

基本理论

假设我有一个网站wp.tangwx.site,我使用nginx做反向代理。核心配置如下：

upstream cloudreve {
  server 127.0.0.1:5212;
}
server {
  listen 80;
  listen [::]:80;
  listen 443 ssl;
  ssl_certificate /usr/local/nginx/conf/ssl2/cert.pem;
  ssl_certificate_key /usr/local/nginx/conf/ssl2/key.pem;
  server_name wp.tangwx.site;
  index index.html index.htm index.php;
  root /data/wwwroot/wp.tangwx.site;

  if ($scheme = http ) {
    return 301 https://$host$request_uri;
  }

  location / {
    proxy_set_header HOST $host;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_redirect off;
    proxy_pass http://cloudreve;
    client_max_body_size 2000m;
  }
  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
    proxy_pass http://cloudreve;
    expires 30d;
    access_log off;
  }
  location ~ .*\.(js|css)?$ {
    proxy_pass http://cloudreve;
    expires 7d;
    access_log off;
  }
}

当我在浏览器中输入https://wp.tangwx.site的时候，浏览器肯定会去加载静态资源css、js、jpeg等等,
当然还有动态接口，比如数据请求。如上配置所示，当前所有请求(静态、动态)都是通过nginx反向代理到后端(http://cloudreve)。
那么如何让网站的静态资源走CDN呢？

答案见下图！

即当用户访问wp.tangwx.site静态资源时,让nginx将请求重定向到cdn.tangwx.site(加速域名)！！！

什么是加速域名呢？再来看下图：

---

请求重定向到cdn.tangwx.site(加速域名),由于加速域名CNAME(映射)到了CDN厂商域名，所以请求静态资源实际访问的是CDN上的资源。如果CDN没有缓存资源（假设第一次请求），那么CDN就会向我们提供的回源Host请求静态资源，然后保存到CDN服务器上。

上述提到的加速域名、回源Host、CNAME几个概念，小萌新(比如我)可能不太懂，下面贴一下权威解释，大家再对照着上图强行理解吧！

• 加速域名：指用户提供的需要使用CDN加速服务的域名，即终端用户访问的域名。
• 回源Host: 当您的源站的同一个IP地址上绑定了多个域名或站点时配置回源HOST，CDN在回源时根据HOST信息去对应站点获取资源。
• CNAM: 用于将一个域名（同名）映射到另一个域名（真实名称），域名解析服务器遇到CNAME记录会以映射到的目标重新开始查询。

---

七牛云CDN实操

1. 域名配置

域名类型：普通域名

加速域名：cdn.tangwx.site

通信协议：HTTP (暂时选择，后面可以更改HTTPS)

使用场景：根据需要选一个即可

2. 源站配置

类型： 高级设置

主线路：按照自己服务器填写

源站测试：填入一个静态资源地址，如果测试通过，说明回源地址:端口号没问题。否则检查下vps安全组端口有没有开放或者静态资源是否存在。

3. 缓存配置

使用推荐配置即可!

4. 配置CNAME

复制一下CNAME值！！！然后转到域名解析网站，配置如下解析规则：

配置完后需要等待一段时间才能生效！

可以通过ping命令检查cname配置是否生效！

如果有显示七牛的域名，说明cname生效了。

至此，cdn配置就ok了。修改你的nginx配置让静态资源访问cdn.tangwx.site即可。

5. HTTPS配置（可选）

选择本地证书–>填入证书内容即可。

6. 修改nginx

7. 验证。访问https://wp.tangwx.site

由上图可知，静态资源实际由cdn.tangwx.site返回