目录

1. 概述

2. 使用 Nginx 实现 URL 的重定向

3. 综述

4. 个人公众号

---

1. 概述

老话说的好：取乎上，得其中；取乎中，得其下。因此我们不妨把目标定的高一些，去努力，才能得到更好回报。

言归正传，今天我们来聊聊 使用 Nginx 实现 URL 的重定向。

2. 使用 Nginx 实现 URL 的重定向

2.1 使用场景

我们日常分享一个网站地址时，常常会有这样的效果，同样一个网址，在电脑的浏览器打开，是一种效果，而在手机的浏览器打开，就会展现出另一种更适合手机显示的效果。

通常要达到这样的效果，有两种方式实现：

一、使用自适应的 H5 页面实现，根据窗口宽度的大小，自动调整页面的布局。

二、使用Nginx，依据终端的不同，跳转到不同的页面，电脑打开，跳转到 PC端 使用的网页，手机打开，跳转到 手机端 使用的网页。

今天我们介绍一下第二种方式，是如何实现的。

2.2 单纯的重定向

有些 URL 的重定向，新 URL 不需要继承原 URL 的参数，例如 网站首页，这种情况，在 Nginx 配置文件的 location 中使用 return 302 的方式进行跳转即可。

location / {
        # 判断是否是移动端
        if ( $http_user_agent ~ "(MIDP)|(WAP)|(UP.Browser)|(Smartphone)|(Obigo)|(Mobile)|(AU.Browser)|(wxd.Mms)|(WxdB.Browser)|(CLDC)|(UP.Link)|(KM.Browser)|(UCWEB)|(SEMC-Browser)|(Mini)|(Symbian)|(Palm)|(Nokia)|(Panasonic)|(MOT-)|(SonyEricsson)|(NEC-)|(Alcatel)|(Ericsson)|(BENQ)|(BenQ)|(Amoisonic)|(Amoi-)|(Capitel)|(PHILIPS)|(SAMSUNG)|(Lenovo)|(Mitsu)|(Motorola)|(SHARP)|(WAPPER)|(LG-)|(LG/)|(EG900)|(CECT)|(Compal)|(kejian)|(Bird)|(BIRD)|(G900/V1.0)|(Arima)|(CTL)|(TDG)|(Daxian)|(DAXIAN)|(DBTEL)|(Eastcom)|(EASTCOM)|(PANTECH)|(Dopod)|(Haier)|(HAIER)|(KONKA)|(KEJIAN)|(LENOVO)|(Soutec)|(SOUTEC)|(SAGEM)|(SEC-)|(SED-)|(EMOL-)|(INNO55)|(ZTE)|(iPhone)|(Android)|(Windows CE)|(Wget)|(Java)|(curl)|(Opera)" )
        {
            return 302 https://www.zhuifengren.com/h5/index.html;
        }

        proxy_pass http://myUpstream;
 }
1
2
3
4
5
6
7
8
9

2.3 依据原 URL 重定向

另一种情况就是 新 URL 需要继承原 URL 的参数，这种情况就需要使用rewrite 对 URL 进行改写。

location / {
        # 判断是否是移动端
        if ( $http_user_agent ~ "(MIDP)|(WAP)|(UP.Browser)|(Smartphone)|(Obigo)|(Mobile)|(AU.Browser)|(wxd.Mms)|(WxdB.Browser)|(CLDC)|(UP.Link)|(KM.Browser)|(UCWEB)|(SEMC-Browser)|(Mini)|(Symbian)|(Palm)|(Nokia)|(Panasonic)|(MOT-)|(SonyEricsson)|(NEC-)|(Alcatel)|(Ericsson)|(BENQ)|(BenQ)|(Amoisonic)|(Amoi-)|(Capitel)|(PHILIPS)|(SAMSUNG)|(Lenovo)|(Mitsu)|(Motorola)|(SHARP)|(WAPPER)|(LG-)|(LG/)|(EG900)|(CECT)|(Compal)|(kejian)|(Bird)|(BIRD)|(G900/V1.0)|(Arima)|(CTL)|(TDG)|(Daxian)|(DAXIAN)|(DBTEL)|(Eastcom)|(EASTCOM)|(PANTECH)|(Dopod)|(Haier)|(HAIER)|(KONKA)|(KEJIAN)|(LENOVO)|(Soutec)|(SOUTEC)|(SAGEM)|(SEC-)|(SED-)|(EMOL-)|(INNO55)|(ZTE)|(iPhone)|(Android)|(Windows CE)|(Wget)|(Java)|(curl)|(Opera)" )
        {
            rewrite (w+-w+)|(?.*)$ https://www.zhuifengren.com/h5-$1-0.html$2 redirect;        
        }    

        proxy_pass http://myUpstream;
}
1
2
3
4
5
6
7
8
9

rewrite 的语法是： rewrite 正则表达式 改写后的URL redirect;

其中 redirect 是 302 临时重定向的意思，也可以使用permanent 关键字，代表 301 永久重定向。

使用 rewrite 对 URL 进行改写，需要用到 正则表达式 的知识，改写后 URL 中的 $1、$2 代表正则表达式中匹配的第一个字符串和第二个字符串，这里大家可以去了解一下正则表达式，就不细说了。

例子中的正则表达式(w±w+)|(.*)$，可以将原 URL：

https://www.zhuifengren.com/1001-1223.jspv=123456

改写为

https://www.zhuifengren.com/h5-1001-1223-0.htmlv=123456

3. 综述

今天聊了一下 使用 Nginx 实现 URL 的重定向，希望可以对大家的工作有所帮助，下一节我们继续讲 Vue 中的高级语法，敬请期待

欢迎帮忙点赞、评论、转发、加关注 ：）

关注，这里干货满满，都是实战类技术文章，通俗易懂，轻松上手。

4. 个人公众号

，欢迎大家关注

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