03 Nginx 静态资源 web服务

发表于 | 分类于


静态资源概述

Nginx 作为静态资源 Web 服务器部署配置,传输非常高效,常常用于 静态资源处理请求,动静分离。

静态资源配置语法

文件读取高效 sendfile

1
开启后,文件不需要通过 用户空间 传输文件,直接在内核中copy

提高网络传输效率 nopush

1
看业务是要求 实时性 还是 传输效率

静态资源 文件压缩 gzip

1
2
3
1. 压缩 相当于 把碎文件 打了一个包整体传输,而且包的大小会变小,减少带宽
2. 相对应会增加服务器的cpu性能消耗
3. 服务端压缩,浏览器会帮我们解压

压缩图片

1
2
1. 创建图片目录
[root@nginx-node1 src]# mkdir /soft/code/images
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2. 配置文件
# /nginx/nginx.conf 下别忘记优化
# sendfile on;        # 文件读取高效
# tcp_nopush on;      # 数据包累计到一定大小发送
# tcp_nodelay on;     # 尽快发送数据包

[root@nginx-node1 conf.d]# vim image.conf 

server {
    listen       80;
    server_name  localhost;

    location ~ .*\.(jpg|gif|png)$ {
        # gzip off;
        # gzip_http_version 1.1;
        # gzip_comp_level 2;
        # gzip_types text/plain application/json application/x-javascript application/css application/xml 
        # application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        root /soft/code/images;
    }
}
  • 在没有优化gzip压缩的时候,访问的图片大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 压缩类型在 vim /etc/nginx/mime.types 对应添加,没有的可以自己补上

server {
    listen       80;
    server_name  localhost;

    location ~ .*\.(jpg|gif|png)$ {
        gzip on;                        # 开启压缩
        gzip_http_version 1.1;          # http 版本
        gzip_comp_level 2;              # 压缩级别 2-6
        gzip_types text/plain application/json application/x-javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩级别
        root /soft/code/images;         
    }
}
  • 启用 gzip 压缩图片后(由于图片之前压缩过, 所以压缩比率不太明显)

压缩文本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
[root@nginx-node1 conf.d]# mkdir -p /soft/code/doc

server {
    listen       80;
    server_name  localhost;

    location ~ .*\.(jpg|gif|png)$ {
        gzip on;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types text/plain application/json application/x-javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        root /soft/code/images;
    }

    location ~ .*\.(txt|xml)$ {
        gzip on;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types text/plain text/xml image/jpeg image/gif image/png;
        root /soft/code/doc;
    }

}

# 源XML文件从260KB 压缩到 12.5KB

浏览器 缓存概述

浏览器缓存 实战案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 图片缓存30天，css 和 js文件缓存1小时
    location ~ .*\.(jpg|gif|png)$ {
        gzip on;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        root /soft/code/images;
        expires 30d;
    }
    
    location ~ .*\.(css|js)$ {
        gzip on;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        root /soft/code/images;
        expires 1h;
    }

# 以下面开头的目录下面的文件 都存在缓存时间

静态资源 防盗链

  1. 防止资源被盗用

  2. 防盗链设置思路: 区别哪些请求是否正常用户请求

  3. 基于 http_refer 防盗链配置模块,判断如果不是我公司的域名访问图片,不允许调用

1
2
3
4
5
6
7
8
9
10
1. 页面调用本地的图片资源
<html>
	<head>
		<meta charset="utf-8"> 
		<title>pachong<title>
	</head> 
		<body style="background-color:red;"> 
		<img src="http://47.56.134.107/timg_01.jpg">
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
2.启动防盗链
# 支持 IP、域名、正则方式
# 一般情况是域名 因为会用到CDN cdn.leo.com
location ~ .*\.(jpg|gif|png)$ {
    valid_referers none blocked 47.56.134.107;
	if ($invalid_referer) {
        return    403;
    }
    root /soft/code/images;
}

静态资源小结

  • Nginx 做静态web站点
  • html、css、js、png、jpg、视频、文本…
    1. 压缩
    2. 浏览器缓存
    3. 跨域访问
    4. 防止图片