Docker-compose builds but app does not serve on localhost

Question

Docker newbie here. Docker-compose file builds without any issues but when I try to run my app on localhost:4200, I get a message - localhost didn't send any data on chrome and the server unexpectedly dropped the connection in safari. I am working on MacOs Catalina. Here is my yml file:

version: '3.0' 

services:
  my-portal:

    build: .

    ports:
    - "4200:4200"

    depends_on:
    - backend

  backend: 

   build: ./backend

   ports:
    - "3000:3000"

   environment:

      POSTGRES_HOST: host.docker.internal
      POSTGRES_USER: "postgres"
      POSTGRES_PASSWORD: mypwd

   depends_on:
    -db

  db:
    image: postgres:9.6-alpine

    environment:
      POSTGRES_DB: mydb
      POSTGRES_USER: "postgres"
      POSTGRES_PASSWORD: mypwd
      POSTGRES_HOST: host.docker.internal

    ports:
    - 5432:5432
    restart: always
    volumes:
    - ./docker/db/data:/var/lib/postgresql/data

Log for Angular:

/docker-entrypoint.sh: Configuration complete; ready for start up Log for Node: db connected Log for Postgres: database system is ready to accept connections

Below are my Angular and Node Docker files:

FROM node:latest AS builder
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --prod
EXPOSE 4200
# Stage 2
FROM nginx:alpine
COPY --from=builder /app/dist/*  /usr/share/nginx/html/

Node:

FROM node:12    
WORKDIR /backend    
COPY package*.json ./    
RUN npm install    
COPY . .    
EXPOSE 3000
CMD [ "node", "server.js" ]

When I created Angular image and ran my app on localhost:4200 it worked fine. Please let me know if I am missing anything.

Answer 1

Your Angular container is built FROM nginx, and you use the default Nginx configuration from the Docker Hub nginx image. That listens on port 80, so that's the port number you need to use in use ports: directive:

services:
  quickcoms-portal:
    build: .
    ports:
    - "4200:80" # <-- second port must match nginx image's port
    depends_on:
    - backend

The EXPOSE directive in the first stage is completely ignored and you can delete it. The FROM nginx line causes docker build to basically completely start over from a new base image, so your final image is stock Nginx plus the files you COPY --from=builder.