Docker Nginx环境下Next.js调用Strapi接口报ECONNREFUSED错误如何解决

问题根源分析 #

• Postman请求跑在宿主机上，你本地hosts已经将back.development指向127.0.0.1，宿主机80端口映射到Nginx容器，所以请求正常。
• Next.js的服务端请求（getServerSideProps、服务端组件等场景）跑在frontend容器内部，容器内的127.0.0.1指向容器本身而非宿主机，且容器默认无法识别back.development域名，也没有加入你定义的自定义网络，因此无法找到Strapi服务。
• 之前参考方案返回404是因为请求Nginx时未携带正确的Host头，Nginx无法匹配到对应back.development的server规则。

修复步骤 #

1. 修正Docker Compose网络配置 #

你定义了wellington-network但所有服务都未加入该网络，需要在每个服务配置下添加网络归属，修改后的docker-compose.yml示例：

version: "3"
services:
  # NGINX reverse proxy
  nginx:
    image: nginx:1.17.10
    container_name: nginx_reverse_proxy
    restart: unless-stopped
    depends_on:
      - frontend
      - strapi
    volumes:
      - ./reverse_proxy/nginx.conf:/etc/nginx/nginx.conf
    ports:
      - 80:80
    networks:
      - wellington-network

  # NextJS Front end
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: frontend
    restart: unless-stopped
    volumes:
      - ./frontend:/srv/frontend
      - /srv/frontend/node_modules
      - /srv/frontend/.next
    ports:
      - 3000:3000
    networks:
      - wellington-network

  # Strapi CMS
  strapi:
    image: strapi/strapi
    container_name: strapi
    restart: unless-stopped
    env_file: .env
    environment:
      DATABASE_CLIENT: ${DATABASE_CLIENT}
      DATABASE_NAME: ${DATABASE_NAME}
      DATABASE_HOST: ${DATABASE_HOST}
      DATABASE_PORT: ${DATABASE_PORT}
      DATABASE_USERNAME: ${DATABASE_USERNAME}
      DATABASE_PASSWORD: ${DATABASE_PASSWORD}
    volumes:
      - ./app:/srv/app
    ports:
      - 1337:1337
    networks:
      - wellington-network

  # MongoDB database
  db:
    image: mongo
    container_name: db
    restart: unless-stopped
    env_file: .env
    environment:
      MONGO_INITDB_ROOT_USERNAME: ${MONGO_INITDB_ROOT_USERNAME}
      MONGO_INITDB_ROOT_PASSWORD: ${MONGO_INITDB_ROOT_PASSWORD}
    volumes:
      - strapidata:/data/db
    ports:
      - 27017:27017
    networks:
      - wellington-network
networks:
  wellington-network:
    driver: bridge
volumes:
  strapidata:

修改后执行docker-compose up -d --force-recreate重启容器生效。

2. 配置Next.js请求地址 #

根据请求场景选择对应配置：

客户端侧请求（浏览器端执行：useEffect、点击事件等）

继续使用http://back.development作为请求前缀即可，前提是你本地宿主机的hosts文件已添加如下规则：

127.0.0.1 back.development front.development

服务端侧请求（容器内执行：getServerSideProps、服务端组件、getStaticProps等）

二选一即可：

• 方案1（推荐）：直接调用Strapi服务
  内部服务互调不需要走Nginx，直接用Docker服务名作为地址前缀：http://strapi:1337，无需额外配置。
• 方案2：走Nginx反向代理
  请求时携带Host头让Nginx匹配规则：

  // 示例fetch请求
  fetch('http://nginx/articles/some-article-title', {
    headers: {
      'Host': 'back.development'
    }
  })
  

可选优化：容器内直接识别自定义域名 #

如果希望服务端请求也可以直接使用http://back.development地址，无需区分场景，给frontend服务添加extra_hosts配置即可：

frontend:
  # 原有配置不变
  extra_hosts:
    - "back.development:nginx"
    - "front.development:nginx"
  networks:
    - wellington-network

重启容器后生效。

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