Nginx实现移动端与PC端站点分离配置详解
背景与需求
在网站运营中,移动端与PC端往往需要不同的页面结构和资源加载策略。通过Nginx进行用户代理识别,可以将请求分发到不同的后端站点或目录,实现移动端与PC端的独立维护与优化。本文介绍基于Nginx的常见区分方法,不涉及特定业务数据。
核心配置原理
Nginx依赖HTTP请求头中的User-Agent字段判断终端类型。通过if或map指令匹配移动端特征字符串,然后使用proxy_pass或rewrite将请求导向对应站点。
方法一:使用map指令集中管理匹配规则
推荐使用map定义移动端UA变量,便于维护和扩展。示例配置:
http {
map $http_user_agent $is_mobile {
default 0;
~*iphone 1;
~*android 1;
~*mobile 1;
~*windows\sphone 1;
}
}然后在server块中根据变量进行转发:
server {
listen 80;
server_name example.com;
if ($is_mobile) {
proxy_pass http://m.example.com$request_uri;
break;
}
proxy_pass http://www.example.com$request_uri;
}注意:if中使用proxy_pass需谨慎,建议使用rewrite结合内部跳转,或使用try_files指向不同目录。
方法二:基于目录区分(同一根目录不同子站)
如果PC与移动站点部署在同一服务器不同目录,可以用location匹配UA:
location / {
if ($http_user_agent ~* "(iphone|android|mobile)") {
rewrite ^/(.*)$ /mobile/$1 last;
}
root /var/www/pc;
}
location /mobile/ {
root /var/www/mobile;
}此方案适用于模板型站点,需注意路径重写后的访问控制与缓存策略。
方法三:使用$http_user_agent正则直接判断
简单场景可直接在server或location中使用if:
server {
listen 80;
server_name example.com;
root /var/www;
if ($http_user_agent ~* "android|iphone|ipad|mobile") {
set $target "m";
}
if ($target = "m") {
rewrite ^/(.*)$ /mobile/$1 last;
}
}此方法适用于快速部署,但规则较多时不易维护。
注意事项
- UA正则匹配大小写:建议使用
~*进行不区分大小写匹配。 - iPad和平板设备:部分平板UA中不含手机字符串,可根据业务需求决定是否匹配。
- SEO影响:若采用不同URL(如m.example.com),建议在页面中标注
link rel=alternate,并在网站后台设置对应的canonical标记。 - 缓存策略:不同的User-Agent可能导致缓存命中率下降,建议在Vary头中添加User-Agent或使用独立缓存键。
总结
Nginx通过UA区分移动端与PC端属于服务器端常规做法。采用map指令提高可维护性,配合cookie或设备识别库可扩展为更精准的适配方案。实际部署时需结合后端程序响应头、带宽及日志分析进行调优。