Nginx的反向代理及前后端分离

前言：在我最开始接触Nginx的时候他只是用于系统负载均衡，但是随着系统的演化，新框架的出现，现在的Nginx在用于作为静态Web服务器、反向代理，实现前后端分离。而分布式系统的后端，通过Nginx反向代理给gateway，通过路由gateway路由给目标服务。

1.安装Nginx

       一般来说Nginx这一块都是由用户管理的，但是根据实际情况我们可能需要自己进行安装，而且在很多情况下可能不会提供网络，无法使用yum命令进行在线安装，但是离线安装预先准备的安装包可能会出现各种依赖的问题，如我使用的是CentOS系统，则进入CentOS系统的ISO的package文件夹，把里面的rpm复制到系统磁盘中。执行

rpm -Uvh *.rpm --nodeps --force

安装成功后通过

gcc -v
g++ -v

       如果能查看版本即证明安装成功。安装完Nginx的依赖之后，就可以在http://nginx.org/en/download.html中下载Nginx进行安装了，因为我们安装的服务是在CentOS中运行，所以我们选择tar.gz文件进行部署、安装

因为我们已经安装个nginx安装的依赖，所以只要执行下面的代码

解压nginx的压缩包
tar -zxvf nginx-1.12.0.tar.gz
cd nginx-1.12.0
到文件夹中编译安装
./configure
make
make install
查看当前nginx所在的位置
whereis nginx
移动到whereis nginx所指的目录启动nginx
./nginx

当访问服务器所在的ip:8080出现以下的页面则证明了安装成功

2.Nginx反向代理

       在作者接触过的系统中，Nginx可作为代理服务器把对外的请求方向推送到内网的上游服务器中，并且将上游服务器的响应结果返回到外部的请求。如图示

首先在host设置一个假的域名方便理解,这个时候访问http://www.back.com:8080/也会得到nginx的欢迎页面。

127.0.0.1 www.back.com

       这个时候通过修改nginx的配置文件nginx.conf来实现nginx的方向代理，这里我们只进行简单的配置修改，如果想知道相关的详细配置可以购买陶辉老师的《深入理解Nginx：模块开发与架构解析（第2版）》。这里如果是OSX系统使用brew进行安装的话可以通过下面的代码查询nginx的设置

brew info nginx

修改nginx.conf的配置

    #定义一个upstream块
    upstream nginxtest{
       server www.back.com;
    }

    server {
        #监听80端口即当访问www.back.com的时候不需要使用端口
        listen       80;
        #当访问www.back.com/*的时候向上游服务器，即我写的springboot服务
        location ~ ^/? {
	        proxy_pass http://nginxtest;
	    }
    }

定义端口为80的spingboot服务，并提供接口/nginx接口

访问http://www.back.com/nginx得到如下的结果，就证明反向代理成功

3.Nginx协助前后端分离

3.1 Nginx配置Web静态服务器

Nginx配置成为静态服务器其实非常简单，只要配置一段表达式就能实现

        #匹配以表达中结尾的文件的请求
        location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ 
        {   
            root html;
            expires      7d; 
        }  

3.2 静态服务器配置反向代理实现前后端分离

       Nginx在实现静态服务器同时还能对请求进行反向代理，而前后端分离：前端作为展示还有界面的控制交换，而后端则专注于业务逻辑和数据，而同时设置静态服务器和反向代理就能实现最简单的前后端分离。

实现nginx.conf配置

    upstream nginxtest{
       server www.back.com:3152;
    }
    server {
        #监听80端口即当访问www.back.com的时候不需要使用端口
        listen       80;
        server_name  localhost;
        省略.....
        #匹配以表达中结尾的文件的请求
        location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ 
        {   
            root html;
            expires      7d; 
        }   	
        location / {
            root   html;
            index  index.html index.htm;
        }
        #当访问www.back.com/*的时候向上游服务器，即我写的springboot服务
        location ~ ^/? {
	        proxy_pass http://nginxtest;
	    }
    }

       下面通过前端的ajax向后端请求并且获取到后端服务器的响应，实现最简单的前后端分离。

       $.ajax({url:"/nginx",success:
       function(result)
        {
            console.log(result);
        }
       });

github:https://github.com/tale2009/nginx-using