ngnix配置静态资源404问题

简单介绍了ngnix的location的配置和反向代理的配置。配置ngnix反向代理,也是一种解决前端跨域访问的方法。另外还介绍了在实际使用中,由于配置其他服务的反向代理,导致静态资源获取404的问题总结。

ngnix反向代理解决浏览器跨域、location加快静态资源的请求

location的配置

设置location是为了对请求的url 做一些特殊的操作,比如对静态文件做缓存等。

官方的文档见:http://nginx.org/en/docs/http/ngx_http_core_module.html#location

1
2
3
4
Syntax:	location [ = | ~ | ~* | ^~ ] uri { ... }
location @name { ... }
Default: —
Context: server, location
  • = 匹配表示是精确匹配
  • ~ 匹配表示 区分大小写的正则匹配
  • ~* 匹配表示 不区分大小写的正则匹配
  • ^~ 以后面的字符串开头的匹配

下面是一些常用的location的写法:

1
2
3
4
5
6
7
8
9
10
11
12
location /documents/ {
# 匹配任何以 /documents/ 开头的地址,匹配符合以后,还要继续往下搜索
[ configuration C ]
}
location ^~ /documents/ {
# 匹配任何以 /documents/ 开头的地址,匹配符合以后,停止往下搜索
[ configuration D ]
}
location ~* \.(gif|jpg|jpeg)$ {
# 匹配所有以 gif,jpg或jpeg 结尾的请求
[ configuration E ]
}

反向代理

从wiki上摘录的定义:

在计算机网络中,反向代理是代理服务器的一种。它根据客户端的请求,从后端的服务器上获取资源,然后再将这些资源返回给客户端。与前向代理不同,前向代理作为一个媒介将互联网上获取的资源返回给相关联的客户端,而反向代理是在服务器端作为代理使用,而不是客户端。

ngnix做反向代理简单配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
... 
upstream multi_relation {
# 在ngnix这个机器的20000端口上启动的服务
server 127.0.0.1:20000 weight=1 max_fails=5 fail_timeout=6s;
}
server {
listen 8080;
root /www;
index index.php index.html index.htm;
...
location /relation/ {
proxy_pass http://multi_relation;
}
location /area/ {
proxy_pass http://10.1.0.1:8080/;
}
}

浏览器中输入http://ip:8080/realtion/ 访问的就是ngnix这台机器上端口为20000的这个服务;

浏览器中输入http://ip:8080/area/ 访问的就是http://10.1.0.1:8080/ 这个服务;

可以看出,ngnix配置反向代理,也是一种解决浏览器跨域问题的方法(在10.1.0.1:8080的这个服务,在 ip:8080这个域下用js是访问不了的,因为跨域了,但是配置了反向代理以后,用ip:8080/area/ 就能访问到了,^_^)。

遇到的问题,静态资源访问404

如下是实际中的一个配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
upstream multi_relation {
server 127.0.0.1:20000 weight=1 max_fails=5 fail_timeout=6s;
}
server {
listen 8080;
root /www;
index index.php index.html index.htm;
...
location /relation/ {
#[规则1]
proxy_pass http://multi_relation;
}
location ~ .*.(css|js|png|gif|jpg)$ {
#[规则2]
access_log off;
expires 30d;
}
}

访问http://ip:8080/relation/ 的时候,静态资源都报404错误。

对于127.0.0.1:20000的这个服务,它的静态资源可能在127.0.0.1:20000/static/ 下,做了反向代理以后,我们请求 http://ip:8080/relation/static/test.js , ngnix匹配/relation/以后,就会知道去127.0.0.1:20000这个服务去拿资源

但是因为还有规则2,匹配到规则1以后,继续往下搜索,又匹配了规则2,所以ngnix会对匹配规则2的url做规则2的处理,这个时候,静态资源就找不到了,因为ip:8080/relation/下实际上没有/static/test.js这个资源;

所以,如果是单独的服务做反向代理的时候,别忘了加上^~ ,规则1修改为

1
2
3
4
location ^~ /relation/ {
# 规则1 匹配到 /relation/ 开头的地址,停止往下搜索
proxy_pass http://multi_relation;
}

这样http://ip:8080/relation/static/test.js 匹配到规则1以后,就不会去匹配规则2啦~