nginx location =踩坑

现象

部署前端网页项目到nginx时，前端html打包给我，我放到docker nginx的指定目录里（/usr/share/nginx/html），但访问一直报404，看nginx日志，error是：

[error] 31#31: *1 open() “/etc/nginx/html/index.html”

这个nginx上已经有别的前端网页项目在跑了，都是正常的，说明环境是没问题的。包括docker挂在映射，html文件夹等等都应该是正常的，那问题只能出在这个网页对应的nginx配置了。

原始nginx配置如下：

server {
	listen 80;
	server_name  xxx.com;
	charset utf-8;
	error_page   500 502 503 504  /50x.html;

	location = / {
			root   /usr/share/nginx/html/chat;
			index  index.html index.htm;
			try_files $uri $uri/ /index.html;
	}

	location /api {
			proxy_set_header   X-Real-IP $remote_addr; #转发用户IP
			proxy_pass http://47.107.238.11:8002;
	}

	proxy_set_header Host $host;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_set_header REMOTE-HOST $remote_addr;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

解决

仔细把这份配置跟已有的正常在跑的nginx配置对比了一下，发现/网页根目录的这里的设置不一样：

	location = / {
			root   /usr/share/nginx/html/chat;
			index  index.html index.htm;
			try_files $uri $uri/ /index.html;
	}

正常的location后是没有=的，把location =/ 去掉后再次重启nginx，访问域名，能够正确跳转了：

    location / {
        root   /usr/share/nginx/html/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

原理

应该是前端网页有个自动跳转的首页，而用=/则限制了这个自动跳转，只能在域名/之下，导致404。去网上查了一下location后加不加=的含义：

= 开头表示精确匹配。如 A 中只匹配根目录结尾的请求，后面不能带任何字符串；
^~ 开头表示uri以某个常规字符串开头，不是正则匹配；
~ 开头表示区分大小写的正则匹配；
~* 开头表示不区分大小写的正则匹配；
/ 通用匹配, 如果没有其它匹配,任何请求都会匹配到。
一个location定义可以是一个前缀字符串，也可以是一个正则表达式。正则表达式使用的时候要在前面用“”修饰符（用于不区分大小写匹配），或者“”修饰符（用于区分大小写）。为了找到请求匹配的location，nginx首先检查location定义，用前缀字符串（这些location成为前缀location）。其中，最长匹配前缀的location会被选中并记住。然后，检查正则表达式，按照它们在配置文件中出现的顺序。对正则表达式的搜索在第一次匹配时终止，并使用相应的配置。如果没有找到与正则表达式的匹配，则使用前面记住的前缀位置的配置。
优先级
( location = ) > ( location 完整路径 ) > ( location ^~ 路径 ) > ( location , 正则顺序 ) > ( location 部分起始路径 ) > ( / )

location  = / {
  # 精确匹配 / ，主机名后面不能带任何字符串
  [ configuration A ]
}location  / {
  # 因为所有的地址都以 / 开头，所以这条规则将匹配到所有请求
  # 但是正则和最长字符串会优先匹配
  [ configuration B ]
  }

location /documents/ {  # 匹配任何以 /documents/ 开头的地址，匹配符合以后，还要继续往下搜索
  # 只有后面的正则表达式没有匹配到时，这一条才会采用这一条
  [ configuration C ]
}location ~ /documents/Abc {  # 匹配任何以 /documents/Abc 开头的地址，匹配符合以后，还要继续往下搜索
  # 只有后面的正则表达式没有匹配到时，这一条才会采用这一条
  [ configuration CC ]
}location ^~ /images/ {  # 匹配任何以 /images/ 开头的地址，匹配符合以后，停止往下搜索正则，采用这一条。
  [ configuration D ]
}location ~* \.(gif|jpg|jpeg)$ {  # 匹配所有以 gif,jpg或jpeg 结尾的请求
  # 然而，所有请求 /images/ 下的图片会被 config D 处理，因为 ^~ 到达不了这一条正则
  [ configuration E ]
}location /images/ {  # 字符匹配到 /images/，继续往下，会发现 ^~ 存在
  [ configuration F ]
}location /images/abc {  # 最长字符匹配到 /images/abc，继续往下，会发现 ^~ 存在
  # F与G的放置顺序是没有关系的
  [ configuration G ]
}location ~ /images/abc/ {  # 只有去掉 config D 才有效：先最长匹配 config G 开头的地址，继续往下搜索，匹配到这一条正则，采用
  # 因为都是正则匹配，优先级一样，选择最上面的
    [ configuration H ]
}location ~* /js/.*/\.js