nginx 适配react-router browserRoute 路由问题

nginx 适配react-routerbrowserRoute 路由问题

绝对能用的一篇nginx配置,文末直接有文件,伸手党直接拿走

本文环境比较复杂,首先两层nginx转发,并且访问路径也不是根路径。加上对nginx一知半解,各路搜索一看,全程懵逼。最终没有一个能用的。最后还是靠同事帮助,文档大法结束加班。本文知识点:location优先级nginx资源文件寻找方式rewrite 重定向问题

location 优先级

  • = 开头表示精确匹配
  • ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可。nginx不对url做编码,因此请求为/static/20%/aa,可以被规则^~ /static/ /aa匹配到(注意是空格)。以xx开头
  • ~ 开头表示区分大小写的正则匹配                     以xx结尾
  • ~* 开头表示不区分大小写的正则匹配                以xx结尾
  • !~和!~*分别为区分大小写不匹配及不区分大小写不匹配 的正则
  • / 通用匹配,任何请求都会匹配到。

try_file 使用

当用户请求 http://localhost/example 时,这里的 $uri 就是 /example。
try_files 会到硬盘里尝试找这个文件。如果存在名为 /$root/example(其中 $root 是项目代码安装目录)的文件,就直接把这个文件的内容发送给用户。
显然,目录中没有叫 example 的文件。然后就看 $uri/,增加了一个 /,也就是看有没有名为 /$root/example/ 的目录。
又找不到,就会 fall back 到 try_files 的最后一个选项 /index.php,发起一个内部 “子请求”,也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/index.php

适配react-router browserrouter配置

首先文件存放路径是子目录 /usr/local/services/app_logical_server-1.0/bin/app/screen
访问路径是 https://example.com/app/screen/

错误的nginx 配置

    server {
        listen       8080;
        root  /usr/local/services/app_logical_server-1.0/bin/app/screen;
        location ~* \.(gif|jpg|png|js|css)$ {
          root /usr/local/services/app_logical_server-1.0/bin/app/screen/;
        }
        location ^~ /app/screen {
          root   html;
          index  index.html;
          try_files $uri $uri/ /index.html;
        }

    }

错误点

错误现象是index.html可以找到,但是index.html中的js写的是相对路径,导致所有的静态资源文件也进入了第二个location,导致页面白屏。
分析如下。

1.优先级问题

首先匹配 =,其次匹配^~, 其次是按文件中顺序的正则匹配,最后是交给 / 通用匹配。当有匹配成功时候,停止匹配,按当前匹配规则处理请求。
~* 的优先级低于 ^~所以第一个配置静态资源文件虽然写在前面,还是不会进去的。

2. server root 配置错误

解决优先级问题后,问题依然存在。原因就是这个。root 在server和location中都有,都是配置文件开始寻找的根路径,如果url是https://xxxx:8084/app/screen,location中的配置优先级高于server。首先会进入第二个location中,寻找文件,文件路径是root和域名后面的路径的拼接,例如:访问路径是 https://example.com/app/screen/umi.js,server root 为 /usr/local/services/app_logical_server-1.0/bin/app/screen。 nginx寻找文件的地址为/usr/local/services/app_logical_server-1.0/bin/app/screen/app/screen/umi.js.当然找不到,报404错误。

正确的配置

    server {
        listen       8084;
        root  /usr/local/services/app_logical_server-1.0/bin/;
        location ~* \.(gif|jpg|png|js|css)$ {
            root  /usr/local/services/app_logical_server-1.0/bin;
        }
        location ~* /app/screen {
          #try_files $uri $uri/ /usr/local/services/app_logical_server-1.0/bin/app/screen/index.html;
          root  /usr/local/services/app_logical_server-1.0/bin;
          try_files /app/screen/index.html =404;
        }
    }

不带/的url重定向问题

当前配置还有个问题,就是末尾不带斜杠时,index.html可以加载到,但是html中的资源文件写的相对路径,当url 为https://example/app/screen时,相对路径为https://example/app,以js为例,https://example/app/umi.js,所以报404错误。
解决方案为,利用location优先级,再加一个 = /app/screen 的location 。

    location = /sa/screen {
        rewrite ^([^.]*[^/])$ $1/ permanent;
        port_in_redirect off;
    }

但是到此还没结束。因为业务需要,本层nginx前面还有一层Nginx。所以301 重定向的时候,会带上端口号。导致找不到请求。port_in_redirect off; 配置可以解决此问题

最终版完美配置

server {
        listen       8084;
        root  /usr/local/services/app_logical_server-1.0/bin/;
        location = /sa/screen {
            rewrite ^([^.]*[^/])$ $1/ permanent;
            port_in_redirect off;
        }
        location ~* \.(gif|jpg|png|js|css)$ {
            root  /usr/local/services/app_logical_server-1.0/bin;
        }
        location ~* /app/screen {
          #try_files $uri $uri/ /usr/local/services/app_logical_server-1.0/bin/app/screen/index.html;
          root  /usr/local/services/app_logical_server-1.0/bin;
          try_files /app/screen/index.html =404;
        }
    }
    原文作者:shirleyYing
    原文地址: https://segmentfault.com/a/1190000020170428
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