Nginx配置对同一站点的PC与手机终端访问区分

材料

PC端项目: http://192.168.1.168:8077
移动端项目: http://192.168.1.168:8066

目标

当使用PC访问8077端口时显示PC端的正常界面面
当使用手机访问8077端口时重定向到8066端口，显示移动端界面
无论PC还是手机访问8066端口都显示移动端界面

思路

在Nginx配置文件中定义一个变量，从$http_user_agent中匹配访问来自什么终端，从而进行判断

# 设置变量
map $http_user_agent $is_mobile {
    default         0;
    "~*Mobile|Android"   1;
}
# 输出日志格式
log_format mylog '$remote_addr - $remote_user [$time_local] '
                      '"$request" $status $body_bytes_sent '
                      '"$http_referer" "$http_user_agent" '
                      'MyVariable: $is_mobile';
server
    {
        listen 8077;
        server_name localhost:8077;

        # 打印变量的值
       if ($is_mobile) {
            # 如果是移动设备，则将请求重定向到移动端页面
            rewrite ^/(.*)$ http://192.168.1.168:8060/$1 permanent;
       }
       
        # 项目指向
        location /
        {
            root  /opt/web/pcweb;
            try_files $uri $uri.html /$uri /index.html;
            charset utf-8;
        }

        # 系统配置接口代理
        location /api/
        {
            proxy_pass http://192.168.1.168;
        }

        # 打印变量的值
            access_log /opt/web/h5/myapp.log mylog;

    }

解释

• Nginx内置变量 $http_user_agent：客户端浏览器的详细信息

# PC端谷歌浏览器访问后的对应值
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

# 移动端浏览器访问后的对应值
Mozilla/5.0 (Linux; Android 12; LIO-AN00 Build/HUAWEILIO-AN00; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/111.0.5563.116 Mobile Safari/537.36 XWEB/5223 MMWEBSDK/20230701 MMWEBID/8981 MicroMessenger/8.0.40.2420(0x28002851) WeChat/arm64 Weixin NetType/WIFI Language/zh_CN ABI/arm64

# 移动端浏览器访问后的对应值
Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Mobile Safari/537.36

• map：的主要作用是创建自定义变量

	# map $var1 $var2 {...}
	# var1 为源变量，通常可以是nginx的内置变量
	# var2 是自定义变量。
	# $var2 的值取决于 $var1 在对应表达式的匹配情况。
	# 如果一个都匹配不到则 $var2 就是 default 对应的值。
  
  # 匹配终端浏览器信息，如果信息中匹配到Mobile或Android，则设置 $is_mobile = 1 ，默认设置$is_mobile = 0
      map $http_user_agent $is_mobile {
          default              0;
          "~*Mobile|Android"   1;
      }

注意 map 不能写在 server{} 否则会报错

• log_formatt：用于定义日志的格式

• access_log：记录nginx服务器访问日志的文件

# 使用方式
# access_log  [format];
# path: 日志输出的路径
# format: 日志格式

# 可通过如下定义查看对应终端的访问日志，用于验证不同终端访问的出处结果
access_log /opt/web/h5/myapp.log mylog;

如果日志不输出，可能路径不对或终端浏览器缓存（清空终端缓存再试）