学习nginx location ~ .*.(js|css)?$语法规则

引言

nginx作为一款高性能的Web服务和反向代理服务，在网站性能优化中扮演着重要的角色。其中，location指令的正确配置是优化工作的关键之一。

这篇记录主要解析location ~ .*\.(js|css)?$这一特定的语法规则，帮助大家理解其在nginx配置中的作用。

语法规则：

location [=|~|~*|^~] /uri/ { … }

• = ：开头表示精确匹配

• ^~ ：开头表示uri以某个常规字符串开头，理解为匹配 url路径即可。nginx不对url做编码，因此请求为/static/20%/aa，可以被规则^~ /static/ /aa匹配到（注意是空格）。

• ~ ：开头表示区分大小写的正则匹配

• ~* ：开头表示不区分大小写的正则匹配

• !~和!~* ：分别为区分大小写不匹配及不区分大小写不匹配 的正则

• / ：通用匹配，任何请求都会匹配到

多个location配置的情况下匹配顺序为（参考资料，仅供参考）：

1. 首先匹配 =

2. 其次匹配^~

3. 其次是按文件中顺序的正则匹配

4. 最后是交给 / 通用匹配

5. 当有匹配成功时候，停止匹配，按当前匹配规则处理请求。

匹配示例

location = / {精确匹配，必须是127.0.0.1/
  #规则A
}
location = /login {精确匹配，必须是127.0.0.1/login
  #规则B
}
location ^~ /static/ {非精确匹配，并且不区分大小写，比如127.0.0.1/static/js.
  #规则C
}
location ~ \.(gif|jpg|png|js|css)$ {区分大小写，以gif,jpg,js结尾
  #规则D
}
location ~* \.png$ {不区分大小写，匹配.png结尾的
  #规则E
}
location !~ \.xhtml$ {区分大小写，匹配不已.xhtml结尾的
  #规则F
}
location !~* \.xhtml$ {
  #规则G
}
location / {什么都可以
  #规则H
}

那么产生的效果如下：

1. 访问根目录/， 比如http://localhost/ 将匹配规则A

2. 访问 http://localhost/login 将匹配规则B，http://localhost/register 则匹配规则H

3. 访问 http://localhost/static/a.html 将匹配规则C

4. 访问 http://localhost/a.gif, http://localhost/b.jpg 将匹配规则D和规则E，但是规则D顺序优先，规则E不起作用， 而 http://localhost/static/c.png 则优先匹配到 规则C

5. 访问 http://localhost/a.PNG 则匹配规则E， 而不会匹配规则D，因为规则E不区分大小写。

6. 访问 http://localhost/a.xhtml 不会匹配规则F和规则G，http://localhost/a.XHTML不会匹配规则G，因为不区分大小写。规则F、规则G属于排除法，符合匹配规则但是不会匹配到，所以想想看实际应用中哪里会用到。

7. 访问 http://localhost/category/id/1111 则最终匹配到规则H，因为以上规则都不匹配，这个时候应该是nginx转发请求给后端应用服务器，比如FastCGI（php），tomcat（jsp），nginx作为方向代理服务器存在。

所以实际使用中，个人觉得至少有三个匹配规则定义，如下：

这里直接转发给后端应用服务器，也可以是一个静态页

第一个必选规则

location = / {
  proxy_pass http://tomcat:8080/index
}

第二个必选规则是处理静态文件请求，这是nginx本身的强项

有两种配置模式，目录匹配或后缀匹配,任选其一或搭配使用

location ^~ /static/ {
  root /webroot/static/;
}
location ~* \.(gif|jpg|jpeg|png|css|js|ico)$ {
  root /webroot/res/;
}

第三个规则就是通用规则，用来转发动态请求到后端应用服务器

非静态文件请求就默认是动态请求，自己根据实际把握。毕竟目前的一些框架的流行，带.php,.jsp后缀的情况很少了

location / {
  proxy_pass http://tomcat:8080/
}

其他语法规则

一、ReWrite语法

• last – 基本上都用这个Flag。

• break – 中止Rewirte，不在继续匹配

• redirect – 返回临时重定向的HTTP状态302

• permanent – 返回永久重定向的HTTP状态301

1. 下面是可以用来判断的表达式：

• -f和!-f用来判断是否存在文件

• -d和!-d用来判断是否存在目录

• -e和!-e用来判断是否存在文件或目录

• -x和!-x用来判断文件是否可执行

2. 下面是可以用作判断的全局变量

举例http://localhost:88/test1/test2/test.php

$host：localhost 
$server_port：88 
$request_uri：http://localhost:88/test1/test2/test.php 
$document_uri：/test1/test2/test.php 
$document_root：D:\nginx/html 
$request_filename：D:\nginx/html/test1/test2/test.php

二、Redirect语法

server { 
listen 80; 
server_name start.igrow.cn; 
index index.html index.php; 
root html; 
if ($http_host !~ “^star\.igrow\.cn$&quot { 
rewrite ^(.*) http://star.igrow.cn$1 redirect; 
} 
} 

三、防盗链

location ~* \.(gif|jpg|swf)$ { 
valid_referers none blocked start.igrow.cn sta.igrow.cn; 
if ($invalid_referer) { 
rewrite ^/ http://$host/logo.png; 
} 
}

四、根据文件类型设置过期时间

location ~* \.(js|css|jpg|jpeg|gif|png|swf)$ { 
if (-f $request_filename) { 
expires 1h; 
break; 
} 
}

五、禁止访问某个目录

location ~* \.(txt|doc)${ 
root /data/www/wwwroot/linuxtone/test; 
deny all; 
}

六、一些可用的全局变量

$args 
$content_length 
$content_type 
$document_root 
$document_uri 
$host 
$http_user_agent 
$http_cookie 
$limit_rate 
$request_body_file 
$request_method 
$remote_addr 
$remote_port 
$remote_user 
$request_filename 
$request_uri 
$query_string 
$scheme 
$server_protocol 
$server_addr 
$server_name 
$server_port 
$uri

最后

如上演示并介绍了location ~ .*\.(js|css)?$这一nginx配置指令的语法规则及其应用。

掌握nginx的location指令，尤其是基于正则表达式的匹配规则，是基础且必要的技能。正确地运用这些规则，可以显著提高nginx服务器性能和效率，进而带来更佳的网站访问体验。

---

最后~欢迎关注我！ @Linux学习的那些事儿

我的个人资源整理，满满都是干货： 可按需访问领取

200T免费资料，持续发布中... https://vlink.cc/route

如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！