Docker container works from Dockerfile but get next: not found from docker-compose container

Question

I am having an issue with my docker-compose configuration file. My goal is to run a Next.js app with a docker-compose file and enable hot reload.

Running the Next.js app from its Dockerfile works but hot reload does not work. Running the Next.js app from the docker-compose file triggers an error: /bin/sh: next: not found and I was not able to figure what's wrong...

Dockerfile: (taken from Next.js' documentation website)

[Notice it's a multistage build however, I am only referencing the builder stage in the docker-compose file.]

# Install dependencies only when needed
FROM node:18-alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install # --frozen-lockfile

# Rebuild the source code only when needed
FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
ENV NEXT_TELEMETRY_DISABLED 1

RUN yarn build

# If using npm comment out above and use below instead
# RUN npm run build

# Production image, copy all the files and run next
FROM node:18-alpine AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3001

ENV PORT 3001

CMD ["node", "server.js"]

docker-compose.yml:

version: "3.9"
services:
  db:
    image: postgres
    volumes:
      - ./tmp/db:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: ${POSTGRESQL_PASSWORD}
  backend:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db
    environment:
      DATABASE_USERNAME: ${MYAPP_DATABASE_USERNAME}
      DATABASE_PASSWORD: ${POSTGRESQL_PASSWORD}
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
      target: builder
    command: yarn dev
    volumes:
      - ./frontend:/app
    expose:
      - "3001"
    ports:
      - "3001:3001"
    depends_on:
      - backend
    environment:
      FRONTEND_BUILD: ${FRONTEND_BUILD}
      PORT: 3001

package.json:

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  }
}

When calling yarn dev from docker-compose.yml it actually calls next dev and that's when it triggers the error /bin/sh: next: not found. However, running the container straight from the Dockerfile works and does not lead to this error.

[Update]:

If I remove the volume attribute from my docker-compse.yml file, I don't get the /bin/sh: next: not found error and the container runs however, I now don't get the hot reload feature I am looking for. Any idea why the volume is messing up with the /bin/sh next command?

Answer 1

if you have .next entry in .dockerignore remove that and try this fixed my issue.

and update this cmd from => CMD ["node", "server.js"] to => CMD ["npm", "run", "dev"]

Answer 2

You can also parse this to the volumes directive:

frontend:
    ...
    volumes:
      - ./frontend:/app
      - /app/node_modules # <-- creates the node_modules in frontend path
      - /app/.next # <-- creates the .next folder in frontend path
    ...

Answer 3

This is happening because your local filesystem is being mounted over what is in the docker container. Your docker container does build the node modules in the builder stage, but I'm guessing you don't have the node modules available in your local file system.

To see if this is what is happening, on your local file system, you can do a yarn install. Then try running your container via docker again. I'm predicting that this will work, as yarn will have installed next locally, and it is actually your local file system's node modules that will be run in the docker container.

One way to fix this is to volume mount everything except the node modules folder. Details on how to do that: Add a volume to Docker, but exclude a sub-folder

So in your case, I believe you can add a line to your compose file:

frontend:
    ...
    volumes:
      - ./frontend:/app
      - ./frontend/node_modules # <-- try adding this!
    ...

That should allow the docker container's node_modules to not be overwritten by any volume mount.