Docker化React与Spring Boot应用跨容器通信配置咨询

问题根源 #

你遇到的核心问题是：前端请求是从客户端浏览器发起的，而非React容器内部。如果前端配置的是localhost:8080，浏览器会把请求发到客户端自己的机器，而非部署容器的主机；另外如果Spring Boot绑定的是localhost而非0.0.0.0，外部也无法访问后端容器。

解决方案 #

方案一：直接配置前端使用主机IP访问后端（适合需要外部直接访问后端的场景） #

1. 获取部署容器的主机IP：局域网IP（如192.168.1.100）或公网IP。
2. 修改React应用的API基础地址为http://<主机IP>:8080，重新构建前端镜像。
3. 开放主机防火墙的8080端口：
   • Linux系统执行：sudo ufw allow 8080
   • Windows系统在防火墙设置中添加入站规则，允许8080端口的TCP连接。
4. 重启Docker容器，此时浏览器发起的请求会直接指向主机的8080端口，再转发到后端容器。

方案二：用Nginx代理前端请求到后端（推荐生产环境，无需暴露后端端口） #

如果不需要外部直接访问后端，仅需前端与后端容器通信，可通过Nginx反向代理实现：

1. 给前端容器配置Nginx，创建nginx.conf文件：

   server {
     listen 3000;
     root /usr/share/nginx/html;
     index index.html;
   
     # 代理所有/api开头的请求到后端服务
     location /api/ {
       proxy_pass http://app_be:8080/;
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
     }
   
     # 处理React SPA的路由跳转
     location / {
       try_files $uri $uri/ /index.html;
     }
   }
   

2. 修改React代码中的API地址，将http://xxx:8080/api/xxx简化为/api/xxx。
3. 重新构建前端镜像，确保将打包后的React文件和Nginx配置放入镜像中。
4. Docker Compose配置无需修改（后端的端口映射可保留或删除，不影响内部通信），因为Nginx会通过Docker内部网络的服务名app_be直接访问后端容器。

关键检查项：确保Spring Boot绑定正确地址 #

打开Spring Boot的application.properties或application.yml，确认绑定地址为0.0.0.0：

server.address=0.0.0.0
server.port=8080

如果绑定的是localhost，后端容器仅能内部访问，外部（包括主机和其他容器）都无法连接。

内容的提问来源于stack exchange，提问作者Minez97