材料
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：用于定义日志的格式
| 参数 | 说明 | 示例 |
|---|---|---|
| $remote_addr | 客户端地址 | 192.168.1.88 |
| $remote_user | 客户端用户名称 | -- |
| $time_local | 访问时间和时区 | 24/Aug/2023:15:37:55 +0800 |
| $request | 请求的URI和HTTP协议 | "GET /api/menulist?meauId=1 HTTP/1.1" |
| $http_host | 请求地址，即浏览器中你输入的地址（IP或域名） | http://192.168.1.168 |
| $status | HTTP请求状态 | 200 |
| $upstream_status | upstream状态 | 200 |
| $body_bytes_sent | 发送给客户端文件内容大小 | 1688 |
| $http_referer | url跳转来源 | www.baidu.com/ |
| $remote_addr | 客户端地址 | 192.168.1.168 |
| $http_user_agent | 用户终端浏览器等信息 | "Mozilla/5.0 (Linux; Android 12; HarmonyOS; LIO-AN00; HMSCore 6.11.0.332) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.88 HuaweiBrowser/14.0.1.302 Mobile Safari/537.36" |
| $ssl_protocol | SSL协议版本 | TLSv1 |
| $ssl_cipher | 交换数据中的算法 | RC4-SHA |
| $upstream_addr | 后台upstream的地址，即真正提供服务的主机地址 | 39.66.12.168:80 |
| $request_time | 整个请求的总时间 | 0.165 |
| $upstream_response_time | 请求过程中，upstream响应时间 | 0.002 |
- access_log：记录nginx服务器访问日志的文件
# 使用方式
# access_log [format];
# path: 日志输出的路径
# format: 日志格式
# 可通过如下定义查看对应终端的访问日志，用于验证不同终端访问的出处结果
access_log /opt/web/h5/myapp.log mylog;
如果日志不输出，可能路径不对或终端浏览器缓存（清空终端缓存再试）
