I am new to Docker but here's what I want to do. Have a create-react-app and node API server
Both are different folders "client" and "server".
I have Dockerfiles for both and docker-compose.yml at the root of project.
Now when I run docker-compose up and try to reach API server from React I get CONNECTION REFUSED error.
Can anyone help me on this ? React App is running on 3000 & API Server is running on 9040
Here are the DockerFiles and docker-compose files
Dockerfile of React
FROM node:13.12.0-alpine
WORKDIR /app
COPY package*.json ./
RUN yarn install
COPY . .
EXPOSE 8080
EXPOSE 3000
CMD ["yarn", "run", "frontend"]
Dockerfile of Node/Express API
FROM node:12
WORKDIR /app
COPY package*.json ./
RUN yarn install
COPY . .
EXPOSE 9040
CMD ["yarn", "run", "backend"]
Docker Compose file
version: "3"
services:
wt-client:
image: sriram2207/wt-client
stdin_open: true
ports:
- "3000:3000"
- "8080:8080"
networks:
- wt-app
wt-server:
image: sriram2207/wt-server
ports:
- "9040:9040"
networks:
- wt-app
networks:
wt-app:
driver: bridge
All I want to do is run both containers with one single command
Instead of connecting via localhost:9040, try connecting via wt-server:9040
Related
I try to run both React and Nest apps with docker-compose up, but it fails while running the server.
However, there is not problems when starting 2 containers separately.
The error is:
server | Unknown command: "start:dev"
server |
server | Did you mean one of these?
server | npm run start:dev # run the "start:dev" package script
docker-compose.yml:
version: "3"
services:
client:
container_name: client
build:
context: ./client
dockerfile: Dockerfile
image: client
ports:
- "3000:3000"
volumes:
- ./client:/app
server:
container_name: server
build:
context: ./server
dockerfile: Dockerfile
image: server
ports:
- "8080:8080"
volumes:
- ./server:/app
Server Dockerfile:
FROM node:16
WORKDIR ./app
COPY package.json ./
RUN npm install
COPY . .
ENV PORT=8080
EXPOSE 8080
CMD ["npm", "run", "start:dev"]
Client Dockerfile:
FROM node:16
WORKDIR ./app
COPY package.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
The issue is with docker-compose.yml, but I can't see if it's connected to nest or docker.
Thank you for the help in advance.
My goal is to create docker dev environment for a full-stack app: React, NodeJS and MongoDb (with hot reloading). My current dev environment works, but I noticed that "docker compose up" will only work, if the node_modules are installed on my local machine - it otherwise returns an error that nodemon is not installed, or react-scripts not found. It seems like docker is looking for the node files in my local machine, but it should be installing them in the container during the compose, right?
docker-compose.yml
version: '3.8'
services:
server:
build: ./server
container_name: server_backend
ports:
- '7000:7000'
volumes:
- ./server:/app
client:
build: ./client
container_name: client_frontend
ports:
- '3000:3000'
volumes:
- ./client:/app
stdin_open: true
tty: true
Dockerfile (backend server)
FROM node:16-bullseye-slim
WORKDIR /app
COPY package.json .
COPY package-lock.json .
RUN npm install
COPY . .
EXPOSE 7000
CMD ["node", "index.js"]
Dockerfile (frontend)
FROM node:16-bullseye-slim
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
app architecture
- MyApp
-- client
-- server
Can it be that you are copying the whole directory with the node_modules when you execute the COPY . . command, try and either specifiy the directory to copy or add a .dockerignore.
Found this in the documentation, https://docs.docker.com/language/nodejs/build-images/#create-a-dockerignore-file
I have a nodejs / express / react app running locally that starts a node server at :3001 and a react app at :3000 which can make requests to the express API.
I then made a /client/Dockerfile and a /server/Dockerfile, and a /docker-compose.yml which is capable of running my app locally without issue.
I now want to deploy this to GCP's Cloud Run, but GCP does not allow multiple docker images / docker-compose (AFAIK - it only has a single field for "Dockerfile"), so I am trying to reconfigure things to work with a single Docker file.
Here's what I had for the working, local instance:
client/Dockerfile
FROM node:lts-slim
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
EXPOSE 3000
CMD [ "npm", "start" ]
server/Dockerfile
FROM node:lts-slim
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
EXPOSE 3001
# You can change this
CMD [ "npm", "run", "dev" ]
docker-compose.yml
version: "3"
services:
client:
container_name: gcp-cloudrun-client
build:
context: ./client
dockerfile: Dockerfile
image: mheavers/gcp-cloudrun-client
ports:
- "3000:3000"
volumes:
- ./client:/usr/src/app
server:
container_name: gcp-cloudrun-server
build:
context: ./server
dockerfile: Dockerfile
image: mheavers/gcp-cloudrun-server
ports:
- "3001:3001"
volumes:
- ./server:/usr/src/app
How do I combine all this into a single Dockerfile and do away with docker-compose?
this was my final docker file to replace docker-compose:
FROM node:lts-slim AS client
WORKDIR /usr/src/app
COPY client/ ./client/
RUN cd client && npm install && npm run build
FROM node:lts-slim AS server
WORKDIR /root/
COPY --from=client /usr/src/app/client/build ./client/build
COPY server/package*.json ./server/
RUN cd server && npm install
COPY server/index.js ./server/
EXPOSE 80
CMD ["node", "./server/index.js"]
Hi Dockerized a reactjs and expressjs project, everything is worked good when i have written separate docker compose file.
But now i written one compose file
docker-compose-all-dev.yml file
version: '3.7'
services:
client:
container_name: react-dev
build:
context: ./client
dockerfile: Dockerfile.react-dev
ports:
- 3000:3000
server:
container_name: server-dev
build:
context: ./server
dockerfile: Dockerfile.server-dev
ports:
- 5000:5000
Now it's running client server only, why not running backend server?
But it works when i run it in two different files like this.
docker-compose-client.yml file:
version: '3.7'
services:
client:
container_name: react-dev
build:
context: ./client
dockerfile: Dockerfile.react-dev
ports:
- 3000:3000
and docker-compose-server.yml file
version: '3.7'
services:
server:
container_name: server-dev
build:
context: ./server
dockerfile: Dockerfile.server-dev
ports:
- 5000:5000
Can anyone tell me what is the possible issue of not running the both app when i run in one compose file? how can i solve it?
For your reference.
My Dockerfile-server-dev file
FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD [ "node", "server.js" ]
and my Dockerfile.react-dev file
FROM node:14.1-alpine as build
WORKDIR /app
COPY . /app
ENV PATH /app/node_modules/.bin:$PATH
RUN yarn config delete proxy
Run npm config rm proxy
RUN npm config rm https-proxy
RUN npm install
RUN npm start
I dont know what is the issue actually running two development server in one docker-compose file
There are at least few problems, your Dockerfile.react-dev is missing entrypoint and CMD parts, you should not start your server with RUN clause. Instead use Entrypoint and possibly CMD for starting it. Another problem is, that you are exposing different port on Dockerfile-server-dev than on your compose file.
solved the issue.
I just add this line: CMD ["npm", "start"] and removed npm start now it is working
I am trying to run Express server and React app trough docker containers.
The Express server runs correctly at the given address (the one on Kitematic GUI).
However I am unable to open the React application trough the given address, giving me site cannot be reached.
Running Windows 10 Home with Docker Toolbox.
React app dockerfile:
FROM node:10
# Set the working directory to /client
WORKDIR /frontend
# copy package.json into the container at /client
COPY package*.json ./
# install dependencies
RUN npm install
# Copy the current directory contents into the container at /client
COPY . .
# Make port 3001 available to the world outside this container
EXPOSE 3001
# Run the app when the container launches
CMD ["npm", "run", "start"]
Node/Express dockerfile:
# Use a lighter version of Node as a parent image
FROM node:10
# Set the working directory to /api
WORKDIR /backend
# copy package.json into the container at /api
COPY package*.json ./
# install dependencies
RUN npm install
# Copy the current directory contents into the container at /api
COPY . .
# Make port 3000 available to the world outside this container
EXPOSE 3000
# Run the app when the container launches
CMD ["npm", "start"]
Docker compose file:
version: '3'
services:
client:
container_name: hydrahr-client
build: .\frontend
restart: always
environment:
- REACT_APP_BASEURL=${REACT_APP_BASEURL}
expose:
- ${REACT_PORT}
ports:
- "3001:3001"
links:
- api
api:
container_name: hydrahr-api
build: ./backend
restart: always
expose:
- ${SERVER_PORT}
environment: [
'API_HOST=${API_HOST}',
'MONGO_DB=${MONGO_DB}',
'JWT_KEY=${JWT_KEY}',
'JWT_HOURS_DURATION=${JWT_HOURS_DURATION}',
'IMAP_EMAIL_LISTENER=${IMAP_EMAIL_LISTENER}',
'IMAP_USER=${IMAP_USER}',
'IMAP_PASSWORD=${IMAP_PASSWORD}',
'IMAP_HOST=${IMAP_HOST}',
'IMAP_PORT=${IMAP_PORT}',
'IMAP_TLS=${IMAP_TLS}',
'SMTP_EMAIL=${SMTP_EMAIL}',
'SMTP_PASSWORD=${SMTP_PASSWORD}',
'SMTP_HOST=${SMTP_HOST}',
'SMTP_PORT=${SMTP_PORT}',
'SMTP_TLS=${SMTP_TLS}',
'DEFAULT_SYSTEM_PASSWORD=${DEFAULT_SYSTEM_PASSWORD}',
'DEFAULT_SYSTEM_EMAIL=${DEFAULT_SYSTEM_EMAIL}',
'DEFAULT_SYSTEM_NAME=${DEFAULT_SYSTEM_NAME}',
'SERVER_PORT=${SERVER_PORT}'
]
ports:
- "3000:3000"
depends_on:
- mongo
mongo:
image: mongo
restart: always
container_name: mongo
ports:
- "27017:27017"
Running with docker-compose up -d
UPDATE 1:
I am able to run the react application using docker run -p 3000:3000 hydra-client-test after building that image.
Since running the container with -p 3000:3000 works, the client is actually probably listening on port 3000. Try setting:
ports:
- 3001:3000