文章目录
- 1. Nginx静态资源概述
- 2. Nginx静态资源配置指令
- 2.1 listen指令
- 2.2 server_name指令
- 2.2.1 精确匹配
- 2.2.2 补充知识:hosts文件
- 2.2.3 通配符匹配
- 2.2.4 正则表达式匹配
- 2.2.5 匹配的执行顺序
- 2.3 location指令
- 2.3.1 uri以指定模式开始(/)
- 2.3.2 uri必须与指定的模式精确匹配(=)
- 2.3.3 uri中包含正则表达式(`~、~*、^~`)
- 2.4 设置请求资源的目录(root&alias)
- 2.5 index指令
- 2.6 error_page指令
- 3. Nginx静态资源优化配置
- 3.1 send_file指令
- 3.2 tcp_nopush指令&tcp_nodelay指令
- 4. Nginx静态资源压缩
- 4.1 Gzip模块配置指令
- 4.1.1 gzip指令
- 4.1.2 gzip_types指令
- 4.1.3 gzip_comp_level指令
- 4.1.4 gzip_vary指令
- 4.1.5 gzip_buffers指令
- 4.1.6 gzip_disable指令
- 4.1.7 gzip_http_version指令
- 4.1.8 gzip_min_length指令
- 4.1.9 gzip_proxied指令
- 4.2 Gzip压缩功能配置示例
- 4.3 Gzip和send_file共存的问题
- 4.3.1 问题分析
- 4.3.2 gzip_static指令的作用
- 4.3.3 测试gzip_static指令
- 4.3.3.1 下载axios.min.js文件
- 4.3.3.2 添加server块
- 4.3.3.3 开启gzip_static指令
- 4.3.3.4 正式测试
如果想了解更多与Nginx相关的内容,可以查看Nginx专栏中的文章: Nginx
视频教程:31-Nginx的server块和location块的简单说明
1. Nginx静态资源概述
上网搜索资源并访问资源对于我们来说并不陌生,客户端发送一个HTTP请求到服务器端获取所需要内容,浏览器把内容回显展示在页面的
我们所请求的内容分为两种类型,一类是静态资源、一类是动态资源
- 静态资源即指在服务器端真实存在并且能直接拿来展示的一些文件,比如常见的HTML页面、css文件、js文件、图片、视频等资源
- 动态资源即指在服务器端真实存在但是要想获取需要经过一定的业务逻辑处理,根据不同的条件展示在页面不同这 一部分内容,比如说报表数据展示、根据当前登录用户展示相关具体数据等资源
在学习Nginx处理静态资源的内容时,我们重点以下几个方面:
- 静态资源的配置指令
- 静态资源的配置优化
- 静态资源的压缩配置指令
- 静态资源的缓存处理
- 静态资源的访问控制,包括跨域问题和防盗链问题
2. Nginx静态资源配置指令
2.1 listen指令
视频教程:07-Nginx配置指令之listen
listen指令用于配置监听的端口
语法 | 默认值 | 位置 |
---|---|---|
listen address[:port] [default_server] …; | listen *:80 | *:8000 | server |
listen port [default_server] …; |
listen的设置比较灵活,我们通过几个例子熟悉常用的设置方式:
设置格式 | 描述 |
---|---|
listen 127.0.0.1:8000; | 监听指定的 IP 和端口 |
listen 127.0.0.1; | 监听指定 IP 的所有端口 |
listen 8000; | 监听指定端口上的连接 |
listen *:8000; | 监听指定端口上的连接 |
在 Nginx 配置中,default_server
属性是用来标识默认虚拟主机的。如果没有匹配到对应的 address:port
,则会默认执行这个被标识为默认的虚拟主机
所谓的默认主机指的是如果没有匹配到对应的address:port时,Nginx将会把该请求转发到标识为默认主机的虚拟主机。如果没有指定默认虚拟主机,将会使用第一个server块
2.2 server_name指令
server_name指令用于设置虚拟主机服务名称
语法 | 默认值 | 位置 |
---|---|---|
server_name specific_name …; | server_name “”; | server |
其中specific_name可以提供多个,支持127.0.0.1 、 localhost 、域名等形式,中间用空格分隔
server_name的配置方式有三种,分别是:
- 精确匹配
- 通配符匹配
- 正则表达式匹配
2.2.1 精确匹配
server {listen 80;server_name www.itcast.cn www.itheima.cn;
}
2.2.2 补充知识:hosts文件
hosts文件是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应的IP地址记录下来
当用户在浏览器中输入一个需要登录的网址时,系统会首先自动从hosts文件中寻找对应的IP地址,一旦找到,系统会立即打开对应网页,如果没有找到,则系统会再将网址提交DNS域名解析服务器进行IP地址的解析
hosts文件的默认存储位置:
-
windows系统:C:\Windows\System32\drivers\etc
-
Linux系统:/etc/hosts
因为域名要收取一定的费用,我们可以通过修改hosts文件来制作一些虚拟域名
vim /etc/hosts
2.2.3 通配符匹配
视频教程:09-server_name通配符匹配配置
server_name中支持通配符*
,但需要注意的是通配符不能出现在域名的中间,只能出现在首部或尾部
server {listen 80;server_name *.itcast.cn www.itheima.*;
}
下面的配置会报错
server {listen 80;server_name www.*.cn www.itheima.c*
}
2.2.4 正则表达式匹配
注意:
~
符号后面不能加空格
视频教程:10-server_name正则表达式匹配配置
server_name中可以使用正则表达式,使用~
作为正则表达式字符串的开始标记
常见的正则表达式
代码 | 说明 |
---|---|
^ | 匹配搜索字符串开始位置 |
$ | 匹配搜索字符串结束位置 |
. | 匹配除换行符\n之外的任何单个字符 |
\ | 转义字符,将下一个字符标记为特殊字符 |
[xyz] | 字符集,与任意一个指定字符匹配 |
[a-z] | 字符范围,匹配指定范围内的任何字符 |
\w | 与以下任意字符匹配 A-Z a-z 0-9 和下划线,等效于[A-Za-z0-9_] |
\d | 数字字符匹配,等效于[0-9] |
{n} | 正好匹配n次 |
{n,} | 至少匹配n次 |
{n,m} | 匹配至少n次至多m次 |
* | 零次或多次,等效于{0,} |
+ | 一次或多次,等效于{1,} |
? | 零次或一次,等效于{0,1} |
正则表达式匹配的配置示例如下:
注意:
~
符号后面不能加空格
server {listen 80;server_name ~^www\.(\w+)\.com$;default_type text/plain;return 200 $1 $2 ..;
}
2.2.5 匹配的执行顺序
由于server_name指令支持通配符和正则表达式,因此在包含多个虚拟主机的配置文件中,可能会出现一个名称被多个虚拟主机的server_name匹配成功的情况。当遇到这种情况时,请求交给谁来处理呢
在 Nginx 处理请求时会按照以下顺序进行:
- 精确匹配 (Exact Match):
- Nginx 首先会尝试进行精确匹配,即请求的域名与
server_name
中指定的某个名称完全一致 - 如果找到精确匹配,Nginx 会使用该 server block 处理请求,并停止进一步的匹配
- Nginx 首先会尝试进行精确匹配,即请求的域名与
- 最长前缀通配符匹配 (Wildcard Match - Longest Prefix)
- 如果没有找到精确匹配,Nginx 会尝试通配符匹配
- 正则表达式匹配 (Regular Expression Match)
- 如果没有找到精确匹配或通配符匹配,Nginx 会尝试正则表达式匹配
- 正则表达式匹配的优先级低于精确匹配和通配符匹配
- 默认匹配 (Default Match)
- 如果以上都没有匹配到,并且存在
server_name
为空或仅包含一个空字符串 (""
) 的 server block,则该 server block 会被用作默认匹配 - 如果没有默认匹配,则返回 404 或 444 错误(取决于
listen
指令中的default_server
标志)
- 如果以上都没有匹配到,并且存在
2.3 location指令
location
指令用于定义一个处理HTTP请求的区块,它指定了如何处理匹配特定URI(统一资源标识符)的请求
server {listen 80;server_name localhost;location / {}location /niekeyi {}}
语法 | 默认值 | 位置 |
---|---|---|
location [ = | ~ | ~* | ^~ | @ ] uri {…} | server |
uri变量是待匹配的请求字符串,可以不包含正则表达式,也可以包含正则表达式
nginx服务器在搜索匹配location的时候,会优先使用不包含正则表达式的location进行匹配,找到一个匹配度最高的一个
在不包含正则表达式的location中没有匹配项的情况下,才会匹配包含正则表达式的location
2.3.1 uri以指定模式开始(/)
location后面的uri不带符号,而且必须以指定模式开始
server {listen 80;server_name 192.168.200.133;location /abc {default_type text/plain;return 200 "access success";}
}
以下访问都能匹配到上面的location块
- http://192.168.200.133/abc
- http://192.168.200.133/abc?p1=TOM
- http://192.168.200.133/abc/
- http://192.168.200.133/abcdef
2.3.2 uri必须与指定的模式精确匹配(=)
用于不包含正则表达式的uri前,必须与指定的模式精确匹配
server {listen 80;server_name 127.0.0.1;location =/abc {default_type text/plain;return 200 "access success";}
}
可以匹配到
- http://192.168.200.133/abc
- http://192.168.200.133/abc?p1=TOM
匹配不到
- http://192.168.200.133/abc/
- http://192.168.200.133/abcdef
2.3.3 uri中包含正则表达式(~、~*、^~
)
~
:用于表示当前uri中包含了正则表达式,并且区分大小写~*
:用于表示当前uri中包含了正则表达式,并且不区分大小写
换句话说,如果uri包含了正则表达式,需要用上述两个符合来标识
server {listen 80;server_name 127.0.0.1;location ~^/abc\w$ {default_type text/plain;return 200 "access success";}
}server {listen 80;server_name 127.0.0.1;location ~*^/abc\w$ {default_type text/plain;return 200 "access success";}
}
^~
:用于不包含正则表达式的uri前,功能和不加符号的一致,唯一不同的是,如果模式匹配,那么就停止搜索其他模式了
server {listen 80;server_name 127.0.0.1;location ^~/abc {default_type text/plain;return 200 "access success";}
}
2.4 设置请求资源的目录(root&alias)
- root的处理结果是:root路径+location路径
- alias的处理结果是:使用alias路径替换location路径
root指令用于设置请求的根目录
语法 | 默认值 | 位置 |
---|---|---|
root path; | root html; | http、server、location |
path为Nginx服务器接收到请求以后查找资源的根目录路径
alias指令用于用来更改location的URI
语法 | 默认值 | 位置 |
---|---|---|
alias path; | location |
path为修改后的根路径
root指令和alias指令指令都可以来指定访问资源的路径,那么这个指令之间的区别是什么呢,我们通过一个例子来区别
在/usr/local/nginx/html
目录下创建一个 images 目录,并在目录下放入一张图片mv.png
图片
location /images {root /usr/local/nginx/html;
}
访问图片的路径为
http://192.168.200.133/images/mv.png
如果把root改为alias
location /images {alias /usr/local/nginx/html;
}
再次访问上述地址,页面会出现404的错误,查看nginx的错误日志会发现是因为地址不对
- root的处理结果是:root路径+location路径(/usr/local/nginx/html/images/mv.png)
- alias的处理结果是:使用alias路径替换location路径(/usr/local/nginx/html/mv.png)
需要在alias后面路径改为
location /images {alias /usr/local/nginx/html/images;
}
如果location路径是以/结尾,则alias也必须是以/结尾,root没有要求
将上述配置修改为
location /images/ {alias /usr/local/nginx/html/images;
}
访问就会出问题,查看nginx的错误日志发现还是路径不对,所以需要把alias后面加上 /
- root的处理结果是:root路径+location路径
- alias的处理结果是:使用alias路径替换location路径
- 如果location路径是以/结尾,则alias也必须是以/结尾,root没有要求
2.5 index指令
index指令用于设置网站的默认首页
语法 | 默认值 | 位置 |
---|---|---|
index file …; | index index.html; | http、server、location |
index后面可以跟多个设置,如果访问的时候没有指定具体访问的资源,则会从第一个设置依次进行查找,找到匹配的资源为止
举例说明:
location / {root /usr/local/nginx/html;index index.html index.htm;
}
通过 http://ip:port/ 访问该location的时候,地址后面如果不添加任何内容,则默认依次访问index.html和index.htm
2.6 error_page指令
error_page指令用于设置网站的错误页面
语法 | 默认值 | 位置 |
---|---|---|
error_page code … [=[response]] uri; | http、server、location… |
error_page
指令用于设置错误页面的响应,当服务器遇到指定的错误代码时,会返回相应的URI作为错误页面
指定具体跳转的地址
server {error_page 404 http://www.itcast.cn;
}
指定重定向地址
server{error_page 404 /50x.html;error_page 500 502 503 504 /50x.html;location =/50x.html{root html;}
}
使用location的@符号完成错误信息展示
server{error_page 404 @jump_to_error;location @jump_to_error {default_type text/plain;return 404 'Page Not Found ...';}
}
可选项=[response]
的作用是更改响应代码
注意:404后面需要加空格,200前面不能加空格
server{error_page 404 =200 /50x.html;location =/50x.html{root html;}
当返回404找不到对应的资源的时候,在浏览器上可以看到,最终返回的状态码是200
3. Nginx静态资源优化配置
3.1 send_file指令
视频教程:16-Nginx静态资源优化配置之sendfile
send_file指令用于开启高效的文件传输模式
语法 | 默认值 | 位置 |
---|---|---|
sendfile on|off; | sendfile off; | http、server、location |
请求静态资源的过程:客户端通过网络接口向服务端发送请求,操作系统将客户端的请求传递给服务器端应用程序,服务器端应用程序会处理这些请求,请求处理完成以后,操作系统还需要将处理得到的结果通过网络适配器传递回去
例如在html目录下有一个welcome.html页面,访问地址为http://192.168.200.133/welcome.html
server {listen 80;server_name localhost;location / {root html;index index.html;}
}
3.2 tcp_nopush指令&tcp_nodelay指令
tcp_nopush指令必须在sendfile打开的状态下才会生效,主要是用来提升网络包的传输“效率”
语法 | 默认值 | 位置 |
---|---|---|
tcp_nopush on|off; | tcp_nopush off; | http、server、location |
tcp_nodelay指令必须在keep-alive连接开启的情况下才生效,来提高网络包传输的“实时性”
语法 | 默认值 | 位置 |
---|---|---|
tcp_nodelay on|off; | tcp_nodelay on; | http、server、location |
经过分析,tcp_nopush
和tcp_nodelay
看起来是"互斥的",那么为什么要将这两个值都打开呢
在Linux 2.5.9及以后的版本中两者是可以兼容的,三个指令都开启的好处是,sendfile可以开启高效的文件传输模式,tcp_nopush开启可以确保在发送到客户端之前数据包已经充分“填满”, 这大大减少了网络开销,并加快了文件发送的速度
当到达最后一个可能因为没有“填满”而暂停的数据包时,Nginx会忽略tcp_nopush参数, 然后tcp_nodelay强制套接字发送数据
由此可知,tcp_nopush可以与tcp_nodelay一起设置,它比单独配置TCP_NODELAY具有更强的性能,所以我们可以使用如下配置来优化Nginx静态资源的处理
sendfile on;
tcp_nopush on;
tcp_nodelay on;
4. Nginx静态资源压缩
我们思考一个问题,假如在满足静态资源优化的前提下,我们传送一个1M的数据和一个10M的数据那个效率更高
答案显而易见,传输内容小,速度就会快。那么问题又来了,同样的内容,如果把大小降下来,我们脑袋里面要蹦出一个词就是"压缩",接下来,我们来学习Nginx的静态资源压缩模块
在Nginx的配置文件中可以通过配置gzip来对静态资源进行压缩,相关的指令可以配置在http块、server块和location块中,Nginx可以通过
- ngx_http_gzip_module模块
- ngx_http_gzip_static_module模块
- ngx_http_gunzip_module模块
对这些指令进行解析和处理
4.1 Gzip模块配置指令
接下来我们所学习的指令都来自ngx_http_gzip_module模块,该模块会在nginx安装的时候内置到nginx的安装环境中,也就是说我们可以直接使用这些指令
4.1.1 gzip指令
gzip指令用于开启或者关闭gzip功能
语法 | 默认值 | 位置 |
---|---|---|
gzip on|off; | gzip off; | http、server、location |
注意只有gzip指令为打开状态,与gzip相关的指令才有效果
http {gzip on;
}
4.1.2 gzip_types指令
gzip_types指令可以根据响应页的MIME类型选择性地开启Gzip压缩功能
语法 | 默认值 | 位置 |
---|---|---|
gzip_types mime-type …; | gzip_types text/html; | http、server、location |
所选择的值可以从mime.types文件中进行查找,也可以使用"*"代表所有类型的文件
http{gzip_types application/javascript;
}
4.1.3 gzip_comp_level指令
gzip_comp_level指令用于设置Gzip的压缩程度,级别从1-9,1表示压缩程度最低,压缩效率最高,9刚好相反,压缩程度最高,但是效率最低,最费时间
语法 | 默认值 | 位置 |
---|---|---|
gzip_comp_level level; | gzip_comp_level 1; | http、server、location |
http {gzip_comp_level 6;
}
4.1.4 gzip_vary指令
gzip_vary指令用于设置使用Gzip进行压缩发送是否携带“Vary:Accept-Encoding”头域的响应头部。主要作用是告诉接收方,所发送的数据经过了Gzip压缩处理
语法 | 默认值 | 位置 |
---|---|---|
gzip_vary on|off; | gzip_vary off; | http、server、location |
4.1.5 gzip_buffers指令
gzip_buffers指令主要实现的功能是申请number个每个大小为size的内存空间。具体值的设定一般会和服务器的操作系统有关,所以建议此项不设置,使用默认值即可
gzip_buffers指令用于处理请求压缩的缓冲区数量和大小
语法 | 默认值 | 位置 |
---|---|---|
gzip_buffers number size; | gzip_buffers 32 4k|16 8k; | http、server、location |
- number:Nginx服务器向系统申请缓存空间个数
- size:每个缓存空间的大小
4.1.6 gzip_disable指令
gzip_disable指令的作用:针对不同种类客户端发起的请求,选择性地开启和关闭Gzip功能
语法 | 默认值 | 位置 |
---|---|---|
gzip_disable regex …; | 无 | http、server、location |
regex:根据客户端的浏览器标志(user-agent)来设置,支持使用正则表达式
指定的浏览器标志不使用Gzip,该指令一般是用来排除一些明显不支持Gzip的浏览器
以下的gzip_disable指令就是告诉 Nginx 不要对使用 IE 1 到 6 的浏览器发送 gzip 压缩的内容。这是因为这些旧版本的 IE 浏览器可能不支持 gzip 压缩,或者支持得不好,可能会导致页面无法正确显示
gzip_disable "MSIE [1-6]\.";
4.1.7 gzip_http_version指令
gzip_http_version指令的作用:针对不同的HTTP协议版本,可以选择性地开启和关闭Gzip功能
语法 | 默认值 | 位置 |
---|---|---|
gzip_http_version 1.0 | 1.1; | gzip_http_version 1.1; | http、server、location |
gzip_http_version指令指定使用Gzip的HTTP最低版本,一般采用默认值即可
4.1.8 gzip_min_length指令
gzip_min_length指令的作用:针对传输数据的大小,可以选择性地开启和关闭Gzip功能
语法 | 默认值 | 位置 |
---|---|---|
gzip_min_length length; | gzip_min_length 20; | http、server、location |
在 Nginx 配置中,可以使用不同的单位来指定大小。这些单位包括字节(bytes)、千字节(kilobytes,简称 KB)和兆字节(megabytes,简称 MB)
以下是一些常见的单位及其缩写:
- 字节(bytes):最基本的单位,表示一字节。在 Nginx 配置中,可以直接使用数字表示字节数,例如
1024
表示 1024 字节 - 千字节(kilobytes,KB):通常使用
k
或K
作为缩写。1 KB 等于 1024 字节。在 Nginx 配置中,可以使用10k
或10K
表示 10 千字节(即 10 * 1024 字节)。 - 兆字节(megabytes,MB):通常使用
m
或M
作为缩写。1 MB 等于 1024 KB 或 1,048,576 字节。在 Nginx 配置中,可以使用10m
或10M
表示 10 兆字节(即 10 * 1024 * 1024 字节)
以下是一些具体的例子:
1024
:表示 1024 字节10k
或10K
:表示 10 千字节,即 10 * 1024 = 10240 字节10m
或10M
:表示 10 兆字节,即 10 * 1024 * 1024 = 10,485,760 字节
Gzip压缩功能对大数据的压缩效果明显,但是如果要压缩的数据比较小的话,可能出现越压缩数据量越大的情况,因此我们需要根据响应内容的大小来决定是否使用Gzip功能。但是如何使用了Chunk编码动态压缩,该指令将被忽略
响应页面的大小可以通过头信息中的Content-Length
来获取,建议设置为1K或以上
4.1.9 gzip_proxied指令
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 |
以下是一些gzip_proxied指令常见的参数及其含义
参数 | 含义 |
---|---|
off | 不进行 gzip 压缩 |
expired | 如果响应已经过期,则进行 gzip 压缩 |
no-cache | 如果响应头部包含 Cache-Control: no-cache,则进行 gzip 压缩 |
no-store | 如果响应头部包含 Cache-Control: no-store,则进行 gzip 压缩 |
private | 如果响应头部包含 Cache-Control: private,则进行 gzip 压缩 |
no-last-modified | 如果响应头部没有 Last-Modified,则进行 gzip 压缩 |
no-etag | 如果响应头部没有 ETag,则进行 gzip 压缩 |
auth | 如果响应头部包含 Authorization,则进行 gzip 压缩 |
any | 无论什么情况都进行 gzip 压缩 |
4.2 Gzip压缩功能配置示例
gzip on; # 开启 gzip 功能
gzip_types *; # 压缩所有文件类型
gzip_comp_level 6; # 设置 gzip 压缩级别为 6
gzip_min_length 1024; # 仅压缩内容长度大于 1024 字节的数据
gzip_buffers 4 16K; # 设置 gzip 压缩缓冲区大小为 4 个 16K 的缓冲区
gzip_http_version 1.1; # 仅压缩 HTTP/1.1 请求
gzip_vary on; # 在响应头中添加 Vary: Accept-Encoding
gzip_disable "MSIE [1-6]\."; # 禁止对 IE6 及以下版本进行 gzip 压缩
gzip_proxied off; # 不压缩从后端服务器返回的数据
这些配置在很多地方可能都会用到,所以我们可以将这些内容抽取到一个配置文件中,然后通过include指令把配置文件再次加载到nginx.conf配置文件中
nginx_gzip.conf
gzip on; # 开启 gzip 功能
gzip_types *; # 压缩所有文件类型
gzip_comp_level 6; # 设置 gzip 压缩级别为 6
gzip_min_length 1024; # 仅压缩内容长度大于 1024 字节的数据
gzip_buffers 4 16K; # 设置 gzip 压缩缓冲区大小为 4 个 16K 的缓冲区
gzip_http_version 1.1; # 仅压缩 HTTP/1.1 请求
gzip_vary on; # 在响应头中添加 Vary: Accept-Encoding
gzip_disable "MSIE [1-6]\."; # 禁止对 IE6 及以下版本进行 gzip 压缩
gzip_proxied off; # 不压缩从后端服务器返回的数据
nginx.conf
include nginx_gzip.conf
4.3 Gzip和send_file共存的问题
4.3.1 问题分析
前面在讲解send_file的时候提到过,开启send_file以后,在读取磁盘上的静态资源文件的时候,可以减少拷贝的次数,可以不经过用户进程将静态文件通过网络设备发送出去
但gzip要想对资源压缩,是需要经过用户进程进行操作的,如何解决两个设置的共存问题呢?我们可以使用ngx_http_gzip_static_module模块的gzip_static指令来解决
4.3.2 gzip_static指令的作用
gzip_static指令的作用:
- 当
gzip_static
启用时,Nginx 会检查请求的文件对应的.gz
压缩文件是否存在。如果存在,Nginx 会直接发送这个压缩文件,而不是原始文件 - 启用gzip_static指令要求事先使用
gzip
工具或其他方法压缩静态文件,并将压缩文件与原始文件放在同一目录下,而且文件名带有.gz
扩展名
语法 | 默认值 | 位置 |
---|---|---|
gzip_static on | off | always; | gzip_static off; | http、server、location |
4.3.3 测试gzip_static指令
4.3.3.1 下载axios.min.js文件
运行以下指令下载axios.min.js文件,用于测试gzip_static指令
curl -o axios.min.js https://unpkg.com/axios@1.9.0/dist/axios.min.js
接着将axios.min.js文件移动到/home/www/web/js
文件夹下
mkdir -p /home/www/web/js
mv axios.min.js /home/www/web/js/axios.min.js
修改/home/www/web/js
目录的归属用户和归属用户组,确保Nginx的工作进程能够成功访问axios.min.js文件
chown www:www -R /home/www/web/js
4.3.3.2 添加server块
在nginx.conf文件中添加以下内容
- 将127.0.0.1改成你的服务器的IP地址
- listen指令和server_name指令不要和现有的server块完全相同,否则会产生冲突
server {listen 8040;server_name 127.0.0.1;location /gzip/axios.min.js {alias /home/www/web/js;index axios.min.js;}
}
4.3.3.3 开启gzip_static指令
gzip on;
第一步:把nginx.conf文件http作用域中的gzip on;
改成gzip off;
,不再让Nginx帮我们自动压缩文件,而是由我们自己压缩文件
第二步:在nginx.conf文件的http作用域中添加以下内容
gzip_static on;
第三步:保存nginx.conf文件
4.3.3.4 正式测试
在浏览器访问http://127.0.0.1/gzip/axios.min.js/网址
http://127.0.0.1/gzip/axios.min.js/
可以看到,原始文件的大小约为54.5kB
请求的响应头信息如下
接下来我们使用gzip工具压缩axios.min.js文件
gzip -c /home/www/web/js/axios.min.js > /home/www/web/js/axios.min.js.gz
压缩完成后再次访问http://127.0.0.1/gzip/axios.min.js/网址
http://127.0.0.1/gzip/axios.min.js/
可以看到,文件的大小已经变成了19.2kB
请求头中也多出了Content-encoding和Vary两个属性
Content-Encoding: gzip
表示服务器已经使用gzip算法对响应的内容进行了压缩,客户端在接收到这样的响应后,需要对其进行解压才能读取原始数据Vary: Accept-Encoding
表示服务器会根据客户端发送的Accept-Encoding
请求头来决定是否以及如何压缩响应内容