Next.js getStaticProps中Docker前后端容器连接失败问题

核心原因 #

• 浏览器端Axios请求从用户本地机器发起，localhost:8090指向宿主机器的端口映射，因此能正常连通后端容器。
• getStaticProps在Next.js容器内部执行，此时localhost指代容器自身而非宿主机器，所以触发ECONNREFUSED；直接用容器IP出现504，大概率是后端容器的网络配置或服务监听地址存在问题。

具体解决方案 #

1. 用Docker容器名称作为访问地址 #

Docker会为同一自定义网络下的容器提供DNS解析，只需将两个容器加入同一自定义网络，即可通过容器名称直接访问：

• 创建自定义网络：

  docker network create my-app-network
  

• 启动容器时加入该网络：

  # Laravel容器启动示例（假设容器名为laravel-api）
  docker run --network my-app-network --name laravel-api ...
  
  # Next.js容器启动示例
  docker run --network my-app-network ...
  

• 在getStaticProps中修改请求地址：

  export async function getStaticProps() {
    const res = await fetch('http://laravel-api/api/address');
    const data = await res.json();
    return { props: { data } };
  }
  

2. 检查Laravel服务的监听地址 #

确保Laravel服务监听0.0.0.0而非127.0.0.1，否则同一网络内的其他容器无法访问：

• 启动Laravel内置服务器时指定地址：

  php artisan serve --host=0.0.0.0 --port=80
  

• 若用Nginx反向代理Laravel，配置中的proxy_pass需指向Laravel容器的内部端口，且Nginx监听地址设为0.0.0.0。

3. 避免直接使用容器IP #

容器IP为动态分配，重启容器后可能变更，使用容器名称或自定义网络的DNS解析才是可靠方案。

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