前后端分离项目的nginx多个静态站点和反向代理实践

背景说明

目前有以下几个项目:

• 80（Vue项目首页）
• 9090 （Vue项目管理端）
• 8888（Vue项目用户端）
• 7000（注册服务器）
• 7010（网关）
• 7011（系统模块微服务）
• 7012（项目模块微服务）

访问流程是调用网关，通过网关接口实现了转发到各个微服务，如
xx:7010/module-service/user/info会调用7011微服务的接口

多模块的Vue项目部署

直接上nginx配置信息

listen       80;
server_name  localhost;
location / {
    root   /opt/module/static;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
            }
root   /opt/module/static;
location /developer {
    try_files $uri $uri/ /developer/index.html;
}
    		
location /manager {
    try_files $uri $uri/ /manager/index.html;
}

以上实现了多个前端静态模块的部署

分别是

• 80（Vue项目首页）====> 172.18.63.211

• 9090 （Vue项目管理端）====> 172.18.63.211/manager

• 8888（Vue项目用户端）====> 172.18.63.211/developer

  后面连个端口是开发时候的，按照多站点部署就不需要端口号了。

反向代理

前端使用Vue框架，后端使用spring boot作为REST接口服务。以前开发项目一般一个项目只需要部署一个WEB服务（Tomcat等），但是前后端分离后则需要部署两个Web服务。

部署两个Web服务会出现两个问题：

• 跨域
• ip以及端口问题

针对问题1，通过网关加了跨域过滤器实现。
针对问题2，我们就需要用到Nginx的反向代理来实现了。

需要实现

http://172.18.63.211/apis/module-service/user/info --> http://172.18.63.211:7010/module-service/user/info

添加一下配置信息

		location /apis {
            rewrite ^.+apis/?(.*)$ /$1 break;
			include uwsgi_params;
			proxy_pass http://localhost:7010;
        }

然后在Vue项目中修改地址即可

重新打包，完成！

实际测试

等运维添加域名外网映射就可以外网访问了。