nginx找不到静态（css,js,html）文件404报错，root的解析

关于这种匹配不到静态文件的错误若是有项目名称导致的可有两种解决的方式：

一种是在nginx端配置匹配路径；

一种是在tomcat端去配置path代替变量名代替项目名称；

本篇文章我们来看一下ngin x端的配置：

首先你可能在负载之后会出现如下的错误：

然后把鼠标移到文件名上：如上图我的第一个文件是morris.css。鼠标放在上面会显示页面访问的完整路径。

我第一个文件显示的路径是http:10.10.10.10:5000/static/css/morris.css.

然而我确实有static文件夹，static文件夹下面也有css文件夹，css下也有这个文件。为什么找不到呢？因为root设置错了。

morris的绝对路径为：/home/kzl/data/app/static/css/morris.css。

设置location如下：（location在nginx的配置文件中配置）
 

location ~.*(js|css|png|gif|jpg|mp3|ogg)$ {
        root /home/kzl/data/app/;
    }

这个location说明如果你要访问js,css,png...结尾的文件，你需要在你的访问路径前加上root。

这个root实际上就是替换了网页上的http:10.10.10.10:5000。如果加了这个location，那么网页在访问http:10.10.10.10:5000/static/css/morris.css.这个路径的时候，因为文件结尾是css匹配到了这个location,然后网页就会访问

root+[匹配路径]，即为：/home/kzl/data/app/static/css/morris.css，这样就找到文件了。
 

接下来我们来看一下nginx的匹配规则，也就是他的location属性：

 

Nginx作为一个成熟、久经考验的负载均衡软件，与其提供丰富、完整的内置变量是分不开的，它极大增加了对Nginx网络行为的控制细度。这些变量大部分都是在请求进入时解析的，并把他们缓存到请求cycle中，方便下一次获取使用。首先来看看Nginx对都开放了那些API。

 

语法规则

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

模式	含义
location = /uri	= 表示精确匹配，只有完全匹配上才能生效
location ^~ /uri	^~ 开头对URL路径进行前缀匹配，并且在正则之前。
location ~ pattern	开头表示区分大小写的正则匹配
location ~* pattern	开头表示不区分大小写的正则匹配
location /uri	不带任何修饰符，也表示前缀匹配，但是在正则匹配之后
location /	通用匹配，任何未匹配到其它location的请求都会匹配到，相当于switch中的default

前缀匹配时，Nginx 不对 url 做编码，因此请求为 /static/20%/aa，可以被规则 ^~ /static/ /aa 匹配到（注意是空格）

多个 location 配置的情况下匹配顺序为（参考资料而来，还未实际验证，试试就知道了，不必拘泥，仅供参考）:

• 首先精确匹配 =
• 其次前缀匹配 ^~
• 其次是按文件中顺序的正则匹配
• 然后匹配不带任何修饰的前缀匹配。
• 最后是交给 / 通用匹配
• 当有匹配成功时候，停止匹配，按当前匹配规则处理请求

注意：前缀匹配，如果有包含关系时，按最大匹配原则进行匹配。比如在前缀匹配：location /dir01与 location /dir01/dir02，如有请求 http://localhost/dir01/dir02/file 将最终匹配到 location /dir01/dir02

例子，有如下匹配规则：

location = / {
   echo "规则A";
}
location = /login {
   echo "规则B";
}
location ^~ /static/ {
   echo "规则C";
}
location ^~ /static/files {
    echo "规则X";
}
location ~ \.(gif|jpg|png|js|css)$ {
   echo "规则D";
}
location ~* \.png$ {
   echo "规则E";
}
location /img {
    echo "规则Y";
}
location / {
   echo "规则F";
}

那么产生的效果如下：

