live-server 搭配 nginx 实现前后端分离开发

一. 前端使用 live-server 运行，访问地址

    http://localhost:8080

二. 后台使用tomcat部署运行，访问地址

   http://localhost:9090

三. 前后端数据交互

1. 配置 nginx 反向代理

进入nginx根目录下的conf目录，在nginx.conf文件的http中添加

#引入自定义配置文件
include reverse-procy.conf;

 

 在conf目录下新建reverse-procy.conf文件，内容如下

#自定义变量 $connection_upgrade
map $http_upgrade $connection_upgrade {
	default upgrade;
	'' close;
}

server {
    listen 9000;
    server_name localhost;    # 这是外网访问进来时的连接地址
    location /{
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_http_version 1.1;
        proxy_pass http://localhost:8080;
    }
	location /api {
		rewrite ^.+api/?(.*)$ /$1 break;
		include uwsgi_params;
		proxy_pass http://localhost:9090;
	}
	location ~* ws$ {
		proxy_pass http://localhost:8080;

		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade; #此处配置 上面定义的变量
		proxy_set_header Connection $connection_upgrade;
	}
}

2. 运行nginx，访问 http://localhost:9000，nginx将会根据配置转发请求到8080和9090端口

参考文章：前端VSCode layui项目+后端IDEA Springboot项目实现前后端分离_代码小轩的博客-CSDN博客_vscode开发layui