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