【04】Nginx之静态资源优化配置语法

news/2024/11/30 15:32:43/

Nginx静态资源压缩实战

在Nginx的配置文件中可以通过配置gzip来对静态资源进行压缩，相关的指令可以配置在http块、server块和location块中，Nginx可以通过一下指令进行解析和处理

ngx_http_gzip_module模块
ngx_http_gzip_static_module模块
ngx_http_gunzip_module模块

Gzip模块配置指令

接下来所学习的指令都来自ngx_http_gzip_module模块，该模块会在nginx安装的时候内置到nginx的安装环境中，也就是说我们可以直接使用这些指令。

  1. gzip指令：该指令用于开启或者关闭gzip功能
语法gzip on|off;
默认值gzip off;
位置http、server、location…

注意只有该指令为打开状态，下面的指令才有效果

http{gzip on;
}
  1. gzip_types指令：该指令可以根据响应页的MIME类型选择性地开启Gzip压缩功能
语法gzip_types mime-type …;
默认值gzip_types text/html;
位置http、server、location

所选择的值可以从mime.types文件中进行查找，也可以使用"*"代表所有。

http{gzip_types application/javascript;
}
  1. gzip_comp_level指令：该指令用于设置Gzip压缩程度，级别从1-9,1表示要是程度最低，要是效率最高，9刚好相反，压缩程度最高，但是效率最低最费时间。
语法gzip_comp_level level;
默认值gzip_comp_level 1;
位置http、server、location
http{gzip_comp_level 6;
}
  1. gzip_vary指令：该指令用于设置使用Gzip进行压缩发送是否携带“Vary:Accept-Encoding”头域的响应头部。主要是告诉接收方，所发送的数据经过了Gzip压缩处理
语法gzip_vary on|off;
默认值gzip_vary off;
位置http、server、location
  1. gzip_buffers指令：该指令用于处理请求压缩的缓冲区数量和大小。
语法gzip_buffers number size;
默认值gzip_buffers 32 4k|16 8k;
位置http、server、location

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

gzip_buffers 4 16K;	  #缓存空间大小
  1. gzip_disable指令：针对不同种类客户端发起的请求，可以选择性地开启和关闭Gzip功能。
语法gzip_disable regex …;
默认值—
位置http、server、location

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

gzip_disable "MSIE [1-6]\.";
  1. gzip_http_version指令：针对不同的HTTP协议版本，可以选择性地开启和关闭Gzip功能。
语法gzip_http_version 1.0|1.1;
默认值gzip_http_version 1.1;
位置http、server、location

该指令是指定使用Gzip的HTTP最低版本，该指令一般采用默认值即可。

  1. gzip_min_length指令：该指令针对传输数据的大小，可以选择性地开启和关闭Gzip功能
语法gzip_min_length length;
默认值gzip_min_length 20;
位置http、server、location
nignx计量大小的单位：bytes[字节] / kb[千字节] / M[兆]
例如: 1024 / 10k|K / 10m|M

Gzip压缩功能对大数据的压缩效果明显，但是如果要压缩的数据比较小的化，可能出现越压缩数据量越大的情况，因此我们需要根据响应内容的大小来决定是否使用Gzip功能，响应页面的大小可以通过头信息中的Content-Length来获取。但是如何使用了Chunk编码动态压缩，该指令将被忽略。建议设置为1K或以上。

  1. gzip_proxied指令：该指令设置是否对服务端返回的结果进行Gzip压缩。
语法gzip_proxied off|expired|no-cache|
no-store|private|no_last_modified|no_etag|auth|any;
默认值gzip_proxied off;
位置http、server、location
off - 关闭Nginx服务器对后台服务器返回结果的Gzip压缩
expired - 启用压缩，如果header头中包含 "Expires" 头信息
no-cache - 启用压缩，如果header头中包含 "Cache-Control:no-cache" 头信息
no-store - 启用压缩，如果header头中包含 "Cache-Control:no-store" 头信息
private - 启用压缩，如果header头中包含 "Cache-Control:private" 头信息
no_last_modified - 启用压缩,如果header头中不包含 "Last-Modified" 头信息
no_etag - 启用压缩 ,如果header头中不包含 "ETag" 头信息
auth - 启用压缩 , 如果header头中包含 "Authorization" 头信息
any - 无条件启用压缩

Gzip压缩功能的实例配置

gzip on;  			  #开启gzip功能
gzip_types *;		  #压缩源文件类型,根据具体的访问资源类型设定
gzip_comp_level 6;	  #gzip压缩级别
gzip_min_length 1024; #进行压缩响应页面的最小长度,content-length
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配置文件中，方法使用。

nginx_gzip.conf

gzip on;
gzip_types *;
gzip_comp_level 6;
gzip_min_length 1024;
gzip_buffers 4 16K;
gzip_http_version 1.1;
gzip_vary  on;
gzip_disable "MSIE [1-6]\.";
gzip_proxied  off;

