Problem connecting to angular app in docker

Question

I want to run an angular app in a docker container, in development mode with the possibility that when I make changes they are auto-generated on the local web. I've tried various configurations and I can't connect to port 4200.

Dockerfile:

# Dockerfile
FROM node:14.17.1-alpine

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json ./
COPY package-lock.json ./

# Instalamos angular cli en nuestra imágen
RUN npm install -g @angular/cli && npm cache clean

EXPOSE 4200

CMD ["npm", "start"]

Compose file:

 frontend:
build: ./frontend
ports:
  - "4200:4200"
container_name: frontend
volumes:
  - "./frontend:/app"
  - "/app/node_modules"
  - "/etc/localtime:/etc/localtime:ro"
environment:
  - CHOKIDAR_USEPOLLING=true

When I run the docker container it starts fine. But when I try to access from the browser to localhost:4200, I get the error "This site cannot be reached"

Please show your docker run command. Do you have a port mapping like this -p 4200:4200 defined in your run command? — Mushroomator
– Mushroomator, Commented Nov 16, 2022 at 22:03
I believe the EXPOSE port syntax is: EXPOSE 4200:4200 to bind 4200 on the host — Brandon Taylor
– Brandon Taylor, Commented Nov 16, 2022 at 22:05
Try using de docker container ip: docker_ip:4200 to know the ip you can execute that: sudo docker container inspect container_name_or_ID — Carles Ramos
– Carles Ramos, Commented Nov 16, 2022 at 22:31
@BrandonTaylor No. You can't bind a port from the EXPOSE statement. — Hans Kilian
– Hans Kilian, Commented Nov 16, 2022 at 22:31

Hans Kilian · Accepted Answer · 2022-11-16 22:40:11Z

3

Your Angular app is probably bound to localhost by default, meaning that it'll only accept connections from inside the container.

In your package.json file, the start script is probably defined as ng serve. It needs to be ng serve --host 0.0.0.0. That will allow the app to accept connections from outside the container.

If the start script isn't ng serve, then please edit your post and add the contents of your package.json file to it.

answered Nov 16, 2022 at 22:40

Hans Kilian

26.5k4 gold badges38 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem connecting to angular app in docker

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related