CODEWITHSUNDEEP
reactjsdockerdocker-compose
Sumit Vishwakarma
Sumit Vishwakarma

Reputation: 195

React app refuses connection when dockerised

version: "1.0.0"

services:
  ########################################################################################################
  #############################################  VALIDLY #################################################
  ########################################################################################################
  validly-studio:
    build: 
      context: ./studio
      dockerfile: Dockerfile
    volumes:
      - type: bind
        source: ./studio
        target: /app
      - /app/node_modules
    restart: unless-stopped
    ports:
      - 3000:3000
    networks:
      - validly


networks:
  validly:

above is my docker-compose.yml file

FROM node:16.14-alpine

# set working directory
WORKDIR /app

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install 

# add app
COPY . ./

# start app
CMD ["npm", "start"]

this is my Dockerfile. docker builds the react app and it prompts me to goto localhost:3000 where the app is running. But when I goto localhost:3000. I shows connection refused.

Upvotes: 0

Views: 406

Answers (1)

BertC
BertC

Reputation: 2656

In your Dockerfile you copy in folder App everything to app/

And in your docker-compose you map /app to /app/node_modules.

This will not work. Choose 1 of the two, and my instinct (and many error in the past) tell me that you should build everything in Dockerfile, including copying node_modules, and don't touch it in docker-compose.

Dockerfile

Template Dockerfile for React: (this one with NextJS environment, which makes it only more complex)

# Dependencies Container
FROM node:lts-alpine3.12 AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
# Here we create node_modules
COPY package.json ./
COPY package-lock.json ./
RUN npm install -g [email protected] --no-update-notifier
RUN npm --version
RUN npm ci --no-update-notifier

# Rebuild the source code only when needed
FROM node:lts-alpine3.12 AS builder
WORKDIR /app
COPY . .
# Here we copy node_modules from previous intermediate container
COPY --from=deps /app/node_modules ./node_modules
RUN npm install -g [email protected] --no-update-notifier
RUN npm --version
RUN node -v
RUN npm run build --no-update-notifier

# Production Image
FROM node:16-bullseye AS runner
WORKDIR /app

ENV NODE_ENV production

# Here we only copy. No building needed, keeps the image small.
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/package-lock.json ./package-lock.json

RUN addgroup -gid 1001 nodejs
RUN adduser  -uid 1002 nextjs
RUN adduser nextjs nodejs
RUN chown -R nextjs:nodejs /app/.next
USER nextjs

docker-compose.yml

Here a template docker-compose.yml using the above Dockerfile

version: "3.9"

services:
  webshop:
    build:
      context: ./build
      dockerfile: Dockerfile_webshop
    image: mywebshop
    restart: "no"
    container_name: MyWebshop
    command: ["npm", "start"]

As you see, no volumes needed.

Upvotes: 1

Related Questions