Hot client does not work when server is using docker Error during WebSocket handshake: net::ERR_CONNECTION_RESET

[Ilan Schemoul]

• Operating System: arch linux
• Node Version: 12
• NPM Version: 5
• webpack Version: 4
  "koa-webpack-dev-middleware": "^2.0.2",

Expected Behavior

Hot reload

Actual Behavior

Hot reload works when my server runs on my computer (outside Docker) but when my koa webpack server (which use koa-webpack-dev-middleware a wrapper around your package) runs in a docker container (which is the way to go to run a server even locally to have reproductible, simple to install, unified with prod and CI/CD environment) the client STOP HOT RELOADING and has this error WebSocket connection to 'ws://localhost:31000/' failed: Error during WebSocket handshake: net::ERR_CONNECTION_RESET
If I create a WebSocket server in my server I can connect to it from Chromium 74 with no problem whatsoever.
I've forced port 31000 for hot reload websocket's port. Are you using a special port for WEBSOCKET HANDSHAKE ?

Code

/* eslint-disable import/no-extraneous-dependencies */
import app from '../app';
import path from 'path';
import { Context } from 'koa';
import koaWebpack from 'koa-webpack';
import config, { devCompiler } from 'client/loader/webpack.config.babel';
import WebSocket from 'ws';

koaWebpack({
  compiler: devCompiler({ NODE_ENV: 'development' }),
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
  // @ts-ignore
  hotClient: {
    port: {
      client: 31000,
      server: 31000,
    },
  },
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
  // @ts-ignore
  devMiddleware: { writeToDisk: true },
}).then((middleware: any) => {
  app.use(middleware);

  app.use(async (ctx: Context, next: () => Promise<void>) => {
    if (ctx.request.method === 'GET') {
      const filename = path.resolve(config({ NODE_ENV: 'development' }).output.path, 'index.html');
      ctx.response.type = 'html';
      ctx.response.body = middleware.devMiddleware.fileSystem.createReadStream(filename);
    }

    await next();
  });
});

I don't think my webpack config matters as it does work.

How Do We Reproduce?

Docker-compose

version: '3.7'
services:
  webapp:
    build:
      context: ..
    volumes:
      - "../:/opt/app"
    ports:
      - 3001:3001
      - 4000:4000
      - 8080:8080
      - 31000:31000 # webpack.ts specify for hot module replacement this port for websocket 
    depends_on:
      - mongo
    networks:
      - worksheets_v2
  mongo:
    container_name: mongo
    hostname: mongo
    ports:
      - 27017:27017
    image: healthcheck/mongo
    volumes:
      - type: volume
        source: worksheets_db
        target: /data/db
    environment:
      MONGO_INITDB_ROOT_USERNAME: "${MONGO_USERNAME}"
      MONGO_INITDB_ROOT_PASSWORD: "${MONGO_PASSWORD}"
    networks:
      - worksheets_v2

networks:
  worksheets_v2:

volumes:
  worksheets_db:

FROM node:12.13.0-stretch-slim

RUN apt-get update && apt-get install -y python g++ make inotify-tools iputils-ping

RUN mkdir -p /opt/app

RUN mkdir -p /tmp/server
COPY server/package.json /tmp/server/package.json
COPY server/package-lock.json /tmp/server/package-lock.json
RUN cd /tmp/server && npm ci
RUN cp -a /tmp/server/node_modules /opt/app/server

RUN mkdir -p /tmp/client
COPY client/package.json /tmp/client/package.json
COPY client/package-lock.json /tmp/client/package-lock.json
RUN cd /tmp/client && npm ci
RUN cp -a /tmp/client/node_modules /opt/app/client

COPY . /opt/app

WORKDIR /opt/app/server

EXPOSE 3001
EXPOSE 4000
EXPOSE 9999

CMD npm start

[Ilan Schemoul]

webpack-contrib/webpack-hot-client#99 fixed the problem (I made an issue in the wrong repo)