526互联

Ubuntu react nginx pc和mobile兼容

发布时间 2023-07-13 15:00:00作者: 物联宇宙

需求：有两个react前端，分别放在服务器的/var/www/pc目录和/var/www/mobile目录下，在nginx上根据用户浏览器类型跳转到不同的前端文件

网上的这个方法不行：

 

server {
    listen 80;
    listen x.x.x.x;
    server_name www.xxxx.com;
    index index.html;
	location / {
		#默认PC端访问内容
		root /var/www/pc;
		#如果是手机移动端访问内容
		if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
			root /var/www/mobile;
		}
		try_files $uri $uri/ /index.html;
}

 

正确的作法：

 1 server {
 2     listen 80;
 3     listen x.x.x.x;
 4     server_name www.www.com;
 5     index index.html;
 6     location / {
 8         root /var/www/pc;
 9         try_files $uri $uri/ /index.html;
10            if ($http_user_agent ~* '(Android|webOS|iPhone|iPod|BlackBerry)') {
11                        rewrite ^/ http://x.x.x.x:81/;
12                 }
13         
14     }
15 }
16 server {
17     listen 81;
18     listen x.x.x.x;
19     server_name example.com;
20     index index.html;
21     location / {
23         root /var/www/mobile;
24         try_files $uri $uri/ /index.html;
26     }
27 }

此方法也可以避免404not found的错误