nginx.conf

include nginx_gzip.conf

Gzip和sendfile共存问题

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

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

gzip_static指令

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模块。如何来添加?

添加模块到Nginx的实现步骤

(1)查询当前Nginx的配置参数

nginx -V

(2)将nginx安装目录下sbin目录中的nginx二进制文件进行更名

cd /usr/local/nginx/sbin
mv nginx nginxold

(3) 进入Nginx的安装目录

cd /root/nginx/core/nginx-1.16.1

(4)执行make clean清空之前编译的内容

make clean

(5)使用configure来配置参数

./configure --with-http_gzip_static_module

(6)使用make命令进行编译

make

(7) 将objs目录下的nginx二进制执行文件移动到nginx安装目录下的sbin目录中

mv objs/nginx /usr/local/nginx/sbin

(8)执行更新命令

make upgrade

静态资源的缓存处理

什么是缓存

缓存（cache），原始意义是指访问速度比一般随机存取存储器（RAM）快的一种高速存储器，通常它不像系统主存那样使用DRAM技术，而使用昂贵但较快速的SRAM技术。缓存的设置是所有现代计算机系统发挥高性能的重要因素之一。

什么是web缓存

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

web缓存的种类

客户端缓存浏览器缓存
服务端缓存Nginx / Redis / Memcached等

浏览器缓存

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

为什么要用浏览器缓存

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

浏览器缓存的执行流程

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s1nDJ0qA-1684804630147)(null)]

（1）用户首次通过浏览器发送请求到服务端获取数据，客户端是没有对应的缓存，所以需要发送request请求来获取数据；

（2）服务端接收到请求后，获取服务端的数据及服务端缓存的允许后，返回200的成功状态码并且在响应头上附上对应资源以及缓存信息；

（3）当用户再次访问相同资源的时候，客户端会在浏览器的缓存目录中查找是否存在响应的缓存文件

（4）如果没有找到对应的缓存文件，则走(2)步

（5）如果有缓存文件，接下来对缓存文件是否过期进行判断，过期的判断标准是(Expires),

（6）如果没有过期，则直接从本地缓存中返回数据进行展示

（7）如果Expires过期，接下来需要判断缓存文件是否发生过变化

（8）判断的标准有两个，一个是ETag(Entity Tag),一个是Last-Modified

（9）判断结果是未发生变化，则服务端返回304，直接从缓存文件中获取数据

（10）如果判断是发生了变化，重新从服务端获取数据，并根据缓存协商(服务端所设置的是否需要进行缓存数据的设置)来进行数据缓存。

浏览器缓存相关指令

Nginx需要进行缓存相关设置，就需要用到如下的指令

expires指令

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

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

time:可以整数也可以是负数，指定过期时间，如果是负数，Cache-Control则为no-cache,如果为整数或0，则Cache-Control的值为max-age=time;

epoch: 指定Expires的值为’1 January,1970,00:00:01 GMT’(1970-01-01 00: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=<seconds>
Cache-control: s-maxage=<seconds>
指令说明
must-revalidate可缓存但必须再向源服务器进行确认
no-cache缓存前必须确认其有效性
no-store不缓存请求或响应的任何内容
no-transform代理不可更改媒体类型
public可向任意方提供响应的缓存
private仅向特定用户返回响应
proxy-revalidate要求中间缓存服务器对缓存的响应有效性再进行确认
max-age=<秒>响应最大Age值
s-maxage=<秒>公共缓存服务器响应的最大Age值

max-age=[秒]：

Nginx的跨域问题解决

这块内容，我们主要从以下方面进行解决：

什么情况下会出现跨域问题?
实例演示跨域问题
具体的解决方案是什么?

同源策略

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

同源: 协议、域名(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.com/user/1
http://www.nginx.org/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
满足

跨域问题

简单描述下:

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

跨域问题的案例演示

出现跨域问题会有什么效果?,接下来通过一个需求来给大家演示下：

（1）nginx的html目录下新建一个a.html

<html><head><meta charset="utf-8"><title>跨域问题演示</title><script src="jquery.js"></script><script>$(function(){$("#btn").click(function(){$.get('http://192.168.200.133:8080/getUser',function(data){alert(JSON.stringify(data));});});});</script></head><body><input type="button" value="获取数据" id="btn"/></body>
</html>

（2）在nginx.conf配置如下内容

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;}
}

解决方案

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

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

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

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

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

具体配置方式

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}';
}

静态资源防盗链

什么是资源盗链

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

Nginx防盗链的实现原理：

