Nextjs Docker container Fetch Failed

[shawnlikescode]

Summary

Hi. I'm using an issue where when I build my next app with docker compose to run it alongside my backend my api fetches fail.

I know the connection to the backend is good. I'm also connected to a websocket on the same backend and it works just fine.

Everything works when I do npm run build and do npm start in terminal with just the backend running in the container.

I want to call http://localhost:8080/games and http://localhost:8080/leaderboard. However, I get the following error:

fe-1  | TypeError: fetch failed
fe-1  |     at node:internal/deps/undici/undici:13178:13
fe-1  |     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
fe-1  |     at async o (/app/.next/server/app/games/page.js:30:8639)
fe-1  |     at async d (/app/.next/server/app/games/page.js:30:8417) {
fe-1  |   [cause]: AggregateError [ECONNREFUSED]:
fe-1  |       at internalConnectMultiple (node:net:1118:18)
fe-1  |       at afterConnectMultiple (node:net:1685:7)
fe-1  |       at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
fe-1  |     code: 'ECONNREFUSED',
fe-1  |     [errors]: [ [Error], [Error] ]
fe-1  |   }
fe-1  | }

I think the following are all the relevant files:

api.ts

The baseURL is definitely http://localhost:8080. I logged it out.

import { LobbyGame, LeaderboardEntry } from "@/types";

const baseURL = `http://${process.env.NEXT_PUBLIC_API_BASE}`;
console.log(baseURL);

export const getGames = async (): Promise<LobbyGame[]> => {
  try {
    const response = await fetch(`${baseURL}/games`, {
      cache: "no-store",
    });

    console.log(response);

    if (!response.ok) {
      throw new Error(`Error: ${response.statusText}`);
    }
    return response.json();
  } catch (error) {
    console.log(error);
    return [];
  }
};

export const getLeaderboard = async (): Promise<LeaderboardEntry[]> => {
  try {
    const response = await fetch(`${baseURL}/leaderboard`, {
      cache: "no-store",
    });

    console.log(response);

    if (!response.ok) {
      throw new Error(`Error: ${response.statusText}`);
    }

    return response.json();
  } catch (error) {
    console.log(error);
    return [];
  }
};

app/leaderboard/page.tsx

import { LeaderboardEntry } from "@/types";
import { getLeaderboard } from "../../lib/api";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";

export const dynamic = 'force-dynamic'

export default async function Leaderboard() {
  const leaderboard: LeaderboardEntry[] = await getLeaderboard();

  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-8">
      <Card className="w-full p-6 shadow-lg">
        <CardHeader>
          <h1 className="text-4xl font-bold text-center mb-6">Leaderboard</h1>
        </CardHeader>
        <CardContent>
          {leaderboard.length > 0 ? (
            <Table className="w-full">
              <TableHeader>
                <TableRow>
                  <TableHead>Player Name</TableHead>
                  <TableHead>Accuracy</TableHead>
                  <TableHead>Avg Time (ms)</TableHead>
                  <TableHead>Correct Questions</TableHead>
                  <TableHead>Total Questions</TableHead>
                  <TableHead>Last Update</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {leaderboard.map((entry) => (
                  <TableRow key={entry.player_name}>
                    <TableCell>{entry.player_name}</TableCell>
                    <TableCell>{(entry.accuracy * 100).toFixed(2)}%</TableCell>
                    <TableCell>{entry.average_milliseconds}</TableCell>
                    <TableCell>{entry.correct_questions}</TableCell>
                    <TableCell>{entry.total_questions}</TableCell>
                    <TableCell>{new Date(entry.last_update).toLocaleDateString()}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          ) : (
            <p className="text-center text-gray-500">No leaderboard entries found</p>
          )}
        </CardContent>
      </Card>
    </div>
  );
}

app/games/page.tsx

import GamesList from "@/components/games-list";
import { getGames } from "@/lib/api";

export const dynamic = "force-dynamic";

export default async function Games() {
  const games = await getGames();
  return (
    <div className="container mx-auto">
      <GamesList games={games} />
    </div>
  );
}

docker-compose.yml

version: '3.9'

services:
  be:
    image: be
    ports:
      - "8080:8080"
    networks:
      - app-network

  fe:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - NEXT_PUBLIC_API_BASE=127.0.0.1:8080  # I have tried a couple other things here. localhost:8080 & be:8080 neither worked
    depends_on:
      - be
    networks:
      - app-network

networks:
  app-network:

Dockerfile... I've also tried the Vercel provided Dockerfile from here and the only difference is the error changes slightly.

FROM node:lts-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

ENV PORT=3000

EXPOSE 3000

ENV HOSTNAME "0.0.0.0"

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

Error with Vercel Dockerfile:

fe-1  | TypeError: fetch failed
fe-1  |     at node:internal/deps/undici/undici:12618:11
fe-1  |     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
fe-1  |     at async o (/app/.next/server/app/games/page.js:30:8639)
fe-1  |     at async d (/app/.next/server/app/games/page.js:30:8417) {
fe-1  |   cause: Error: connect ECONNREFUSED ::1:8080
fe-1  |       at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
fe-1  |       at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:128:17) {
fe-1  |     errno: -111,
fe-1  |     code: 'ECONNREFUSED',
fe-1  |     syscall: 'connect',
fe-1  |     address: '::1',
fe-1  |     port: 8080
fe-1  |   }
fe-1  | }

Additional information

No response

Example

No response

[shawnlikescode]

Fixed it. Closing.

[ungerkev]

How did you fix this issue?

[shawnlikescode]

My issue was just me being stupid.

I was trying to work with both the backend api and a websocket so I confused myself by thinking api and websocket would use localhost:8080.

The websocket needs to use localhost:8080 but you have to make fetches to the docker network.

version: '3.9'

services:
  be:
    image: be
    ports:
      - "8080:8080"

  fe:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    environment:
      - API_BASE=be:8080
    depends_on:
      - be

Make fetches to be:8080. Only set in the docker-compose. This make sure that nextjs can hit docker internal network.

Let me know if that helps or not.

[ungerkev]

Thank you for the reply! I set up my docker environment correctly, however I still got the fetch error inside server components.

I was able to fix the fetch error when using different env variables for client and server. This is how I solved this error:

const serviceUrl = `${isClientSide() ? process.env.NEXT_PUBLIC_BACKEND_URL : process.env.BACKEND_URL}/service`;

xiorClient.get(`${serviceUrl}/some_endpoint`);

[shawnlikescode]

Using different env variables is the solution I was trying to suggest as well.

[awmxr]

In client components, you should use http://localhost:8080, but in server components, you need to use http://be:8080. This is because, on the server side, the connection is made between services within the Docker network, where be refers to the backend service.