开发环境可局域网访问项目 springboot +vue+nginx前后端分离 多个微服务项目 如何设置开发环境可局域网访问

springboot +vue+nginx前后端分离 多个微服务项目 如何设置开发环境可用局域网地址访问

 

1 首先 nginx不需要改动 用原来的就行

server
{
    listen 9001;
    server_name localhost;

#反向代理配置
# 监听9001端口  server_name就是域名  localhost是本机
#这一整个server块可以写到nginx主配置文件的http{}块里面，也可以单独的文件,在include路径里
 
#   HTTP反向代理相关配置开始 >>>
#   ~ 表示正则匹配 不加~表示完全匹配
#   ~ /eduservice/ 就表示路径里包含eduservice的就转发到localhost:8001

     #这里应该是后端端服务器的地址和端口号
    location ~ /eduservice/ {
        proxy_pass http://localhost:8001;
    }

    location ~ /eduoss/ {
        proxy_pass http://localhost:8002;
    }

}

2 前端node配置

需要在config目录下的index.js文件中host: 'localhost'改为host: '0.0.0.0',(这一步是为了解决访问前端的问题)

参考vue 如何设置开发环境可用局域网地址访问 - 知乎

3 前端中配置的访问后端的baseapi配置

需要在config目录下的dev.env.js文件中将BASE_API:http://localhost:9001/改为

BASE_API: '"http://DBdeMacBook-Air.local:9001/"',（这个9001是配置反向代理后端的nginx监控的端口号）

(这一步是为了解决访问后端的问题)

//关于 BASE_API: '"http://DBdeMacBook-Air.local:9001/"',

//一般情况下是 //http://localhost:9001/ 其中9001是本机nginx监控的端口号 就是配置反向代理后端的nginx监控的端口号

//我的这台mac在局域网上的名称就叫 DBdeMacBook-Air.local (在设置-共享 里面可以查看这个名字).

//为了本机和局域网能同时访问,这里用了DBdeMacBook-Air.local而不是用localhost(这一步是为了解决访问后端的问题)