I can't access my Dockerized React app on localhost:3000

Question

Whenever I go to localhost:3000, I get the following error from Mozilla Firefox:

The connection was reset

The connection to the server was reset while the page was loading.

The site could be temporarily unavailable or too busy. Try again in a few moments.

If you are unable to load any pages, check your computer’s network connection.

If your computer or network is protected by a firewall or proxy, make sure that Firefox is permitted to access the web.

Chrome/Edge tells me this:

This page isn’t working right now

localhost didn’t send any data.

ERR_EMPTY_RESPONSE

Folder structure:

Docker PS:

Port 3000 info after trying to access http://localhost:3000/ once

My frontend Dockerfile:

FROM --platform=$BUILDPLATFORM node:lts AS development

WORKDIR /code
COPY package.json /code/package.json
COPY package-lock.json /code/package-lock.json

RUN npm ci --legacy-peer-deps
COPY . /code

ENV CI=false
ENV PORT=3000

FROM development AS dev-envs
RUN <<EOF
apt-get update
apt-get install -y git
EOF

RUN <<EOF
useradd -s /bin/bash -m vscode
groupadd docker
usermod -aG docker vscode
EOF
# install Docker tools (cli, buildx, compose)
COPY --from=gloursdocker/docker / /

FROM development AS build

RUN ["npm", "run", "build"]

FROM nginx:1.13-alpine

COPY --from=build /code/build /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

My backend Dockerfile:

FROM --platform=$BUILDPLATFORM maven:3.8.6-eclipse-temurin-19 AS builder
WORKDIR /workdir/server
COPY pom.xml /workdir/server/pom.xml
RUN mvn dependency:go-offline

COPY src /workdir/server/src
RUN mvn install clean package -DskipTests

FROM builder AS dev-envs
RUN <<EOF
apt-get update
apt-get install -y --no-install-recommends git
EOF

RUN <<EOF
useradd -s /bin/bash -m vscode
groupadd docker
usermod -aG docker vscode
EOF
# install Docker tools (cli, buildx, compose)
COPY --from=gloursdocker/docker / /
CMD ["mvn", "spring-boot:run"]

FROM builder as prepare-production
RUN mkdir -p target/dependency
WORKDIR /workdir/server/target/dependency
RUN jar -xf ../*.jar

FROM eclipse-temurin:19-jre-focal

EXPOSE 8080
VOLUME /tmp
ARG DEPENDENCY=/workdir/server/target/dependency
COPY --from=prepare-production ${DEPENDENCY}/BOOT-INF/lib /app/lib
COPY --from=prepare-production ${DEPENDENCY}/META-INF /app/META-INF
COPY --from=prepare-production ${DEPENDENCY}/BOOT-INF/classes /app
ENTRYPOINT ["java","-cp","app:app/lib/*","com.issue.tracker.IssueTrackerApplication"]

compose.yaml:

services:

  backend:
    build:
      context: ./tracker
      dockerfile: Dockerfile
    ports:
      - 8080:8080
    environment:
      - POSTGRES_DB=example
    networks:
      - spring-postgres
    depends_on:
      - db

  db:
    image: postgres
    restart: always
    secrets:
      - db-password
    volumes:
      - db-data:/var/lib/postgresql/data
    networks:
      - spring-postgres
    environment:
      - POSTGRES_DB=example
      - POSTGRES_PASSWORD_FILE=/run/secrets/db-password
    expose:
      - 5432

  frontend:
    build:
      context: ./tracker_frontend
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    volumes:
      - /project/node_modules
    networks:
      - react-spring
    depends_on:
      - backend
    expose:
      - 3306
      - 33060

volumes:
  db-data:

secrets:
  db-password:
    file: db/password.txt

networks:
  react-spring:
  spring-postgres:

All my containers are up and running, no errors, nothing like that.

If I stop the frontend container, but keep the backend and DB running, and I manually start the react app from desktop with the usual npm-start, I can use the app normally, the DB and backend containers work perfectly, I think it definitely has to be something with the frontend... But I just can't figure out what it is.

I'm following this guide

Answer 1

Nginx listens on port 80 by default. Not port 3000.

Also, expose in compose doesn't to anything, so remove that.

That should give you

  frontend:
    build:
      context: ./tracker_frontend
      dockerfile: Dockerfile
    ports:
      - 3000:80
    volumes:
      - /project/node_modules
    networks:
      - react-spring
    depends_on:
      - backend

Then you should - hopefully - be able to reach the frontend on http://localhost:3000/.