如何解决Next.js SSR Docker容器与主机Nginx的通信问题？

核心原因 #

Next.js SSR代码在app容器内运行时，请求http://api.myapp.localhost会失败——因为该域名仅在宿主机的hosts文件中被映射到127.0.0.1，而容器内部的DNS无法解析这个域名，默认指向容器自身的127.0.0.1，导致连接被拒绝。

而客户端请求正常是因为浏览器在宿主机环境运行，能通过宿主机hosts解析域名并转发到Nginx端口。

方案一：通过内部网络+Host头访问（推荐） #

利用Docker Compose内部网络的服务名解析能力，让app容器直接请求nginx服务，并通过Host头匹配Nginx的server_name规则，实现API路由。

步骤1：配置环境变量（可选但推荐） #

在docker-compose.yaml的app服务中添加环境变量，方便灵活切换配置：

app:
  container_name: app
  build:
    context: ./app
    target: dev
  volumes:
    - ./app:/app
  networks:
    - mynetwork
  depends_on:
    - api
  environment:
    - API_INTERNAL_HOST=http://nginx  # Docker内部Nginx服务地址
    - API_PUBLIC_HOST=api.myapp.localhost  # Nginx配置的API域名

步骤2：修改Next.js的fetch逻辑 #

在app/layout.tsx的fetch请求中，使用内部地址并携带Host头：

export default async function Layout({children}: DefaultProps): Promise<ReactNode> {
    const apiInternalHost = process.env.API_INTERNAL_HOST || 'http://nginx';
    const apiPublicHost = process.env.API_PUBLIC_HOST || 'api.myapp.localhost';

    const session = await fetch(`${apiInternalHost}/your-api-path`, {
        headers: {
            'Host': apiPublicHost // 关键：让Nginx识别到对应的server块
        }
    }).then(res => res.json());

    // ... rest of your code
}

方案二：修改容器Hosts映射 #

直接在app容器的hosts文件中添加域名映射，让api.myapp.localhost指向nginx容器：

app:
  container_name: app
  build:
    context: ./app
    target: dev
  volumes:
    - ./app:/app
  networks:
    - mynetwork
  depends_on:
    - api
  extra_hosts:
    - "api.myapp.localhost:nginx"  # 将域名映射到Nginx服务

修改后无需调整代码，保持原fetch请求即可——容器内部会把api.myapp.localhost解析为nginx容器的IP。

验证方法 #

重启Docker Compose服务：

docker-compose down && docker-compose up -d

访问页面后，检查SSR渲染的内容是否能正常获取API数据，确认错误消失。

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