Nginx学习之静态资源(2)

tellmeyesorno
243 阅读13分钟

Nginx学习之静态资源(2)

本笔记是参考《黑马程序员Nginx教程》总结，供学习查阅

1.静态资源配置优化

Nginx对静态资源如何进行优化配置。这里从三个属性配置进行优化：

sendfile on;
tcp_nopush on;
tcp_nodeplay on;

1.1 sendfile

当没有开启sendfile，那么用户请求数据，会先发请求到应用程序，应用程序向系统发起read命令后，系统从磁盘加载数据到内核缓存区里，然后再拷贝到应用缓存区里，然后再向系统发送write，然后再从应用缓冲器拷贝到socket缓冲区，然后再发送到网卡，最后返回给用户

image-20220912185118946

当开启sendfile，这个sendfile其实就是系统的一个函数，发送给系统后，系统从磁盘找到数据，加载到内核缓存区，然后再从内核缓存区直接拷贝到socket缓存区，然后再发送到网卡返回给用户

image-20220912185436213

1.2 tcp_nopush

**tcp_nopush：**该指令必须在sendfile打开的状态下才会生效，主要是用来提升网络包的传输'效率'

语法tcp_nopush on|off;
默认值tcp_nopush off;
位置http、server、location

就是先把数据缓存起来，当准备的差不多了，再发送，这样少占用网络带宽，传输效率比较高

image-20220912190208441

1.3 tcp_nodelay

tcp_nodelay该指令必须在keep-alive连接开启的情况下才生效，来提高网络包传输的'实时性'

语法tcp_nodelay on|off;
默认值tcp_nodelay on;
位置http、server、location

就是服务器端有数据了，就马上发给用户，实时性比较高

image-20220912190045991

"tcp_nopush"和”tcp_nodelay“看起来是"互斥的"，那么为什么要将这两个值都打开，这个大家需要知道的是在linux2.5.9以后的版本中两者是可以兼容的，三个指令都开启的好处是，sendfile可以开启高效的文件传输模式，tcp_nopush开启可以确保在发送到客户端之前数据包已经充分“填满”， 这大大减少了网络开销，并加快了文件发送的速度。 然后，当它到达最后一个可能因为没有“填满”而暂停的数据包时，Nginx会忽略tcp_nopush参数， 然后，tcp_nodelay强制套接字发送数据。由此可知，TCP_NOPUSH可以与TCP_NODELAY一起设置，它比单独配置TCP_NODELAY具有更强的性能。所以我们可以使用如下配置来优化Nginx静态资源的处理

2.静态资源压缩

我们传送一个1M的数据和一个10M的数据那个效率高?，答案显而易见，传输内容小，速度就会快。

所以，服务器返回给客户端的数据，最好是压缩过后，这样传输给用户速度就会快些

2.1 Gzip模块配置指令

gzip指令：该指令用于开启或者关闭gzip功能

语法gzip on|off;
默认值gzip off;
位置http、server、location...

gzip_types指令：该指令可以根据响应页的MIME类型选择性地开启Gzip压缩功能

语法gzip_types mime-type ...;
默认值gzip_types text/html;
位置http、server、location

image-20220912204726401

经过压缩后的数据，会比较小

image-20220912204752787

gzip_comp_level指令：该指令用于设置Gzip压缩程度，级别从1-9,1表示要是程度最低，要是效率最高，9刚好相反，压缩程度最高，但是效率最低最费时间

语法gzip_comp_level level;
默认值gzip_comp_level 1;
位置http、server、location
http{
	gzip_comp_level 6;
}

gzip_vary指令：该指令用于设置使用Gzip进行压缩发送是否携带“Vary:Accept-Encoding”头域的响应头部。主要是告诉接收方，所发送的数据经过了Gzip压缩处理

语法gzip_vary on|off;
默认值gzip_vary off;
位置http、server、location

image-20220912205228544

gzip_buffers指令：该指令用于处理请求压缩的缓冲区数量和大小

语法gzip_buffers number size;
默认值gzip_buffers 32 4k|16 8k;
位置http、server、location

其中number:指定Nginx服务器向系统申请缓存空间个数，size指的是每个缓存空间的大小。主要实现的是申请number个每个大小为size的内存空间。这个值的设定一般会和服务器的操作系统有关，所以建议此项不设置，使用默认值即可。

gzip_disable指令：针对不同种类客户端发起的请求，可以选择性地开启和关闭Gzip功能

语法gzip_disable regex ...;
默认值—
位置http、server、location

regex:根据客户端的浏览器标志(user-agent)来设置，支持使用正则表达式。指定的浏览器标志不使用Gzip.该指令一般是用来排除一些明显不支持Gzip的浏览器。

image-20220912205756497

gzip_http_version指令：针对不同的HTTP协议版本，可以选择性地开启和关闭Gzip功能

