nginx 移动端和PC端自动跳转

港控/mmm° 2022-02-05 08:43 594阅读 0赞

转自：https://www.jianshu.com/p/ea482004f32f

1.  前提  
    一个官网，分别做了 PC 端和移动端，它们的信息如下所示：

<table> 
 <thead> 
  <tr> 
   <th>平台</th> 
   <th>域名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>PC 端</td> 
   <td><code>www.one.com</code></td> 
   <td>PC 端官网</td> 
  </tr> 
  <tr> 
   <td>移动端</td> 
   <td><code>m.one.com</code></td> 
   <td>移动端官网</td> 
  </tr> 
 </tbody> 
</table>

1.  需求  
    在 PC 端访问 `www.one.com` 和 `m.one.com` 都跳转到 `www.one.com`，  
    在移动端访问 `www.one.com` 和 `m.one.com` 都跳转到 `m.one.com`。
2.  解决  
    在nginx里完成相关的配置：  
    其中：PC 端 `www.one.com`

server {
          listen       80;
          server_name  www.one.com;
    
          #charset koi8-r;
          #access_log  logs/host.access.log  main;
        ############# 作用代码 start ##################
        # 下面根据user_agent可以获取
         if ($http_host !~ "^www.one.com$") {
          rewrite  ^(.*)    http://www.one.com$1 permanent;
         }
         if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
          rewrite  ^(.*)    http://m.one.com$1 permanent;
         }
         ############# 作用代码 end ##################
        location / {
                root     /home/build/rampage-home-front/dist/html;
                index  index.html index.htm;
         }
    }

移动端：`m.one.com`

server {
          listen       80;
          server_name  m.one.cn;
    
          #charset koi8-r;
          #access_log  logs/host.access.log  main;
        ############# 作用代码 start ##################
        #非移动端跳转到 www.one.com
         if ($http_user_agent !~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
          rewrite  ^(.*)    http://www.one.com$1 permanent;
         }
        ############# 作用代码 end ##################
        location / {
            root     /home/build/rampage-mobile-front/dist;
            index  index.html index.htm;
          }
    }