配置前后端分离项目共用一个端口-后端使用api访问-使用nginx当网关进行端口转发接口转发 -在线图

vue+springboot项目实现共用一个端口进行外网访问

前端项目进行端口转发到项目

后端项目进行/api接口进行转发到后端

1.打开端口映射工具,进行公网端口映射(如果开发项目有公网则忽略这一步)

端口映射工具有:
花生壳,

1.1进行端口映射配置

配置本机的地址:localhost或者127.0.0.1

要映射的端口号:就是你配置的nginx监听的端口号

应用类型选:http

1.2开启端口映射

1.3然后你的nginx对应的公网地址就是访问地址:域名了

访问地址:
http://1f872a2261.zicp.vip:28579

注意:
这个可以使用别的设备进行访问

2.配置nginx进行端口转发和接口映射

2.1nginx目录结构

2.2进入conf目录对nginx的配置文件nginx.conf进行配置

最主要的配置信息

#################################最主要的配置信息#########################################
    server {
   
        #listen       80;
		#监听的端口,也是nginx服务启动占用的端口
		listen       8001;
		#server name 为虚拟服务器的识别标志，匹配到特定的server块，转发到对应的应用服务器中去。
        server_name  localhost;
	
		#所有访问localhost:8081端口的请求,都发送到这里,模糊匹配
        location / {
   
			#反向代理  对请求localhost: