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
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.
The issue can be
npm run start
which exposes127.0.0.1:4200
instead of0.0.0.0:4200
.Replace
npm install && npm run start
withnpm 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.