What I’ve tried

Going to localhost:3000 works fine and I can visit the nextjs website when I’m running it on the docker container.

When I ping port 9229, 9230 it is also successful.

$ nc -zv localhost 9229
Connection to localhost port 9229 [tcp/*] succeeded!
$ nc -zv localhost 9230
Connection to localhost port 9230 [tcp/*] succeeded!

When I build and run npm run dev locally and I visit ws://127.0.0.1:9230 I get the message WebSockets request was expected and I’m able to attach vscode to the local instance; however, when I try to start it in the docker container, the safari page can’t connect and when I try to connect VSCode debugger just hangs. The error safari gives is

Can’t open the page because the server unexpectedly dropped the
connection

It seems like for some reason port 9229 and 9230 aren’t accessible locally even though when I run docker ps it seems like the ports are exposed.

01e20ef26636   capybaraapi-webclient     "docker-entrypoint.s…"   3 hours ago      Up 40 minutes   0.0.0.0:3000->3000/tcp, 0.0.0.0:9229-9230->9229-9230/tcp   capybaraapi-webclient-1

package.json

"dev": "NODE_OPTIONS='--inspect' next dev",

docker-compose.yml

  webclient:
    build:
      context: ./webclient
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
      - "9229:9229"
      - "9230:9230"
    environment:
      - NODE_ENV=development
    volumes:
      - ./webclient:/usr/src/app

Dockerfile

# Use official Node.js image with LTS (Long Term Support) version as the base image
FROM node:20.15.0

# Set working directory inside the container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json to install dependencies
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code to the container
COPY . .

# Build the Next.js application for production
RUN npm run build

# Expose the port that Next.js app runs on
EXPOSE 3000
EXPOSE 9229
EXPOSE 9230
# Run the Next.js application in production mode
CMD ["npm", "run", "dev"]

Docker Logs

webclient-1  | > NODE_OPTIONS='--inspect' next dev
webclient-1  | 
webclient-1  | Debugger listening on ws://127.0.0.1:9229/33008c4b-562d-4fd2-854a-643a1534c6b9
webclient-1  | For help, see: https://nodejs.org/en/docs/inspector
webclient-1  | Debugger listening on ws://127.0.0.1:9230/2bcdec9b-22f4-40e9-a211-1c27d8fbb7f1
webclient-1  | For help, see: https://nodejs.org/en/docs/inspector
webclient-1  |    the --inspect option was detected, the Next.js router server should be inspected at port 9230.
webclient-1  |   ▲ Next.js 14.2.4
webclient-1  |   - Local:        http://localhost:3000
webclient-1  | 
webclient-1  |  ✓ Starting...

launch.json

  {
    "type": "node",
    "request": "attach",
    "name": "WebClient Docker",
    "port": 9230,
    "address": "localhost",
    "localRoot": "${workspaceFolder}/webclient",
    "remoteRoot": "/usr/src/app",
    "sourceMaps": true,
    "skipFiles": ["<node_internals>/**"]
  }