Run webpack-dev-server inside docker container

Question

I have a symfony project with docker and I would like to setup webpack-dev-server for hot reloading. I have a basic knowledge about docker, but I probably not know how it works deeply. In my php container I have yarn installed. My docker-compose file looks like:

version: '3.8'

networks:
  nginx-php8-mysql8-node:

services:

  nginx:
    build:
      context: docker/nginx
      dockerfile: Dockerfile
    image: nginx:1.21-alpine
    container_name: nginx-container
    ports:
      - "8080:8080"
      - "443:443"
    volumes:
      - ./app:${PROJECT_ROOT}
      - ./app/public:${PROJECT_ROOT}/public
      - /var/run/docker.sock:/tmp/docker.sock:ro
      - ./docker/nginx/conf/default_template.conf:/etc/nginx/conf.d/default.template
      - ./certs:/etc/nginx/certs
      - ./log/nginx:/var/log/nginx
    env_file:
      - .env
    depends_on:
      - php8
    command: /bin/bash -c "envsubst '$$NGINX_HOST $$PROJECT_ROOT'
      < /etc/nginx/conf.d/default.template
      > /etc/nginx/conf.d/default.conf
      && exec nginx -g 'daemon off;'"
    networks:
      - nginx-php8-mysql8-node

  php8:
    build:
      context: ./docker/php
      args:
        PHP_VERSION: ${PHP_VERSION}
        PROJECT_ROOT: ${PROJECT_ROOT}
    container_name: php8-container
    env_file:
      - .env
    volumes:
      - ./app:${PROJECT_ROOT}:rw,cached
      - ./certs:/etc/certs
    depends_on:
      - mysql
    networks:
      - nginx-php8-mysql8-node

  mysql:
    image: mysql:8.0
    container_name: mysql8-container
    command: --default-authentication-plugin=mysql_native_password --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    restart: always
    volumes:
      - ./data:/var/lib/mysql
    env_file:
      - .env
    ports:
      - "33061:3306"
    networks:
      - nginx-php8-mysql8-node

If I get into the container with @docker exec -it php8-container bash and try to run webpack-dev-server I see Connection failed to ws://foo.test:8080/ws and Disconnected errors only. I tried to set host to 0.0.0.0 in the webpack configuration, and all the things I found, but never had a working configuration. Also, I have to set writeToDisk to true, or there isn't any connecting attempt.

 .configureDevServerOptions(options => {
        options.allowedHosts = 'all';
        options.host         = '0.0.0.0';

        options.devMiddleware = {
            writeToDisk:true
        };
   });

However if I add another container to my docker-compose file like this, it works as expected.

node:
    build:
      context: docker/webpack
      dockerfile: Dockerfile
    container_name: node-container
    working_dir: "${PROJECT_ROOT}"
    env_file:
      - .env
    volumes:
      - ./app:${PROJECT_ROOT}:rw
      - ./certs:/etc/certs
    command: yarn encore dev-server --host 0.0.0.0 --hot --port 9000
    ports:
      - "9000:9000"
    depends_on:
      - php8
    networks:
      - nginx-php8-mysql8-node

So my question is, what's the difference, and why can't I just run the dev-server without a separate container? Is there a way to make it work that way or I must edit my docker configuration?

Answer 1

I don't see any webpack dev server starting logic in the php8 container, how do you start it? The difference is obviously you've exposed your ports for the nginx in the network therefore allowing to connection from browser to pass through nginx.