首先说下需求,由于WEB没写响应式页面,而是写了独立的PC和移动页面,导致必须要通过其他方式判断用户设备并且给出相应内容
初步的解决方案是
- 通过前端JS跳转
- 额外写一个index 隐藏跳转过程和url,根据用户UA加载移动端或者PC端代码
- 通过服务端判断用户UA 返回不同内容
讨论结果是
- 通过前端JS跳转会导致移动端URL暴露,在用户做二次分享的时候体验也不好
- 额外写一个index来动态加载代码的方法我觉得挺棒的,但是前端太懒了不想写
- 通过Nginx判断UA 返回内容,并且保证URL不变
好吧那就开写
先交代服务器情况 /home/www/ 是根目录 PC代码在test里 移动端代码在 test/mobile里
最先用的 if 里嵌套 alias 的方法 代码如下(注意:这种代码是错误的)
location /test/ {
if ( $http_user_agent ~ "(iPhone)|(Android)" ){
alias /home/www/test/mobile/;
}
但是Nginx提示这种语法不支持。。。。
报错内容
nginx: [emerg] "alias" directive is not allowed here in /etc/nginx/sites-enabled/default:49
关于if的各种坑,可以查看 https://xwsoul.com/posts/761?tdsourcetag=s_pctim_aiomsg
感觉写的还不错
然后咨询和讨论得到两种解决方法
- 通过 rewrite 和 location 做两次处理
- 通过 if 内嵌变量,然后把用alias+变量的方法间接处理
上代码
方案一
location ~ ^/test(/.*) {
set $way $1;
if ( $http_user_agent ~ "(iPhone)|(Android)" ){
rewrite ^ fuckurl$way;
}
}
location fuckurl/ {
internal;
alias /home/www/test/mobile/;
}
方案二
location /test/ {
set $getdir "/home/www/test/";
if ( $http_user_agent ~ "(iPhone)|(Android)" ){
set $getdir "/home/www/test/mobile/";
}
alias $getdir;
}
都实测过了,代码能用