Nginx同一域名pc跳转h5(适用于前后端不分离项目)

维护一个老项目，一直都是通过js控制跳转，有一个问题就是跳转的时候会加载PC的资源，样式文件会加载出来导致用户体验很差，看起来页面很乱。之前解决的都是不同域名或者不同服务或者前后端分离这种解决方法大同小异，直接判断跳转就完事了。

但是这个老项目的缺点就是PC访问地址是www.shop.com而H5访问的地址是www.shop.com/mobile

nginx初始配置文件

location /
        {
            set $URL  $scheme://$http_host$request_uri;
            proxy_set_header X-Forwarded-Scheme  $scheme;
            proxy_set_header X-Forwarded-Proto  $scheme;
            proxy_set_header Host  $host:$server_port;
            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;
            proxy_pass http://shop;
        }

核心的代码就是下面的判断是否是手机

if ($http_user_agent ~* "(mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)")

 一开始的想法局限性了，想在这一个location里面解决问题试了很多种例如

if ($http_user_agent ~* "(mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)") {
    proxy_pass http://shop/mobile;
}

正常思维，但是proxy_pass不支持这么写

想到了rewrite重写url,感觉看到了希望

if ($http_user_agent ~* "(mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)") {
        rewrite ^(.*)$ /mobile/$1 break;
    }

浏览器模拟一打开果然跳手机了，但是这地址怎么不太对就是这个样子

www.shop.com/mobilemobilemobilemobilemobilemobilemobilemobilemobilemobilemobile

死循环了已经浏览器撑不住了,多加个判断吧，判断当前url如果是/mobile就不rewrite了

set $URL  $scheme://$http_host$request_uri;
if ( $URL  !~ "/mobile" ){
        rewrite ^(.*)$ /mobile/$1 break;
}

完事了reload语法错误，心态崩了了，按照我写代码的逻辑应该成立啊

突然想明白rewrite之后就不要走第一个location规则了，立马动手

                location /
        {
            proxy_set_header X-Forwarded-Scheme  $scheme;
            proxy_set_header X-Forwarded-Proto  $scheme;
            proxy_set_header Host  $host:$server_port;
            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;
if ($http_user_agent ~* "(mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)") 
        {
            rewrite ^(.*)$ /mobile/$1 break;
        }
       			proxy_pass http://shop;
			add_header  Cache-Control  max-age=no-cache;
        }
	                location ^~ /mobile
        {
                        set $URL  $scheme://$http_host$request_uri;
                        proxy_set_header X-Forwarded-Scheme  $scheme;
                        proxy_set_header X-Forwarded-Proto  $scheme;
                        proxy_set_header Host  $host:$server_port;
                        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;
                        proxy_pass http://shop;
        }

重新reload大功搞成，跳转成功

--------------------------------------------------

发现这样并没有成功ios系统跳转没有任何问题，安卓手机会无限重定向，和项目古老也有关系，获取session一直获取不到，然后自动重定向，导致支付的时候无限刷新。后来又修改了一下

if ($http_user_agent ~* "(mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)") 
        {
       rewrite "^/(.*)$" http://shop.com/mobile/$1;
        #这里的域名修改成自己的项目域名
        }

不知道还有没有大佬有更好的解决办法

--------------------------------------------------      

又发现一个问题我如果有多个手机端的项目，都会跳到mobile,现在做个了小程序端一直跳转mobile，我就很懵逼，突然明白是nginx的问题，所以每次都要加

location /applets
        {
}