docker - I am getting error when I try to dockerize my MERN application

Question

Here is my Dockerfile for React.js with the error I got in terminal:

FROM node:8
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY ./package.json /usr/src/app
RUN npm install

RUN npm build
EXPOSE 3000
CMD ["npm", "run", "start"] 

Error:-

react_1     | 
react_1     | > [email protected] start /usr/src/app
react_1     | > react-scripts start
react_1     | 
react_1     | ? ?wds?: Project is running at http://172.18.0.2/
react_1     | ? ?wds?: webpack output is served from 
react_1     | ? ?wds?: Content not from webpack is served from /usr/src/app/public
react_1     | ? ?wds?: 404s will fallback to /
react_1     | Starting the development server...
react_1     | 
ecom-panther_react_1 exited with code 0

For Node and Express, I got this:

express_1   | (node:30) DeprecationWarning: current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.
express_1   | server is running on port: 5000
express_1   | (node:30) UnhandledPromiseRejectionWarning: MongoNetworkError: failed to connect to server [localhost:27017] on first connect [MongoNetworkError: connect ECONNREFUSED 127.0.0.1:27017]
express_1   |     at Pool.<anonymous> (/usr/src/app/node_modules/mongodb/lib/core/topologies/server.js:438:11)
express_1   |     at emitOne (events.js:116:13)
express_1   |     at Pool.emit (events.js:211:7)
express_1   |     at createConnection (/usr/src/app/node_modules/mongodb/lib/core/connection/pool.js:561:14)
express_1   |     at connect (/usr/src/app/node_modules/mongodb/lib/core/connection/pool.js:994:11)
express_1   |     at makeConnection (/usr/src/app/node_modules/mongodb/lib/core/connection/connect.js:31:7)
express_1   |     at callback (/usr/src/app/node_modules/mongodb/lib/core/connection/connect.js:264:5)
express_1   |     at Socket.err (/usr/src/app/node_modules/mongodb/lib/core/connection/connect.js:294:7)
express_1   |     at Object.onceWrapper (events.js:315:30)
express_1   |     at emitOne (events.js:116:13)
express_1   |     at Socket.emit (events.js:211:7)
express_1   |     at emitErrorNT (internal/streams/destroy.js:73:8)
express_1   |     at _combinedTickCallback (internal/process/next_tick.js:139:11)
express_1   |     at process._tickCallback (internal/process/next_tick.js:181:9)
express_1   | (node:30) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
express_1   | (node:30) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Docker file for backend:-

FROM node:8
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app
RUN npm install
COPY . /usr/src/app
EXPOSE 5000
CMD ["npm","start"] 

Here is my docker-compose.yml file

version:  '3' # specify docker-compose version

# Define the service/container to be run
services:
  react: #name of first service
    build: client #specify the directory of docker file
    ports:
    - "3000:3000" #specify port mapping

  express: #name of second service
    build: server #specify the directory of docker file
    ports:
    - "5000:5000" #specify port mapping
    links:
    - database #link this service to the database service

  database: #name of third service
    image: mongo #specify image to build contasiner flow 
    ports:
    - "27017:27017" #specify port mapping

How I can run frontend at browser and is there any easy approach to do this in a better way ?

Answer 1

Error 1:

Add stdin_open: true to your react service, like:

...
services:
  react: #name of first service
    build: client #specify the directory of docker file
    stdin_open: true
    ports:
    - "3000:3000" #specify port mapping
...

You might need to rebuild or clean cached so "docker-compose up --build" or "docker-compose build --no-cache" then "docker-compose up"

Error 2:

In your database connections line in your index.js file or whatever you named should have :

mongodb://database:27017/  

where "database" is your named MongoDB service. You can use your container IP address too with docker inspect <container> and use the IP the see there too. Ideally you want to have a ENV in your Dockerfile or docker-compose.yml:

ENV MONGO_URL mongodb://database:27017/