Cannot access nodejs app on browser at localhost:4200 (docker run -p 4200:4200 …)

Question

Please I need some help, new to docker; have a feeling it's something minor I missed.

I'm trying to run a nodejs app using a dockerfile and docker-compose; I'm on Ubuntu 17.04 LTS however, eventhough the status shows UP and runnning I can't access the app from localhost:4200

docker-compose.yml
version: '3'

services:
 my-app:
    build:
      context: .
      dockerfile: Dockerfile
    restart: unless-stopped
    volumes:
      - .:/usr/src/app
    ports:
      - "4200:4200"

docker ps

CONTAINER ID        IMAGE                 COMMAND                  CREATED             STATUS              PORTS                     NAMES
e6a99aab4e37        my-app   "ng serve"               10 minutes ago      Up 10 minutes       0.0.0.0:4200->4200/tcp    my-app_1

I ran the following command and got an ip address, I used that ip:port# in browser but app won't show up:

docker inspect --format '{{ .NetworkSettings.IPAddress }}' 'my-app_1'

when I go to localhost:4200 it doesn't work; I also tried: docker run --rm -it -p 4200:4200 my_app_container and it runs and I can see that npm start runs and listens on port 4200 but when I go to browser and type localhost:4200 I get nothing, just: this site can't be reached; ERR_NAME_NOT_RESOLVED

  ubuntu17@ubuntu:~/playground/apps/my_app-ui$ docker images
REPOSITORY            TAG                 IMAGE ID            CREATED             SIZE
my_app   latest              d41d3d77811b        17 minutes ago      1.24GB
nept0                 latest              df93134e2539        21 minutes ago      1.24GB
node                  9                   c888d933885c        5 days ago          676MB
registry              2.6.1               c2a449c9f834        6 months ago        33.2MB
ubuntu17@ubuntu:~/playground/apps/my_app-ui$ docker run -it --rm -p 4200:4200 nept0
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-01-16T15:46:19.502Z                                                          
Hash: 00ec980debaf8e47350d
Time: 12386ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 270 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 549 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 511 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 11.8 MB [initial] [rendered]

webpack: Compiled successfully.

LASTLY: - The weirdest thing is if I don't use docker and just build the app manually by simply running: ng serve or npm serve which looks into package.json -> script section and starts ng serve, then localhost:4200 runs fine so I'm lost at to 1.

Why I can't access localhost:4200 or ipaddress:4200 on browser when running via docker but it works if I build manually outside of docker by just running npm start?

Answer 1

EDIT

https://stackoverflow.com/a/48286174/2663059

Has the solution.

EDIT

First of all . Why you have done this .

#EXPOSE 4200

in Dockerfile. # in front means comment in dockerfile . Use this

 EXPOSE 4200

#EXPOSE 4200 means you have not expose the port .

And next check that container running your node server inside the Docker or not. How can you check is this. docker exec -it nept0 bash or can try

docker exec -it nept0 /bin/bash

Then you can run

curl localhost:4200 or the get api of the node.js if that working fine your node is working fine #EXPOSE 4200 was culprit .

You can read for docker exec here more https://docs.docker.com/engine/reference/commandline/exec/

Let me know if any issue.