CODEWITHSUNDEEP
node.jsreactjsdockerdocker-compose
eriel marimon
eriel marimon

Reputation: 1380

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

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

Upvotes: 6

Views: 5019

Answers (3)

kodek-sleuth
kodek-sleuth

Reputation: 201

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

Upvotes: 0

Leonard Capacete
Leonard Capacete

Reputation: 1188

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.

Upvotes: 5

trust512
trust512

Reputation: 2254

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.

Upvotes: 4

Related Questions