skip to Main Content

I have a problem with accessing an angular application deployed within a container.
I have exposed the port in my dockerfile, mapped the port in the docker-compose file but I still can’t access from my web browser (Mozilla).

I can’t find any error message that could guide me.

Can someone check out my files and tells me if there is a problem that I haven’t seen ?

docker-compose.yaml

version: '3'
services:
  frontend:
    build:
      context: .
      dockerfile: srcs/frontend/Dockerfile
    ports:
      - 4200:4200
    volumes:
      - frontend_data:/usr/src/app
    depends_on:
      - backend
    networks:
      - mynetwork
  backend:
    build:
      context: .
      dockerfile: srcs/backend/Dockerfile
    ports:
      - 3000:3000
    volumes:
      - backend_data:/usr/src/app
    depends_on:
      - database
    networks:
      - mynetwork
  database:
    image: mysql:latest
    environment:
      - MYSQL_ROOT_PASSWORD=your_root_password
      - MYSQL_DATABASE=your_database_name
      - MYSQL_USER=your_database_user
      - MYSQL_PASSWORD=your_database_password
    volumes:
      - ./mysql_data:/var/lib/mysql
    networks:
      - mynetwork

networks:
  mynetwork:
    driver: bridge

volumes:
  mysql_data:
  backend_data:
    driver: local
  frontend_data:
    driver: local

Frontend Dockerfile

FROM node:19-alpine

WORKDIR /usr/src/app

RUN npm install -g npm

COPY ./srcs/frontend .

RUN chmod +x /usr/src/app/entrypoint.sh

EXPOSE 4200


ENTRYPOINT [ "/usr/src/app/entrypoint.sh" ]

My entrypoint only contains

#!/bin/sh

npm install && npm run start

When I try to access 127.0.0.1:4200 from my web browser, I have the following error :

The connection was reset

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

Is there something I missed ?

EDIT :
I have to add that I can’t access to the exposed port even if I only deploy the front-end container. And that I can access the app if I deploy it without contenerisation. So the problem is likely coming from my frontend Dockerfile

EDIT 2 :
I can ping the container from another container but not from my host.

Thanks in advance

2

Answers


  1. Chosen as BEST ANSWER

    I found the problem.

    It was that angular deploys itself and is accessible from localhost. But the localhost it was deployed on was the localhost of the container which is different from the localhost of the host.

    The solution was to serve angular on 0.0.0.0 so it is accessible from the host's localhost.


  2. The issue can be npm run start which exposes 127.0.0.1:4200 instead of 0.0.0.0:4200.
    Replace npm install && npm run start with npm install && npm start -- --host 0.0.0.0.

    Note, that ng serve is a development server and should not be used in production. There are better ways to host angular application in production listed in angular docs.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search