了解防盗链的原理之前，我们得先学习一个HTTP的头信息Referer,当浏览器向web服务器发送请求的时候，一般都会带上Referer,来告诉浏览器该网页是从哪个页面链接过来的。后台服务器可以根据获取到的这个Referer信息来判断是否为自己信任的网站地址，如果是则放行继续访问，如果不是则可以返回403(服务端拒绝访问)的状态信息。

Nginx防盗链的具体实现:

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: 可以支持正则表达式和*的字符串。如果是正则表达式，需要以~开头表示，例如

location ~*\.(png|jpg|gif){valid_referers none blocked www.baidu.com 192.168.200.222 *.example.com example.*  www.example.org  ~\.google\.;if ($invalid_referer){return 403;}root /usr/local/nginx/html;
}

遇到的问题:图片有很多，该如何批量进行防盗链？

针对目录进行防盗链

配置如下：

location /images {valid_referers none blocked www.baidu.com 192.168.200.222 *.example.com example.*  www.example.org  ~\.google\.;if ($invalid_referer){return 403;}root /usr/local/nginx/html;
}

这样我们可以对一个目录下的所有资源进行翻到了操作。

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

此处我们需要用到Nginx的第三方模块ngx_http_accesskey_module，第三方模块如何实现盗链，如果在Nginx中使用第三方模块的功能，这些我们在后面的Nginx的模块篇再进行详细的讲解。


http://www.ppmy.cn/news/88895.html

相关文章

关于 C/C++ 中的 switch 语句，您可能不知道

关于 C/C++ 中的 switch 语句，您可能不知道

关于 C/C 中的 switch 语句&#xff0c;您可能不知道 关于如何通过VC中的逆向工程执行开关/案例的讨论 介绍 许多编程语言&#xff0c;如 C/C、C#、Java 和 Pascal 都提供了让我们实现选择逻辑的语句。在某些情况下&#xff0c;它是 的良好替代方法&#xff0c;使代码更清晰、…
阅读更多...
AirPlay视频SDK集成

AirPlay视频SDK集成

1定义 表1描述了本文档中使用的术语 表1:术语定义 术语定义AirPlay苹果的协议，用于通过网络将苹果设备上的内容共享给支持的配件。AirPlay可以在几种不同的模式下使用，如表2所示。支持所有模式是必需的。AirPlay 接收支持AirPlay协议的配件，可以从苹果设备上无线播放内容。例…
阅读更多...
BigDecimal 保留2为小数 四舍五入 和舍弃

BigDecimal 保留2为小数 四舍五入 和舍弃

amount.divide(BigDecimal.valueOf(monthDays),2,BigDecimal.ROUND_HALF_UP);System.out.println("ROUND_HALF_UP"ROUND_HALF_UP); //6.67amount.divide(BigDecimal.valueOf(monthDays),2,BigDecimal.ROUND_DOWN); //6.66 BUG解决 FeeAmountt().divide(LoanAmount()…
阅读更多...
c# 事件与委托

c# 事件与委托

//在C#中&#xff0c;事件是一种特殊的委托&#xff0c;它允许对象通知其他对象发生了某个特定的事件。 //事件通常用于GUI应用程序中&#xff0c;例如当用户单击按钮时&#xff0c;按钮控件会引发Click事件&#xff0c; //然后其他对象可以订阅该事件并执行相应的操作。 //以…
阅读更多...
android应用市场的上线流程

android应用市场的上线流程

国内Android应用市场有很多&#xff0c;各有各的优势&#xff0c;对于开发者而言会在每个市场发布&#xff0c;或者在主要的市场发布后其它应用市场会抓取信息并自动上线App&#xff0c;这也节省开发者上线时间。App上线前首先要申请软件著作权&#xff0c;国内应用市场上线基本…
阅读更多...
redis-cli 命令总结

redis-cli 命令总结

Redis 提供了丰富的命令&#xff08;command&#xff09;对数据库和各种数据类型进行操作&#xff0c;这些 command 可以在 Linux 终端使用。在编程时&#xff0c;比如使用 Redis 的 Java 语言包&#xff0c;这些命令都有对应的方法。下面将 Redis 提供的命令做一总结。 官网命…
阅读更多...
Node版本管理器nvm的安装与使用

Node版本管理器nvm的安装与使用

前言&#xff1a; 多项目新旧项目管理的时候&#xff0c;往往与依赖不同的node版本&#xff0c;不同的版本对其他依赖的安装有一定的影响&#xff0c;因此我们需要对node的版本进行方便快捷管理和切换&#xff0c;如果直接卸载重装对应版本&#xff0c;切换项目再次卸载重装明显…
阅读更多...
leetcode--环形链表.找到入环节点（java）

leetcode--环形链表.找到入环节点（java）

环形链表II 环形链表.找到入环节点题目描述解题思路 环形链表.找到入环节点 LeetCode 142&#xff1a;环形链表II 可以在这里测试 题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节…
阅读更多...
最新文章

Copyright @ 2022~2023