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

3000. As I said above: when I docker exec into the container, $ curl localhost:3000 returns the proper HTML page (index.html). This should prove that the app is up and running listening to :3000 — eriel marimon
– eriel marimon, Commented May 17, 2018 at 21:44

Leonard Capacete · Accepted Answer · 2018-05-17 22:13:04Z

5

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.

answered May 17, 2018 at 22:13

Leonard Capacete

1,1882 gold badges11 silver badges27 bronze badges

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

Comments

trust512 · Accepted Answer · 2018-05-17 22:12:52Z

4

The problem is your are exposing the app on localhost strictly. You have to modify your package.json to change that:

"start": "http-server -a localhost -p 3000"

into:

"start": "http-server -a 0.0.0.0 -p 3000"

if your contents of package.json differ strongly from that what's above, the important part is the -a option - it has to point to 0.0.0.0 as it means the http-server will listen on all incoming connections.

If you are not sure what to change, just post the essential part of package.json here in your question so we can check it.

answered May 17, 2018 at 22:12

trust512

2,2741 gold badge22 silver badges20 bronze badges

3 Comments

trust512 Over a year ago

Ah you were, although I didn't want to remove my answer as I explained the solution in detail and hope the community will find my answer useful ;)

eriel marimon Over a year ago

@LeonardCapacete @trust512 I wish they were both combined in one answer, each has a piece of info the other one is missing. As trust512 said, my server is different so I had to do instead: webpack-dev-server --host 0.0.0.0 --port 3000 . Note that -a 0.0.0.0 -p 3000 wont work for webpack-dev-server

trust512 Over a year ago

You can always accept one (more pts) and upvote the other (less pts but still awarding) ;)

kodek-sleuth · Accepted Answer · 2019-11-11 13:37:27Z

0

I had the same issue when I was using create-react-app but I managed to solve it by not exposing the docker port in the Dockerfile and running the following command docker container run -p ANY_PORT_YOU_WANT:**3000** -d image_name. It so happens that by default react-server runs on PORT 3000 in the docker container and by exposing any other port other than 3000, that connection flow is killed. The start script uses 0.0.0.0 by default. See Issue

answered Nov 11, 2019 at 13:37

kodek-sleuth

2013 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related