1.静态资源类型

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

⾮服务器动态运⾏⽣成的⽂件属于静态资源

**类型  ** **种类 **
浏览器端渲染 HTML、CSS、JS
图⽚ JPEG、GIF、PNG
视频 FLV、Mp4
⽂件 TXT、任意下载⽂件

2.静态资源场景

静态资源传输延迟最⼩化

3.静态资源配置语法

3.1 ⽂件读取⾼效

1
2
3
Syntax:	sendfile	on	|	off;
Default:	sendfile	off;
Context:	http,	server,	location,	if in	location

3.2** 提高网络传输效率** nopush

**sendfile开启情况下,**提⾼⽹络包的’传输效率’
相当于等一个区域的快递到了后一起发货，实时性得不到保障

1
2
3
4
Syntax:	tcp_nopush	on	|	off;
Default:	tcp_nopush	off;
Context:	http,	server,	location
作⽤:	sendfile开启情况下,	提⾼⽹络包的'传输效率'

3.3 与 tcp_nopush 之对应的配置 tcp_nodelay

1
2
3
4
Syntax:	tcp_nodelay	on	|	off;
Default:	tcp_nodelay	on;
Context:	http,	server,	location
作⽤:	在keepalive连接下,提⾼⽹络的传输'实时性'

4.静态资源⽂件压缩

Nginx 将响应报⽂发送⾄客户端之前可以启⽤压缩功能，这能够有效地节约带宽，并提⾼响应⾄
客户端的速度。


4.1 gzip 压缩配置语法

1
2
3
4
Syntax:	gzip	on	|	off;
Default:	gzip	off;
Context:	http,	server,	location,	if	in	location
作⽤:	传输压缩

4.2 gzip 压缩⽐率配置语法

1
2
3
4
Syntax:	gzip_comp_level	level;
Default:	gzip_comp_level	1;
Context:	http,	server,	location
作⽤:	压缩本身⽐较耗费服务端性能

4.3 gzip 压缩协议版本

1
2
3
4
Syntax:	gzip_http_version	1.0	|	1.1;
Default:	gzip_http_version	1.1;
Context:	http,	server,	location
作⽤:	压缩使⽤在http哪个协议,	主流版本1.1

4.4 扩展压缩模块

1
2
3
4
Syntax:	gzip_static	on	|	off	|	always;
Default:	gzip_static	off;
Context:	http,	server,	location
作⽤:	预读gzip功能

4.5 图⽚压缩案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[root@Nginx	conf.d]#	mkdir	-p	/soft/code/images
[root@Nginx	conf.d]#	cat	static_server.conf
server	{
								listen	80;
								server_name	192.168.56.11;
								sendfile on;
								access_log /var/log/nginx/static_access.log main;
								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;
								}
}

没有开启 gzip 图⽚压缩

启⽤ gzip 压缩图⽚后(由于图⽚之前压缩过, 所以压缩⽐率不太明显)

4.6 ⽂件压缩案例

**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[root@Nginx	conf.d]#	mkdir	-p	/soft/code/images
[root@Nginx	conf.d]#	cat	static_server.conf
server	{
								listen	80;
								server_name	192.168.56.11;
								sendfile on;
								access_log /var/log/nginx/static_access.log main;
									location	~	.*\.(txt|xml)$	{
																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/doc;
								}
}

没有启⽤ gzip ⽂件压缩

启⽤ gzip 压缩

**

5.静态资源浏览器缓存

HTTP协议定义的缓存机制(如: Expires; Cache-control 等)

5.1. 浏览器⽆缓存

浏览器请求->⽆缓存->请求WEB服务器->请求响应->呈现

5.2. 浏览器有缓存

浏览器请求->有缓存->校验过期->是否有更新->呈现

校验是否过期 Expires HTTP1.0, Cache-Control(max-age) HTTP1.1 协议中Etag头信息校验 Etag () Last-Modified头信息校验 Last-Modified (具体时间)

5.3.缓存配置语法

1
2
3
4
5
Syntax:	expires	[modified]	time;
expires	epoch	|	max	|	off;
Default:	expires	off;
Context:	http,	server,	location,	if in location
作⽤:	添加Cache-Control	Expires头

5.4.配置静态资源缓存

1
2
3
4
5
6
7
8
location ~	.*\.(js|css|html)$	{
				root	/soft/code/js;
				expires	1h;
}
location ~	.*\.(jpg|gif|png)$	{
				root	/soft/code/images;
				expires	30d;
}

5.5.开发代码没有正式上线时, 希望静态⽂件不被缓存

1
2
3
4
5
//取消js	css	html等静态⽂件缓存
location	~	.*\.(css|js|swf|json|mp4|htm|html)$	{
add_header	Cache-Control	no-store;
add_header	Pragma	no-cache;
}

6.静态资源跨域访问

浏览器禁⽌跨域访问, 主要不安全, 容易出现 CSRF 攻击

6.1 Nginx 跨域访问配置

1
2
3
4
Syntax:	add_header	name	value	[always];
Default:	—
Context:	http,	server,	location,	if	in	location
Access-Control-Allow-Origin

6.2 准备 html ⽂件

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
26
//在www.fl.com⽹站添加跨越访问⽂件 [root@Nginx ~]# cat
/soft/code/http_origin.html
<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://kt.fl.com/index.html",
        success: function (data) {
          alert("sucess!!!");
        },
        error: function () {
          alert("fail!!,请刷新再试!");
        },
      });
    });
  </script>
  <body>
    <h1>测试跨域访问</h1>
  </body>
</html>

6.3 配置 Nginx 跨域访问

1
2
3
4
5
6
7
8
9
10
11
12
13
//运⾏www.fl.com域名跨域访问
[root@Nginx	conf.d]#	cat	origin.conf
server	{
  listen	80;
  server_name	kt.fl.com;
  sendfile	on;
  access_log	/var/log/nginx/kuayue.log	main;
  location	~	.*\.(html|htm)$	{
    add_header	Access-Control-Allow-Origin	http://www.fl.com;
    add_header	Access-Control-Allow-Methods	GET,POST,PUT,DELETE,OPTIONS;
    root	/soft/code;
  }
}

7.静态资源防盗链

盗链指的是在⾃⼰的界⾯展示不在⾃⼰服务器上的内容，通过技术⼿段获得他⼈服务器的资源地址，绕过别⼈资源展示⻚⾯，在⾃⼰⻚⾯向⽤户提供此内容，从⽽减轻⾃⼰服务器的负担，因为
真实的空间和流量来⾃别⼈服务器


防盗链设置思路: 区别哪些请求是⾮正常⽤户请求

基于 http_refer 防盗链配置模块

1
2
3
Syntax:	valid_referers	none	|	blocked	|	server_names	|	string	...运行的ip or 域名;
Default:	—
Context:	server,	location

7.1 准备html⽂件

1
2
3
4
5
6
7
8
9
10
<html>
  <head>
    <meta charset="utf-8">
    <title>pachong<title>
      7.静态资源防盗链
      </head>
      <body style="background-color:red;">
        <img src="http://192.168.2.128/test.jpg">
      </body>
      </html>

7.2 启动防盗链

1
2
3
4
5
6
7
8
9
//⽀持IP、域名、正则⽅式
location	~	.*\.(jpg|gif|png)$	{
//只允许从www.fl.com来的链接
  valid_referers	none	blocked	www.fl.com;
  if	($invalid_referer)	{
    return	403;
  }
root	/soft/code/images;
}