nginx实现前后台分离部署

2.1         前后台分离部署

(一)       组网图

 

(二)       简要说明：

如标题所示，至于为什么要前后台分离部署，个人理解的原因有三

(一)   便于部署

前台代码由nginx启动，无需再做前后台集成打包，节省升级维护资源。

(二)   便于维护

由于前后台分离而不是集成在一个tomcat中运行，此时如果需要对前端代码进行迭代部署时，仅需要对特定目录下的前端代码进行替换即可，无需前后台集成打包后又再次部署。节省升级维护资源。

(三)   解决跨域问题

首先我们一起理解一下什么是跨域。

当两个地址在协议、主机或者端口不一致的时候，即判定为跨域。

如果有兴趣的朋友可以查看附件链接查看详解资料。

如：我在192.168.1.110上部署的前端代码 需要向192.168.1.111的后台发送请求，此时就会出现跨域问题。

那么 nginx可以完美的解决此类问题，无论的内网跨域甚至是外网均可以正常访问。

(三)       nginx配置

#user  nobody;

worker_processes  1;    #开启niginx工作进程，一般几个CUP核心写几个

error_log  /usr/local/nginx/logs/error.log;

events {

    worker_connections  1024;  #一个进程能同时处理1024个请求

}

 

http {

        gzip on;        #开启gzip压缩

        gzip_min_length 1k;

        gzip_buffers 4 16k;

        gzip_http_version 1.0;

        gzip_comp_level 6;

        gzip_types text/plain text/css test/javascript application/json application/javascript application/x-javascript application/xml;

        #设置需要压缩的数据格式

        gzip_vary on;

        include       mime.types;

        default_type  application/octet-stream;

        sendfile on;

        keepalive_timeout 65;

        types_hash_max_size 2048;

# 日志配置

        access_log /usr/local/nginx/access.log;

    server {

        listen       88;

        server_name  relaxsystem.relax.com;   #注意这里我该了下访问域名

        charset utf-8;

        root /usr/local/123; #前端代码访问路径，

        index index.html;

        #定义index页面

        error_page 404          /index.html;

        location ^~ /api/     #反向代理通配所有的API接口

        {

        proxy_pass http://192.168.1.60:15587; #访问的后台

        proxy_send_timeout 1800;

        proxy_read_timeout 1800;

        proxy_connect_timeout 1800;

        client_max_body_size 2048m;

        proxy_http_version 1.1;

        proxy_set_header Upgrade $http_upgrade;

        proxy_set_header Connection "Upgrade";

        proxy_set_header Host $http_host;

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_set_header X-Forwarded=-Proto $scheme;

        }

}

测试备份配置文件：

 

查看前端代码放置路径

 

(四)       本地配置域名解析便于外网访问

a)    Windows配置访问验证

访问C:\Windows\System32\drivers\etc 下打开hosts文件 加入

relaxsystem027.gnway.cc relaxsystem.relax.com

 

上面的配置信息可以看到，我们用的192.168.1.119的前端代码向192.168.1.60的后台发送请求。所以我们

使用Postman向relaxsystem.relax.com:10388发送请求，并查看内网60访问的日志信息。

 

可以看到Postman发送成功且60的日志有相关日志信息，说明由119前端向60的后台发送的请求并得到相应的回执，这里跨域的问题就完美解决了。

b)    验证升级

我们一起试试60映射后的外网IP看看是不是真的实现了跨域。

路由器将192.168.1.60的15587端口映射至外网，外网端口为1060

 

然后修改配置文件

将之前的内网设置改为外网访问

 

重启nignx服务

 

再次发送请求

 

后台采用外网访问也是OK的。

a)    Linux配置访问验证

访问编辑/etc/hosts

内容参考windows下配置

验证内容：略