Как настроить прокси-сервер Webpack Dev Server в стеке Docker под управлением Nginx и Traefik?

Я пытаюсь настроить типичную среду веб-разработки для нашей команды, используя Docker и Docker Compose, используя в основном изображения, предоставленные wodby. Пока моя установка WordPress работает нормально в контейнере nginx, успешно взаимодействуя с настройкой базы данных в другом сервисном контейнере.

Вот мой docker-compose.yml, чтобы это настроить:

version: '3'

services:
  mariadb:
    image: wodby/mariadb:$MARIADB_TAG
    container_name: "${PROJECT_NAME}_mariadb"
    environment:
      MYSQL_ROOT_PASSWORD: $DB_ROOT_PASSWORD
      MYSQL_DATABASE: $DB_NAME
      MYSQL_USER: $DB_USER
      MYSQL_PASSWORD: $DB_PASSWORD
    volumes:
      - "./data/sql:/docker-entrypoint-initdb.d:delegated"
      - "mariadb:/var/lib/mysql"

  php:
    image: wodby/wordpress-php:$WORDPRESS_TAG
    container_name: "${PROJECT_NAME}_php"
    environment:
      DB_HOST: $DB_HOST
      DB_NAME: $DB_NAME
      DB_USER: $DB_USER
      DB_PASSWORD: $DB_PASSWORD
      DB_DRIVER: mysql
      PHP_TIMEZONE: Europe/Berlin
      PHP_XDEBUG: 1
      PHP_XDEBUG_DEFAULT_ENABLE: 1
    volumes:
      - "./public:/var/www/html:cached"

  nginx:
    image: wodby/nginx:$NGINX_TAG
    container_name: "${PROJECT_NAME}_nginx"
    depends_on:
      - php
    environment:
      NGINX_VHOST_PRESET: wordpress
      NGINX_SERVER_ROOT: /var/www/html
      NGINX_ERROR_LOG_LEVEL: debug
      NGINX_STATIC_OPEN_FILE_CACHE: "off"
    volumes:
      - "./public:/var/www/html:cached"
    labels:
      - "traefik.backend=nginx"
      - "traefik.port=80"
      - "traefik.frontend.rule=Host:${PROJECT_URL}"

  reverse-proxy:
    image: traefik
    container_name: "${PROJECT_NAME}_proxy"
    command: -c /dev/null --web --docker --logLevel=INFO
    ports:
      - "8000:80"
      - "8081:8080"
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock"

volumes:
  mariadb:

И соответствующий файл .env:

# Project Settings --------------------

PROJECT_NAME=wordpress
PROJECT_URL=wordpress.localhost

# Database Settings -------------------

DB_ROOT_PASSWORD=password
DB_HOST=mariadb
DB_NAME=wp
DB_USER=wp
DB_PASSWORD=foo

# Service Tags ------------------------

WORDPRESS_TAG=7.2-4.8.5
NODE_TAG=10-0.6.0
NGINX_TAG=1.15-5.0.11
MARIADB_TAG=10.1-3.3.8

Кроме того, я хочу использовать Webpack Dev Server во время разработки для создания ресурсов пользовательской темы. Следующий фрагмент добавляет в стек службу узла, выполняющую сценарий serve из package.json:

  # ...

  node:
    image: wodby/node:$NODE_TAG
    container_name: "${PROJECT_NAME}_node"
    working_dir: /usr/src/theme
    command: sh -c "npm install && npm run serve"
    environment:
      LANG: en_US.UTF-8
      NODE_ENV: development
    expose:
      - "3000"
      - "8080"
    volumes:
      - "./public/wp-content/themes/child-theme:/usr/src/theme:delegated"
    labels:
      - "traefik.backend=node"
      - "traefik.port=8080"
      - "traefik.frontend.rule=Host:theme.${PROJECT_URL}"

  # ...

Соответствующий сценарий в package.json просто запускает сервер разработки:

{
  "scripts": {
    "serve": "webpack-dev-server --mode development --inline --host 0.0.0.0 --disable-host-check"
  }
}

Это нормально работает для обслуживания статических файлов HTML из каталога темы. Проблема в том, что как только я начинаю добавлять конфигурацию прокси для Webpack Dev Server, чтобы обслуживать мою установку WordPress, работающую на nginx вместо каталога темы, я получаю следующую ошибку при посещении соответствующего домена (http: //theme.wordpress.localhost: 8000):

Error occured while trying to proxy to: theme.wordpress.localhost:8000/

В логах контейнера node / webpack выдается следующая ошибка:

[HPM] Error occurred while trying to proxy request / from theme.wordpress.localhost:8000 to http://wordpress.localhost:8000/ (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Моя конфигурация для Webpack Dev Server в webpack.config.babel.js темы:

devServer: {
    overlay: true,
    proxy: [
        {
            path: '**',
            target: 'http://wordpress.localhost:8000/',
            secure: false,
            changeOrigin: true
        }
    ]
},

Проблема в том, что мне все еще трудно понять, что именно происходит внутри обратного прокси-контейнера. У меня такое ощущение, что некоторая информация теряется, пока webpack «проксирует» запрос к Traefik. Я попытался использовать имя службы nginx напрямую в качестве целевого хоста для сервера разработки webpack, но безуспешно.

Как я могу проксировать запросы Webpack Dev Server на сервер nginx в моем стеке Docker?