Nginx多端适配

Nginx 多端适配配置：基于 User-Agent 的动态资源分发

在移动互联网时代，网站通常需要为 PC 端、移动端（手机、平板）提供不同的页面或服务。Nginx 可通过解析客户端的User-Agent头（浏览器标识），自动将请求导向对应的资源或服务，实现多端适配。本文详细讲解 Nginx 多端适配的配置方法、场景示例及优化技巧。

多端适配原理：解析 User-Agent

客户端发起请求时，会在 HTTP 头中携带User-Agent（UA）信息，包含设备类型、浏览器版本等（如：

• PC 端：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
• 移动端：Mozilla/5.0 (iPhone; CPU iPhone OS 16_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Nginx 通过$http_user_agent变量获取 UA 信息，结合正则匹配判断设备类型，进而分发到对应的资源或服务。

基础配置：静态资源多端适配

若 PC 端和移动端的静态资源（HTML、CSS、JS）存放在不同目录，可通过root指令动态切换根目录：

server {
    listen 80;
    server_name example.com;

    location / {
        # 默认指向PC端资源目录
        root /var/www/pc;

        # 匹配移动端UA，切换到移动端资源目录
        if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry|iPad)') {
            root /var/www/mobile;
        }

        # 索引页设置
        index index.html index.htm;
    }
}

配置说明

• 正则匹配规则：~*表示不区分大小写匹配，(Android|iPhone|...)涵盖主流移动设备的 UA 特征；
• 目录结构：
  • PC 端资源：/var/www/pc/index.html
  • 移动端资源：/var/www/mobile/index.html
• 访问效果：PC 端访问example.com加载pc/index.html，移动端访问则加载mobile/index.html。

进阶配置：反向代理多端服务

若 PC 端和移动端对应不同的后端服务（如 PC 端 API 和移动端 API），可通过proxy_pass反向代理到不同服务：

server {
    listen 80;
    server_name api.example.com;

    location / {
        # 默认代理到PC端API服务
        proxy_pass http://pc_api:8080;

        # 移动端请求代理到移动端API服务
        if ($http_user_agent ~* '(Android|iPhone|iPad)') {
            proxy_pass http://mobile_api:8081;
        }

        # 传递客户端信息
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

适用场景

• 前后端分离架构，PC 端和移动端 API 逻辑不同（如数据字段、权限控制）；
• 移动端服务需要单独的负载均衡或资源分配（如更低的超时时间、更高的并发限制）。

高级技巧：结合 location 和变量优化

1. 针对特定路径适配

仅对静态资源目录（如/static）进行多端适配，API 路径保持统一：

server {
    listen 80;
    server_name example.com;

    # 静态资源多端适配
    location /static/ {
        root /var/www/pc;  # PC端静态资源：/var/www/pc/static/
        if ($http_user_agent ~* '(Android|iPhone)') {
            root /var/www/mobile;  # 移动端静态资源：/var/www/mobile/static/
        }
    }

    # API路径统一代理到后端
    location /api/ {
        proxy_pass http://backend:8080;
    }
}

2. 使用变量简化配置

通过自定义变量存储设备类型，避免重复编写正则：

server {
    listen 80;
    server_name example.com;

    # 定义变量$device，默认pc，移动端设为mobile
    set $device 'pc';
    if ($http_user_agent ~* '(Android|iPhone|iPad)') {
        set $device 'mobile';
    }

    # 根据$device动态选择根目录
    root /var/www/$device;  # PC: /var/www/pc，移动端: /var/www/mobile

    location / {
        index index.html;
    }
}

3. 适配平板设备

单独区分平板设备（如 iPad），提供专属资源：

server {
    listen 80;
    server_name example.com;

    # 平板设备适配
    if ($http_user_agent ~* 'iPad') {
        root /var/www/tablet;
    }
    # 手机设备适配
    else if ($http_user_agent ~* '(Android|iPhone)') {
        root /var/www/mobile;
    }
    # 默认PC端
    else {
        root /var/www/pc;
    }
}

注意事项与优化

1. UA 正则准确性：

   • 移动设备 UA 多样，需覆盖主流关键词（如Android、iPhone、webOS、BlackBerry）；
   • 避免过度匹配（如部分 PC 浏览器 UA 含Mobile关键词，需排除）。

2. 性能优化：

   • 正则匹配会消耗少量 CPU，建议将规则写在server块而非location块（仅匹配一次）；
   • 对高并发场景，可考虑通过map指令预定义设备类型（性能更优）：

   http {
       # 用map指令预定义设备类型（比if判断更高效）
       map $http_user_agent $device {
           default 'pc';
           ~*Android 'mobile';
           ~*iPhone 'mobile';
           ~*iPad 'tablet';
       }
   }
   
   server {
       root /var/www/$device;  # 直接使用预定义的$device变量
   }

3. 兼容性处理：

   • 部分浏览器可能篡改 UA，建议结合响应式设计（CSS Media Query）作为补充；
   • 提供手动切换入口（如 “切换到 PC 版” 按钮），通过 Cookie 覆盖自动判断：

   # 若Cookie中存在force_pc=1，则强制使用PC端
   if ($cookie_force_pc = '1') {
       set $device 'pc';
   }

验证适配效果

• PC 端测试：使用 Chrome、Firefox 等浏览器访问，应加载 PC 端资源；

• 移动端测试：使用手机浏览器或 Chrome 开发者工具（切换设备模式），应加载移动端资源；

• UA 伪装测试：通过curl发送自定义 UA 验证：

  # 模拟iPhone访问
  curl -H "User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_5 like Mac OS X) AppleWebKit/605.1.15" http://example.com