使用nginx搭建前端项目web服务器以及利用反向代理调试远程后台接口

今天给大家介绍的是在前后端分离的趋势下，前端同学们利用nginx来开发和调试自己的前端项目。

换做以前，大家正常的前端调试流程可能是这样的。

1、首先搭建好后台的语言环境

2、把后台代码拉到本机

3、通过启动 tomcat或者是apache。

4、打开网页正常调试

这样的好处是整个流程每个人很熟悉，没什么坑。接口调试不通那就找后台吧。

坏处是

1、前端同学需要熟悉基本的后台程序运行知识，比如说后台JAVA的包管理器必须提前下载好依赖，不然后台程序跑不起来。

2、明明后台代码在后台同学电脑上可以正常启动，但是在自己的电脑上偏偏就会出问题，时不时的还得麻烦后台同学。

3、后台程序启动太慢，每次前端代码改动都要好几分钟才能重启一次服务器(假设开发环境前后台代码部署在同一台服务器上)。开发效率太低。

前端同学用nginx搭建自己的web服务器，后台程序专门部署在一台服务器上(我们之前公司就有三套环境，开发/测试/生产)，这样做的好处是

1、前端代码基本都是静态文件，重启一次很快，也就几秒钟时间。

2、不用配置后台语言开发环境，不需要关心后台代码是如何运行起来的，也不用管他究竟用了多少依赖包。

3、对网络环境不限制，无所谓是内网还是外网。

这样的想法是不错的，不过需要解决的一个问题是前端搭建了自己的静态服务器后，页面上发出的ajax请求如何回应？因为我们本地是没有真正的后台服务器接口的。所以我们要想办法利用nginx把请求转发到真正的远程后台服务器上，然后后台服务器返回数据给nginx，nginx收到数据后再返回给我们页面。这种技术一般成为请求转发或者叫反向代理。

（还有一种办法就是通过判断当location.href == localhost 时设置所有的API请求都用绝对路径，然后关闭浏览器的跨域检查.关闭跨域检查方式，右键chrome属性，在目标那里追加,  --disable-web-security --user-data-dir=C:\tmp   注意是 追加！！！）

使用nginx搭建静态服务器这个不难，网上一大堆的教程，这里就不介绍了，难就难在如何请求转发。本人一开始对nginx配置也不太懂，网上的教程也是模棱两可，自己摸索了好几天才搞定这一套流程。

下面放出一张nginx的配置图



配置很简单，不过我却搞了好几天，这里大概给大家讲一下重点部分，

1、location 支持配置项目的绝对路径

2、假设我们的后台API地址是以API开头，location ^~ /api/ 代表nginx将会拦截请求地址中包含"/api/"字样的请求，其实这就是我们的ajax请求路径，拦截到请求之后根据写法会分成两种情况把这个请求转发到 下面 proxy_pass 的地址上。

  举个例子:

a、如上图，如果proxy_pass 的URL以 / 结尾 ，那么请求转发的时候 将 不会 带上 匹配到的 /api/ ，也就是说如果 登录请求 URL是 localhost:60001/api/user/login，proxy_pass  URL 是 http://a.xx.com:8080/platform/， Nginx将会
把这个请求转发成 http://a.xx.com:8080/platform/user/login 
b、如果proxy_pass 的URL不以 / 结尾 ，那么请求转发的时候 将 会带上 匹配到的 /api/ ，也就是说如果 登录请求 URL是 localhost:60001/api/user/login，proxy_pass  URL 是 http://a.xx.com:8080/platform/， Nginx将会 把这个请求转发成 http://a.xx.com:8080/platform/api/user/login 
3、一般我们登录之后服务器会通过Set-Cookie把token写回到我们本地，如果不设置 proxy_cookie_path 的话，服务器Set-Cookie命令会失效，本地存不了cookie，从而导致token丢失。

这里proxy_cookie_path有一点需要注意的是 如果 proxy_pass  URL 是 http://a.xx.com:8080/platform/ 这种情况  proxy_cookie_path应该设置成 /platform/ / (注意两个斜杠之间有空格)。

如果 proxy_pass  URL 是 http://a.xx.com:8080/这种情况  proxy_cookie_path应该设置成 / / (注意两个斜杠之间有空格)

重启下nginx，你就会发现一切都正常了。

好了，该说的都说完了，希望各位前端同学们能够更加高效的开发前端项目。