静态资源服务

需求分析

  • 类型分类:不同类型的资源匹配不通的规则
  • 浏览器缓存:不通类型的资源设置合理的缓存生命周期,减少不需要的性能开销
  • 防盗链/盗用:设置资源的防盗链和防盗用,通过验证http-referrer和secure_link来验证资源的正常访问请求和控制链接生命周期,避免资源被随意盗用
  • 流量限制:通过流量限制避免移动端强制升级时,大量客户端将静态资源服务器带宽打满无法提供正常服务的情况
  • 压缩:通过配置压缩降低网络带宽的使用情况,但是要注意压缩的资源类型,那些是压缩收益高的资源,那些是压缩收益低的资源,压缩所带来的成本和收益,预编译的考虑
  • 关闭access_log: 不必要的日志进行关闭以节省IO和空间
  • 硬件需求:磁盘容量、转速和读写性能

处理静态资源文件时,主要参数如下

网络相关

  • sendfile: 减少用户空间和内核空间上下文切换及拷贝次数
  • tcp_nopush: 默认为off,设置为on时,提高大文件网络传输的性能,需要sendfile为on
  • tcp_nodelay: 默认为on,设置为off时,缩短网络响应时间,对于交互性要求比较高的应用需要设置为off

压缩相关

  • gzip: 是否开启压缩,默认off,建议加在location块
  • gzip_http_version:http版本,默认1.1 其实并不需要设置,但是确保万一
  • gzip_comp_level:压缩级别,默认为1,级别范围1-9
  • gzip_types:压缩什么类型的文件
  • gzip_static: 预压缩

配置语法

        location ~ .*\.(jpg|jpeg|txt)$ {
            root  html;
            gzip  on;
            gzip_http_version 1.1;
            gzip_comp_level 1;
            gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        }

测试后总结下

  • 图片:有时压缩的不是特别好,大概三分之一到一半左右,有时会更差,因为图片本身经过压缩
  • 文本:效果非常的好,15M的日志文件,压缩后浏览器获取时只有972KB,简直不要太爽

预压缩 简单说就是提前压缩,用来减少nginx处理请求时压缩带来的额外cpu开销,节省服务器CPU资源,但是缺点是占用磁盘空间(如果需要留双份源文件、压缩包的话)

手动预先gzip压缩

[root@bj-vmware-test1 download]# cd /opt/app/download/
[root@bj-vmware-test1 download]# ls
1.html  1.jpg
[root@bj-vmware-test1 download]# gzip 1.jpg 
[root@bj-vmware-test1 download]# ls
1.html  1.jpg.gz

配置语法

    location ~ ^/download {
         gzip_static on;
         tcp_nopush on;
         root /opt/app/;
    }

测试访问,不需要跟上.gz后缀也能访问到图片 http://192.168.2.20/download/1.jpg

浏览器缓存相关

  • expires: 给浏览器头部添加缓存生命周期(Expires、Last-Modified) 配置语法
    location / {
      expires 24h;
      root   /usr/share/nginx/html;
      index  index.html index.htm;
    }
    

跨站访问

跨站访问简单来说就是,客户端请求的页面里引用了另外一个服务器的内容,这种情况下客户端浏览器会认为时不安全的,所以会禁止掉

测试页面

<html lang="en">  
<head>  
<meta charset="UTF-8" />  
<title>测试ajax和跨域访问</title>  
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
</head>  
<script type="text/javascript">  
$(document).ready(function(){  
    $.ajax({  
        type: "GET",  
        url: "http://www.ching.com/index.html",  
        success: function(data) {   
            alert("sucess!!!");  
        },  
        error: function() {  
            alert("fail!!!,请刷新再试!");  
        }  
    });  
});  
</script>  
<body>  
     <h1>测试跨域访问</h1>
</body>  
</html>

访问效果,除了alert信息,浏览器console里可以看到报错信息

XMLHttpRequest cannot load http://download.hrb.aiplatform.com.cn/index.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.2.20' is therefore not allowed access.

Nginx解决跨域问题的方法,在被引用端的Nginx上设置允许跨域规则

这是允许一个域访问的规则,如果是多个域,http://blog.sina.com.cn/s/blog_3eba8f1c0102xki2.html,目前还看不懂这个人的配置,在学习下再补充这篇文档

如果允许所有的域的话,直接配置为*就行了

server {
        server_name    www.ching.com;
        sendfile       on;

        location ~ .*\.(htm|html)$ {
            if ($request_method ~* "(GET|POST)") {
                add_header "Access-Control-Allow-Origin"  "*";
                add_header "Access-Control-Allow-Methods" "GET,POST,PUT,DELETE,OPTIONS";
            }
            root  /opt/app/code/ching;
        }
}

防盗链

避免非正常用户的请求给服务器带来不必要的性能开销

简单实现防盗链

配置如下

server {
    listen         80;
        server_name    192.168.2.20 www.lotus.com;
        sendfile       on;

        location ~ .*\.(htm|html)$ {
            root  /usr/share/nginx/html;
        }

        location ~ .*\.(png)$ {
            valid_referers none blocked *.lotus.com server_names ~\.google\. ~\.baidu\.;
            if ($invalid_referer) {
                return 403;
            }
            root /opt/app/images;
        }    
}

valid_referers

  • none: 允许头部"Referer"为空
  • blocked: 来源头部不为空,但是里面的值被代理或者防火墙删除了,简单来说就是不以http://或者https://开头的
  • server_names: 表示当前域名
  • *.lotus.com: 通配多级域名
  • ~.google.: 通配Google

使用curl测试配置,-e参数是设置referer信息

测试允许规则

测试none,没有referer信息时

[root@bj-vmware-test1 html]# curl -I http://192.168.2.20/test.png
HTTP/1.1 200 OK
Server: nginx/1.12.2
...

测试blocked,没有http或者https

[root@bj-vmware-test1 html]# curl -e "www.test.com" -I http://192.168.2.20/test.png
HTTP/1.1 200 OK
...

测试通配多级域名*.lotus.com

[root@bj-vmware-test1 html]# curl -e "http://a1.lotus.com" -I http://192.168.2.20/test.png
HTTP/1.1 200 OK
Server: nginx/1.12.2
...

[root@bj-vmware-test1 html]# curl -e "http://a2.lotus.com" -I http://192.168.2.20/test.png
HTTP/1.1 200 OK
Server: nginx/1.12.2
...

测试正则匹配google、baidu

[root@bj-vmware-test1 html]# curl -e "http://img.google.com" -I http://192.168.2.20/test.png
HTTP/1.1 200 OK
Server: nginx/1.12.2
...

[root@bj-vmware-test1 html]# curl -e "http://img.baidu.com" -I http://192.168.2.20/test.png
HTTP/1.1 200 OK
Server: nginx/1.12.2
...

测试允许规则之外的请求

[root@bj-vmware-test1 html]# curl -e "http://ching.com" -I http://192.168.2.20/test.png
HTTP/1.1 403 Forbidden
Server: nginx/1.12.2
...

results matching ""

    No results matching ""