gzip_min_length指令：该指令针对传输数据的大小，可以选择性地开启和关闭Gzip功能

还有许多参数配置，可以参考官网API

2.2 压缩配置举例

nginx_gzip.conf :

gzip on; #开启gzip功能
gzip_types *; #压缩源文件类型,根据具体的访问资源类型设定
gzip_comp_level 6; #gzip压缩级别
gzip_min_length 1024; #进行压缩响应页面的最小长度,contentlength
gzip_buffers 4 16K; #缓存空间大小
gzip_http_version 1.1; #指定压缩响应所需要的最低HTTP请求版
本 
gzip_vary on; #往头信息中添加压缩标识
gzip_disable "MSIE [1-6]\."; #对IE6以下的版本都不进行压缩
gzip_proxied off； #nginx作为反向代理压缩服务端返回数据的条件

这些配置在很多地方可能都会用到，所以我们可以将这些内容抽取到一个配置文件中，然后通过include指令把配置文件再次加载到nginx.conf配置文件中，方法使用

2.3 Gzip和sendfile共存问题

开启sendfile以后，在读取磁盘上的静态资源文件的时候，可以减少拷贝的次数，可以不经过用户进程将静态文件通过网络设备发送出去，但是Gzip要想对资源压缩，是需要经过用户进程进行操作的。所以如何解决两个设置的共存问题。

可以使用ngx_http_gzip_static_module模块的gzip_static指令来解决

image-20220912210428538

如图，为了解决冲突，可以再找资源之前，就把资源先压缩一遍，然后再找到同名资源.gz的文件，发送给用户

gzip_static: 检查与访问资源同名的.gz文件时，response中以gzip相关的header返回.gz文件的内容。

语法gzip_static on | off | always;
默认值gzip_static off;
位置http、server、location

注意：添加上述命令后，会报一个错误，unknown directive"gzip_static"主要的原因是Nginx默认是没有添加ngx_http_gzip_static_module模块。 所以后续需要添加了这个模块，才能使用gzip_static

3.静态资源缓存处理

3.1什么是web缓存

Web缓存是指一个Web资源（如html页面，图片，js，数据等）存在于Web服务器和客户端（浏览器）之间的副本。缓存会根据进来的请求保存输出内容的副本；当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏览器才会再次下载网页

3.2web缓存的种类

客户端缓存：浏览器缓存

服务端缓存：Nginx / Redis / Memcached等

3.3浏览器缓存

是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览.

浏览器是成本最低的一种缓存实现，减少网络带宽消耗，降低服务器压力，减少网络延迟，加快页面打开速度

3.4浏览器缓存的执行流程

HTTP协议中和页面缓存相关的字段，我们先来认识下：

header说明
Expires缓存过期的日期和时间
Cache-Control设置和缓存相关的配置信息
Last-Modified请求资源最后修改时间
ETag请求变量的实体标签的当前值，比如文件的MD5值

image-20220918145324399

（1）用户首次通过浏览器发送请求到服务端获取数据，客户端是没有对应的缓存，所以需要发送request请求来获取数据； （2）服务端接收到请求后，获取服务端的数据及服务端缓存的允许后，返回200的成功状态码并且在响应头上附上对应资源以及缓存信息； （3）当用户再次访问相同资源的时候，客户端会在浏览器的缓存目录中查找是否存在响应的缓存文件 （4）如果没有找到对应的缓存文件，则走(2)步 （5）如果有缓存文件，接下来对缓存文件是否过期进行判断，过期的判断标准是(Expires), （6）如果没有过期，则直接从本地缓存中返回数据进行展示 （7）如果Expires过期，接下来需要判断缓存文件是否发生过变化 （8）判断的标准有两个，一个是ETag(Entity Tag),一个是Last-Modified （9）判断结果是未发生变化，则服务端返回304，直接从缓存文件中获取数据 （10）如果判断是发生了变化，重新从服务端获取数据，并根据缓存协商(服务端所设置的是否需要进行缓存数据的设置)来进行数据缓存。

3.5浏览器缓存相关指令

expires该指令用来控制页面缓存的作用。可以通过该指令控制HTTP应答中的“Expires"和”Cache-Control"

语法expires [modified] time expires epoch|max|off;
默认值expires off;
位置http、server、location

**time:**可以整数也可以是负数，指定过期时间，如果是负数，CacheControl则为no-cache,如果为整数或0，则Cache-Control的值为maxage=time; epoch: 指定Expires的值为'1 January,1970,00:00:01 GMT'(1970-01-0100:00:00)，Cache-Control的值no-cache **max:**指定Expires的值为'31 December2037 23:59:59GMT' (2037-12-31 23:59:59) ，Cache-Control的值为10年 **off:**默认不缓存。

add_header指令add_header指令是用来添加指定的响应头和响应值

