Docker部署Nginx本地代理时Next.js出现502 Bad Gateway问题求助

问题描述 #

我想在本地用Nginx做代理绕开CORS配置，nginx.conf配置如下：

http {
  
  server {
    listen 0.0.0.0:4000;
    server_name local;

    location / {
      proxy_pass http://host.docker.internal:3001;
    }

    location /api {
      proxy_pass http://host.docker.internal:3000;
    }
  }

}

API（Nest.js）和前端（Next.js）直接运行在WSL2环境（未部署容器）。通过Nginx能正常访问API端点，但前端/路径无法访问，返回Connection refused错误。在Nginx容器内执行curl http://192.168.65.2:3000（API地址）正常，执行curl http://192.168.65.2:3001（前端地址）则连接拒绝。

Nginx日志如下：

2022/09/21 20:39:58 [error] 24#24: *2 connect() failed (111: Connection refused) while connecting to upstream, client: 172.20.0.1, server: local, request: "GET / HTTP/1.1", upstream: "http://192.168.65.2:3001/", host: "localhost:4000"
172.20.0.1 - - [21/Sep/2022:20:39:58 +0000] "GET / HTTP/1.1" 502 559 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36"
2022/09/21 20:40:00 [error] 24#24: *2 connect() failed (111: Connection refused) while connecting to upstream, client: 172.20.0.1, server: local, request: "GET /favicon.ico HTTP/1.1", upstream: "http://192.168.65.2:3001/favicon.ico", host: "localhost:4000", referrer: "http://localhost:4000/"
172.20.0.1 - - [21/Sep/2022:20:40:00 +0000] "GET /favicon.ico HTTP/1.1" 502 559 "http://localhost:4000/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36"
2022/09/21 20:40:02 [error] 24#24: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.20.0.1, server: local, request: "GET / HTTP/1.1", upstream: "http://192.168.65.2:3001/", host: "localhost:4000"
172.20.0.1 - - [21/Sep/2022:20:40:02 +0000] "GET / HTTP/1.1" 502 559 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36"
172.20.0.1 - - [21/Sep/2022:20:40:04 +0000] "GET /favicon.ico HTTP/1.1" 502 559 "http://localhost:4000/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36"
2022/09/21 20:40:04 [error] 24#24: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.20.0.1, server: local, request: "GET /favicon.ico HTTP/1.1", upstream: "http://192.168.65.2:3001/favicon.ico", host: "localhost:4000", referrer: "http://localhost:4000/"

问题原因 #

1. Next.js监听地址限制：默认情况下Next.js只绑定127.0.0.1，仅允许WSL2内部访问，Docker容器属于外部网络，无法连接回环地址上的服务。而API服务可能配置了监听0.0.0.0，所以能被容器访问。
2. host.docker.internal映射问题：在WSL2环境中，该地址可能未正确映射到WSL2的内部IP，或者映射的IP无法访问前端服务。

修复方案 #

1. 修改Next.js监听地址 #

启动Next.js时指定监听所有网络接口：

next dev -H 0.0.0.0 -p 3001

或者在package.json的scripts中固定配置：

"dev": "next dev -H 0.0.0.0 -p 3001"

2. 替换为WSL2实际IP #

在WSL终端执行hostname -I获取WSL2的内部IP（比如172.17.0.2），修改Nginx配置：

http {
  
  server {
    listen 0.0.0.0:4000;
    server_name local;

    location / {
      proxy_pass http://172.17.0.2:3001;
    }

    location /api {
      proxy_pass http://172.17.0.2:3000;
    }
  }

}

注：WSL2的IP可能随重启变化，若需固定IP可手动配置WSL2静态IP。

3. 验证与重启 #

修改配置后重启Nginx容器，在容器内执行curl http://<WSL2_IP>:3001确认能访问前端服务，再通过浏览器访问localhost:4000测试。

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