访问根目录 /，比如 http://localhost/ 将匹配 规则A
访问 http://localhost/login 将匹配 规则B，http://localhost/register 则匹配 规则F
访问 http://localhost/static/a.html 将匹配 规则C
访问 http://localhost/static/files/a.exe 将匹配 规则X，虽然 规则C 也能匹配到，但因为最大匹配原则，最终选中了 规则X。你可以测试下，去掉规则 X ，则当前 URL 会匹配上 规则C。
访问 http://localhost/a.gif, http://localhost/b.jpg 将匹配 规则D 和 规则 E ，但是 规则 D 顺序优先，规则 E 不起作用，而 http://localhost/static/c.png 则优先匹配到 规则 C
访问 http://localhost/a.PNG 则匹配 规则 E ，而不会匹配 规则 D ，因为 规则 E 不区分大小写。
访问 http://localhost/img/a.gif 会匹配上 规则D,虽然 规则Y 也可以匹配上，但是因为正则匹配优先，而忽略了 规则Y。
访问 http://localhost/img/a.tiff 会匹配上 规则Y。
访问 http://localhost/category/id/1111 则最终匹配到规则 F ，因为以上规则都不匹配，这个时候应该是 Nginx 转发请求给后端应用服务器，比如 FastCGI（php），tomcat（jsp），Nginx 作为反向代理服务器存在。

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

# 直接匹配网站根，通过域名访问网站首页比较频繁，使用这个会加速处理，官网如是说。
# 这里是直接转发给后端应用服务器了，也可以是一个静态首页
# 第一个必选规则
location = / {
    proxy_pass http://tomcat:8080/index
}

# 第二个必选规则是处理静态文件请求，这是 nginx 作为 http 服务器的强项
# 有两种配置模式，目录匹配或后缀匹配，任选其一或搭配使用
location ^~ /static/ {
    root /webroot/static/;
}
location ~* \.(gif|jpg|jpeg|png|css|js|ico)$ {
    root /webroot/res/;
}

# 第三个规则就是通用规则，用来转发动态请求到后端应用服务器
# 非静态文件请求就默认是动态请求，自己根据实际把握
# 毕竟目前的一些框架的流行，带.php、.jsp后缀的情况很少了
location / {
    proxy_pass http://tomcat:8080/
}

redirect 语法

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

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

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

我们可以做个简易防火墙，看看如何开始玩耍：

 server {
        listen    80;
        server_name  localhost;

        location /sum {
            # 使用access阶段完成准入阶段处理
            access_by_lua_block {
                local black_ips = {["127.0.0.1"]=true}

                local ip = ngx.var.remote_addr
                if true == black_ips[ip] then
                    ngx.exit(ngx.HTTP_FORBIDDEN)
                end
            };

            #处理业务
           content_by_lua_block {
                local a = tonumber(ngx.var.arg_a) or 0
                local b = tonumber(ngx.var.arg_b) or 0
                ngx.say("sum:", a + b )
            }
       }
    }

运行测试的结果：
➜  ~  curl '192.168.1.104/sum?a=11&b=12'
sum:23
➜  ~
➜  ~
➜  ~  curl '127.0.0.1/sum?a=11&b=12'
<html>
<head><title>403 Forbidden</title></head>
<body bgcolor="white">
<center><h1>403 Forbidden</h1></center>
<hr><center>openresty/1.9.3.1</center>
</body>
</html>

通过测试结果看到，提取了终端的IP地址后进行限制。扩充一下，就可以支持 IP 地址段，如果再与系统iptables进行配合，那么就足以达到软防火墙的目的。

我们也可以对传输速率作出一些限制，例如：

location /download {
            access_by_lua_block {
                ngx.var.limit_rate = 1000
            };
        }

下载测试：
 ➜  ~  wget '127.0.0.1/download/1.cab'
--2015-09-13 13:59:51--  http://127.0.0.1/download/1.cab
Connecting to 127.0.0.1... connected.
HTTP request sent, awaiting response... 200 OK
Length: 135802 (133K) [application/octet-stream]
Saving to: '1.cab'

1.cab                6%[===>             ]   8.00K  1.01KB/s   eta 1m 53s

以上就是对静态资源匹配问题以及nginx的location匹配规则进行了简单的介绍；

之后的一片文章会用tomcat端的解决方式类解决此问题；

参考文章：

https://moonbingbing.gitbooks.io/openresty-best-practices/openresty/inline_var.html

https://moonbingbing.gitbooks.io/openresty-best-practices/ngx/nginx_local_pcre.html