语法add_header name value [always];
默认值—
位置http、server、location...

Cache-Control作为响应头信息，可以设置如下值：

Cache-control: must-revalidate Cache-control: no-cache Cache-control: no-store Cache-control: no-transform Cache-control: public Cache-control: private Cache-control: proxy-revalidate Cache-Control: max-age= Cache-control: s-maxage=

指令说明
must revalidate可缓存但必须再向源服务器进行确认
no-cache缓存前必须确认其有效性
no-store不缓存请求或响应的任何内容
no-transform代理不可更改媒体类型
public可向任意方提供响应的缓存
private仅向特定用户返回响应
proxy revalidate要求中间缓存服务器对缓存的响应有效性再进行 确认
max-age=<秒>响应最大Age值
s-maxage=<秒 >公共缓存服务器响应的最大Age值

image-20220918152206887

image-20220918152434598

4.静态资源防盗链

资源盗链指的是此内容不在自己服务器上，而是通过技术手段，绕过别人的限制将别人的内容放到自己页面上最终展示给用户。以此来盗取大网站的空间和流量。简而言之就是用别人的东西成就自己的网站。

image-20220918160135028

4.1Nginx防盗链的实现原理

了解防盗链的原理之前，我们得先学习一个HTTP的头信息Referer,当浏览器向web服务器发送请求的时候，一般都会带上Referer,来告诉浏览器该网页是从哪个页面链接过来的。

后台服务器可以根据获取到的这个Referer信息来判断是否为自己信任的网站地址，如果是则放行继续访问，如果不是则可以返回403(服务端拒绝访问)的状态信息。

image-20220918161746895

4.2Nginx防盗链的具体实现

valid_referers: nginx会通就过查看referer自动和valid_referers后面的内容进行匹配，如果匹配到了就将$invalid_referer变量置0，如果没有匹配到，则将$invalid_referer变量置为1，匹配的过程中不区分大小写。

语法valid_referers none|blocked|server_names|string...
默认值—
位置server、location

none: 如果Header中的Referer为空，允许访问 **blocked:**在Header中的Referer不为空，但是该值被防火墙或代理进行伪装过，如不带"http://" 、"https://"等协议头的资源允许访问。 **server_names:**指定具体的域名或者IP string: 可以支持正则表达式和*的字符串。如果是正则表达式，需要以~开头表示，例如

image-20220918161912744

Referer的限制比较粗，比如随意加一个Referer，上面的方式是无法进行限制的。那么这个问题改如何解决？

此处我们需要用到Nginx的第三方模块ngx_http_accesskey_module，第三方模块如何实现盗链

5.跨域

5.1同源策略

浏览器的同源策略：是一种约定，是浏览器最核心也是最基本的安全功能，如果浏览器少了同源策略，则浏览器的正常功能可能都会受到影响。

同源: 协议、域名(IP)、端口相同即为同源

http://192.168.200.131/user/1
https://192.168.200.131/user/1
不 
http://192.168.200.131/user/1
http://192.168.200.132/user/1
不 
http://192.168.200.131/user/1
http://192.168.200.131:8080/user/1
不
http://www.nginx.org:80/user/1
http://www.nginx.org/user/1
满足

5.2跨域问题

有两台服务器分别为A,B,如果从服务器A的页面发送异步请求到服务器B获取数据，如果服务器A和服务器B不满足同源策略，则就会出现跨域问题。

image-20220918155041700

nginx.conf里增加两台模拟服务器，80和8080,80提供页面给用户展示，当用户点击查询的时候，80页面的服务会从8080查询数据并通过80返回给用户浏览器中，浏览器接收数据后，会发现不是同源的会报跨域错误

server{
    listen 8080;
    server_name localhost;
    location /getUser{
    default_type application/json;
        return 200 '{"id":1,"name":"TOM","age":18}';
    }
} 
server{
    listen 80;
    server_name localhost;
    location /{
        root html;
        index index.html;
    }
}

5.3解决方案

使用add_header指令，该指令可以用来添加一些头信息

语法add_header name value...
默认值—
位置http、server、location

此处用来解决跨域问题，需要添加两个头信息，一个是AccessControl-Allow-Origin , Access-Control-Allow-Methods

Access-Control-Allow-Origin: 直译过来是允许跨域访问的源地址信息，可以配置多个(多个用逗号分隔)，也可以使用*代表所有源

Access-Control-Allow-Methods:直译过来是允许跨域访问的请求方式，值可以为 GET POST PUT DELETE...,可以全部设置，也可以根据需要设置，多个用逗号分隔

8080加上如下配置，即可允许跨域

location /getUser{
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods
    GET,POST,PUT,DELETE;
    default_type application/json;
    return 200 '{"id":1,"name":"TOM","age":18}';
}
avatar
文章
阅读
粉丝