Nginx之前后端分离（入门）

几个月前，公司架构优化，首先就是前后端分离。

所谓前后端分离，就是在传统的前后端代码都在一个项目里的基础上，将前后端代码抽离，把前端代码从后端项目了分离出来，前后端开发人员各自在自己的项目里开发。

为什么要前后端分离？

随着项目越做越大，功能模块越来越多，代码量越来越多，前后端代码都糅杂在一个项目里，前后端开发人员几十个，代码提交次数多而杂，项目变得很臃肿，代码维护人员的工作变得难做，此时亟待解决此问题，把前后端代码分离成两个项目，前后端开发人员各自维护自己的项目，使项目轻量化，便于维护。

前后端分离后带来的问题有哪些呢？

1、跨域。前后端分离后，势必各自部署，那么前后端就会存在跨域的问题。

2、前端项目部署方式。前后端各自部署，后端好说，继续用原来的方式部署就行了，前端怎么部署？

3、前后端怎么联调？

带着这3个问题，自然而然的就想到使用nginx做反向代理。

nginx [engine x]是一个HTTP和反向代理服务器，一个邮件代理服务器和一个通用的TCP / UDP代理服务器

我们线上用的是 Nginx ，分离后我们本地开发时有很多同事，还是使用原来的老方式， 把前端代码复制到项目里跑，这样太笨重。所以我就自己研究了一下 nginx ，配置好打好包分享给其他同事，在公司同事间推广。

 

nginx做前后端分离具体怎么使用的呢？下面来说一下。

首先我们在Windows上搞好，下载nginx，官网[http://nginx.org/](http://nginx.org/)，

打开后可以看到目前最新版本是1.17.2

找一个版本下载后放到自己喜欢的目录解压就行了。

然后打开解压后的目录，找到conf目录进去找到nginx.conf文件，文本方式打开。

这个就是nginx的配置文件，我们需要修改这个文件，以适用于我们的需要。

这里只截取了配置文件的一部分，这部分是关键。

解释一下，在http模块里，有两个子模块，upstream  和 server 。

upstream 模块配置的是服务端的（集群）地址，eroly_server 是 upstream 的名称，server 是服务器地址，后跟服务的ip:port，可以写多个，也就是服务器集群地址。

server 模块相当于使用Nginx做静态服务器，配置静态资源的一些信息，使其能够被外部访问。listen 是监听的端口，server_name 是服务器ip，location 模块主要配置资源的地址 location 后面跟的是一个正则表达式表示符合此正则的请求被路由到该模块配置的资源地址。可以配置多个。其中，location 模块中的 root 这里我配置的静态资源的地址，当请求包含 /eroly/（我的项目根地址）时其实访问的是我本地 D盘下的 eroly_static 目录下的对应的文件。例如访问http://localhost/eroly/login/index.html时，其实 nginx 会根据配置信息 从上到下去匹配你配置的 location ，此时将会匹配到 location /eroly/ 这个，那么其实真正访问的是 D:/eroly_static/eroly/login/index.html。

root 下面一行被注释掉的是什么意思？rewrite 表示重定向，假如此时我的D盘eroly_static目录下没有 eroly 这一层，就直接是 D:/eroly_static/login/index.html 少一层目录（可能前端项目没有这个目录，所以从版本管理工具上下载下来就没有。但是后端服务根目录是这个，前端访问的时候需要加上，如果手动添加的话，很麻烦又不能提交，所以用这个指令就很好的解决了这个尴尬的问题），我们就可以用这个指令配合 root 使用。

至于下面这个location 配置的就是服务端的了，假如服务端接口都是 /eroly/api/开头的，那么前端访问后端接口时，就会走这个location ，关键的是 proxy_pass 这个属性，你看后面跟的是 http://eroly_server/ 就是 upstream 的名字。其他字段的含义这里不多说了，可以自行了解。

http {
    upstream eroly_server{
        server localhost:8080;
    }
    server {
        listen       8091;
        server_name  localhost;

        #static
        location /eroly/ {
            root  D:/eroly_static;
            #rewrite ^/eroly/(.*?)$ /$1 break;
        }
        #server
        location /eroly/api {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
            proxy_pass http://eroly_server/;
            proxy_redirect off;
        }
    }
}

这里只是简单的介绍下 Nginx 用于前后端分离，作为前端部署服务器的简单用法，实际 Nginx 的应用非常强大。