本地开发如何前后端共用80端口

问题描述：

本地开发如何前后端共用80端口，项目上线后前后端都是用的80端口，然后给前段绑定一个路径，请问在本地开发阶段的时候，如何前后端共用80端口，进行运行测试

答

两种思路

本地测试正常来说指定一个其他端口，可以使用ide调试。
前端代码打包成静态资源，可以直接映射到tomcat下或者放到后端代码ide中进行映射
两个工程无法使用同一端口运行的，正常开发阶段端口都是配置其他的代替。

答

你看起来线上是一个端口，谁知道他怎么部署的
nginx转发也有可能，甚至前端打成静态包丢到后端容器也是有可能的

答

前端和后端在一个服务器中共用一个端口是不可能的，只能通过反向代理等方式，将后端端口代理给前端调用，前端用默认80端口。
nginx参考配置：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /home/ruoyi/projects/ruoyi-ui;
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        
        location /prod-api/{
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8080/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

答

这个后端给你指定80端口，你把前端文件打成dist文件，丢到服务器就行，只要ip地址和端口号一致就能正常访问接口和数据！希望对你有帮助！

答

其实很简单，就是那样跑就行了

答

vue的话在配置文件里配置代理啊
线上地址代理到你本地

答

如果同时前后端开启，会造成端口占用，可以把后端部署到Linux系统，就可以本地测试，或者前端并入后端里面，但是不好搞

答

如果前后端分离的，只能借助nginx这种反向代理工具来实现了，否则肯定是没有办法同时用同一个端口的；前后端是一起的话，那就不存在这个问题了。其实纠结这个没有太大意义，既然是本地开发，那么前后端用不同的端口启动也没有什么问题的。

本地开发如何前后端共用80端口

相关推荐