Problem when I dockerize my Angular application

Question

My problem is that I cna't see my application on the broswer (http://localhost:1999/), My docker command are this: docker-compose build docker-compose up

I'm doing something wrong? Why can't I see my application running? I tried to add the CMD line with ng -serve but it give me the error that ng isn't istalled, any other suggest?

My docker console:

/docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
/docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
/docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
10-listen-on-ipv6-by-default.sh: info: Getting the checksum of /etc/nginx/conf.d/default.conf
10-listen-on-ipv6-by-default.sh: info: Enabled listen on IPv6 in /etc/nginx/conf.d/default.conf
/docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
/docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
/docker-entrypoint.sh: Configuration complete; ready for start up
2022/08/26 13:47:26 [notice] 1#1: using the "epoll" event method
2022/08/26 13:47:26 [notice] 1#1: nginx/1.23.1
2022/08/26 13:47:26 [notice] 1#1: built by gcc 11.2.1 20220219 (Alpine 11.2.1_git20220219) 
2022/08/26 13:47:26 [notice] 1#1: OS: Linux 5.10.16.3-microsoft-standard-WSL2
2022/08/26 13:47:26 [notice] 1#1: getrlimit(RLIMIT_NOFILE): 1048576:1048576
2022/08/26 13:47:26 [notice] 1#1: start worker processes
2022/08/26 13:47:26 [notice] 1#1: start worker process 32
2022/08/26 13:47:26 [notice] 1#1: start worker process 33
2022/08/26 13:47:26 [notice] 1#1: start worker process 34
2022/08/26 13:47:26 [notice] 1#1: start worker process 35
2022/08/26 13:47:26 [notice] 1#1: start worker process 36
2022/08/26 13:47:26 [notice] 1#1: start worker process 37
2022/08/26 13:47:26 [notice] 1#1: start worker process 38
2022/08/26 13:47:26 [notice] 1#1: start worker process 39

My Dockerfile:

FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --prod
EXPOSE 1999
#stage 2
FROM nginx:alpine
COPY --from=node /app/dist /usr/share/nginx/html

My docker-compose:

version: "3.8" 
services:
  db:
    image: mongo:latest
    ports:
      - 27017:27017
    environment:
      SPRING_DATA_MONGODB_URI: mongodb://host.docker.internal:27017
      MONGO_INITDB_ROOT_USERNAME: user
      MONGO_INITDB_ROOT_PASSWORD: password
    volumes:
      - ./mongo-init.js:/docker-entrypoint-initdb.d/mongo-init.js:ro
  web:
    build: ./PersonBE/src/main/resources/person-fe
    ports:
      - 1999:1999
  api:
    build: ./PersonBE
    ports:
      - 8090:8090
volumes:
  person:

My content in dist:

My browser:

Answer 1

You are using a multistage build. The port exposed is the nginx port (80) not the node port 1999 (the line EXPOSE 1999 is useless here)

Try:

[...]
  web:
    build: ./PersonBE/src/main/resources/person-fe
    ports:
      - 80:80
[...]

Next open: http://localhost

Also make sure that the /app/dist/person-app folder is not empty, usally the app is in /app/dist folder. If this is the case try:

FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --prod
EXPOSE 1999
#stage 2
FROM nginx:alpine
COPY --from=node /app/dist /usr/share/nginx/html