Dockerizing a React App: The app starts inside the container, but it not accessible from the exposed port

Question

This is a question specifically for the tutorial at: http://mherman.org/blog/2017/12/07/dockerizing-a-react-app/#.Wv3u23WUthF by Michael Herman

Problem: The app starts inside the container, but it is not accessible from the port I just exposed -p 3000:3000. When Browse to localhost:3000 get a This site can’t be reached error

docker-compose.yaml

version: '3.5'

services:

  sample-app:
    container_name: sample-app
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/usr/src/app'
      - '/usr/src/app/node_modules'
    ports:
      - '3000:3000'
    environment:
      - NODE_ENV=development

Dockerfile

# base image
FROM node:9.6.1

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install --silent
# RUN npm install [email protected] -g --silent # Uncomment to silent logs
RUN npm install [email protected] -g 

# start app
CMD ["npm", "start"]

#CMD tail -f /usr/src/app/README.md


###################################
# To Run sample app:
# docker run -it -v ${PWD}:/usr/src/app -v /usr/src/app/node_modules -p 3000:3000 --rm sample-app

Docker logs : https://docs.google.com/document/d/14LRCgjMLAkmdMiuedxAW2GWUAtxmWeJQCNQB2ezdYXs/edit

After running either the compose or single container. It shows successful startup, but nothing thereafter.

When I docker exec into the container, $ curl localhost:3000 returns the proper index.html page

I start up the container with either:

$ docker run -it -v ${PWD}:/usr/src/app -v /usr/src/app/node_modules -p 3000:3000 --rm sample-app

<- (The image sample-app exists )

or

$ docker-compose up

Answer 1

After eliminating all other factors I assume that your application is listening on localhost. Localhost is scoped to the container itself. Therefore to be able to connect to it, you would have to be inside the container.

To fix this, you need to get your application to listen on 0.0.0.0 instead.