Next.js: localhost error

[thebetterjort]

When running running npm run start I don't get errors when run from the directory. I can fetch from my API on port 4000 and return the data as I expect within my next.js app. If I supply the actual IP address, I can get the data, but not when I use localhost or 127.0.0.1.

However, when I use docker-compose (docker) I get ECONNREFUSED.

{ FetchError: request to http://127.0.0.1:4000/state/Dadd3 failed, reason: connect ECONNREFUSED 127.0.0.1:4000

docker-compose.yml

version: '3'
services:
  # client:
  #   build:
  #     context: ./client
  #     args:
  #       - CLIENTPORT=${CLIENTPORT}
  #       - HOST_ENDPOINT=${HOST_ENDPOINT}
  #       - SERVERPORT=${SERVERPORT}
  #   ports:
  #     - "${CLIENTPORT}:3000"
  #   env_file:
  #     - client.env
  #   environment:
  #     - NODE_ENV=production
  #   restart: unless-stopped


  server:
    build:
      context: ./server
      args:
        - SERVERPORT=${SERVERPORT}
    ports:
      - "${SERVERPORT}:${SERVERPORT}"
      - "4000:4000"
    env_file:
      - server.env
    networks:
      - linkednetwork
    environment:
      - NODE_ENV=production
    restart: unless-stopped

  next:
    build:
      context: ./next
      args:
        - CLIENTPORT=${CLIENTPORT}
        - HOST_ENDPOINT=${HOST_ENDPOINT}
        - SERVERPORT=${SERVERPORT}
    ports:
      - "${CLIENTPORT}:${CLIENTPORT}"
      - 3003:3003
    env_file:
      - next.env
    networks:
      - linkednetwork
    environment:
      - NODE_ENV=production
    restart: unless-stopped

networks:
  linkednetwork:

./SERVER Dockerfile

FROM node:latest
# Uncomment these lines if using Docker-Compose.
ARG SERVERPORT
ENV SERVERPORT "${SERVERPORT}"

# Comment ENV lines if using Docker-Compose
# ENV SERVERPORT 3002

RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app/
RUN yarn config set strict-ssl ""
RUN yarn install


COPY . /usr/src/app

EXPOSE ${SERVERPORT}

CMD [ "yarn", "run", "start:server" ]

./Next Dockerfile

FROM node:alpine

ARG CLIENTPORT
ENV CLIENTPORT "${CLIENTPORT}"
ARG HOST_ENDPOINT
ENV HOST_ENDPOINT "$HOST_ENDPOINT"
ARG SERVERPORT
ENV SERVERPORT "$SERVERPORT"


# Create app directory
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
# Get rid of self-sign error
RUN npm config set strict-ssl false
# Install app dependencies
COPY package.json /usr/src/app/
RUN npm install

# Bundle app source
COPY . /usr/src/app

RUN npm run build
EXPOSE ${CLIENTPORT}
EXPOSE 3003

CMD [ "npm", "run", "start" ]

index.js

export default class MyPage extends React.Component {
  static async getInitialProps () {
    // eslint-disable-next-line no-undef
    console.log(process.env.HOST_ENDPOINT + ' ' + ' ' + process.env.STATE)
    const backend_url = 'http://' + process.env.HOST_ENDPOINT + '/state/' + STATE;
    const res = await fetch(backend_url)
    const json = await res.json()
    return { employees: json.employees }
  }

[gkaemmer]

This doesn't really have to do with Next.js I think.

With docker-compose, different containers have separate IPs and hostnames (and therefore are not accessible to each other via 127.0.0.1 or localhost).

The hostname of the service is its name (server) by default, so your HOST_ENDPOINT environment variable should be something like server:4000 instead of 127.0.0.1:4000.

[timneutkens]

Thanks for answering @gkaemmer

[jsdevtom]

@gkaemmer I have just been looking for that information

The hostname of the service is its name (server) by default, so your HOST_ENDPOINT environment variable should be something like server:4000 instead of 127.0.0.1:4000.

for the last 3 hours. Thank you so much!