I’m working on a project that involves setting up a multi-container environment using Docker Compose. The setup includes a Next.js application (blueastowel), a Payload CMS backend (payload), and a MongoDB database (mongo). My goal is to have these services communicate with each other within a Docker network.

However, after running docker-compose up, I encounter ECONNREFUSED errors when the blueastowel service attempts to connect to the payload service on port 3001, and similar issues arise for other inter-service communications.

-1  | TypeError: fetch failed
blueastowel-1  |     at node:internal/deps/undici/undici:12618:11
blueastowel-1  |     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
blueastowel-1  |     at async u (/app/.next/server/pages/api/about-us.js:1:605) {
blueastowel-1  |   cause: Error: connect ECONNREFUSED ::1:3001
blueastowel-1  |       at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
blueastowel-1  |       at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:128:17) {
blueastowel-1  |     errno: -111,
blueastowel-1  |     code: 'ECONNREFUSED',
blueastowel-1  |     syscall: 'connect',
blueastowel-1  |     address: '::1',
blueastowel-1  |     port: 3001
blueastowel-1  |   }
blueastowel-1  | }

Here my docker-compose.yml configuration

version: '3.8'

services:
  blueastowel:
    image: sayinmehmet47/client-blueastowel:latest
    ports:
      - '3000:3000'
    environment:
      - NEXT_PUBLIC_PAYLOAD_APP_URL=http://payload:3001
      - PAYLOAD_API_KEY=50ab8231-770c-4fb9-9ec5-e1ce67650270
      - PAYLOAD_API_SLUG=users
      - URL=http://localhost:3000
    networks:
      - app-network
    depends_on:
      - payload

  payload:
    image: sayinmehmet47/payload-cms-app:latest
    ports:
      - '3001:3000'
    depends_on:
      - mongo
    environment:
      - DATABASE_URI=mongodb://mongo/payload-template-blank
      - PAYLOAD_SECRET=YOUR_SECRET_HERE
      - [email protected]
      - SMTP_PASS=xxx
    networks:
      - app-network

  mongo:
    image: mongo:latest
    ports:
      - '27017:27017'
    volumes:
      - data:/data/db
    command: ["--storageEngine=wiredTiger"]
    logging:
      driver: none
    networks:
      - app-network

volumes:
  data:

networks:
  app-network:
    driver: bridge

I’ve ensured that all services are correctly defined, and the app-network network is set up to facilitate communication between containers. Despite this, the connection issues persist.

Has anyone encountered similar issues with Docker Compose and inter-service communication?
Is the environment variable NEXT_PUBLIC_PAYLOAD_APP_URL=http://payload:3001 correctly configured for this purpose?
Are there any additional steps I need to take to ensure proper connectivity between these services in a Docker network?
Any insights or solutions to resolve these connection errors would be greatly appreciated.

After i change the environment in nextapp the app started running but just the images not fetch correctly but the texts comes

    environment:
      - PAYLOAD_APP_URL=http://payload:3000
      - PAYLOAD_API_KEY=50ab8231-770c-4fb9-9ec5-e1ce67650270
      - PAYLOAD_API_SLUG=users
      - URL=http://blueastowel:3000
      - NODE_ENV=production

```
payload:3000/media/W…at%2016.20.20.jpg:1 
 GET http://payload:3000/media/WhatsApp%20Image%202024-04-24%20at%2016.20.20.jpg net::ERR_NAME_NOT_RESOLVED