HMR funktioniert nicht mit Laravel Mix in Docker

Ich habe einige Probleme beim Einrichten des Hot Module Reloading in Laravel Mix in einem Docker-Container.

Ich habe die folgende Docker-Datei:

FROM php:7.4.0-fpm

RUN curl -sL https://deb.nodesource.com/setup_13.x | bash

RUN apt-get update && \
    apt-get install -y -q --no-install-recommends \
    nano apt-utils curl unzip default-mysql-client nodejs build-essential git \
    libcurl4-gnutls-dev libmcrypt-dev libmagickwand-dev \
    libwebp-dev libjpeg-dev libpng-dev libxpm-dev \
    libfreetype6-dev libaio-dev zlib1g-dev libzip-dev && \
    echo 'umask 002' >> /root/.bashrc  && \
    apt-get clean

# Docker PHP Extensions
RUN docker-php-ext-install -j$(nproc) iconv gettext gd mysqli curl pdo pdo_mysql zip && \
    docker-php-ext-configure gd --with-freetype=/usr/include/ --with-jpeg=/usr/include/ && \
    docker-php-ext-configure curl --with-curl

WORKDIR /var/www/html

COPY . /var/www/html

EXPOSE 80

Was ich mit der folgenden Datei docker-compose.yml baue.

  # The Application
  app:
    build:
      context: ./
      dockerfile: app.dockerfile
    working_dir: /var/www/html
    volumes:
      - ./webroot:/var/www/html
    environment:
      - "DB_PORT=3306"
      - "DB_HOST=database"
      - CHOKIDAR_USEPOLLING=true

  # The Web Server
  web:
    build:
      context: ./
      dockerfile: web.dockerfile
    working_dir: /var/www/html
    volumes_from:
      - app
    ports:
      - 80:80

In früheren Node.js-Apps habe ich die Daten in der Docker-Datei kopiert und das Volume in die Compose-Datei gemountet. Dies scheint jedoch nicht den gleichen Effekt mit Laravel zu haben.

Ich sehe die folgende Ausgabe in Git Bash, aber die Webseiten werden überhaupt nicht mit Änderungen neu geladen, nachdem ich npm run hot im Container ausgeführt habe, auch nicht mit einer manuellen Aktualisierung:

Trotzdem funktioniert npm run watch-poll, das ich zuvor verwendet habe, immer noch wie erwartet.

Normalerweise werden beim Anzeigen der Anwendung Protokolle von HMR und WDS in der Konsole im Browser angezeigt. In dieser Situation sehe ich jedoch keine Ausgänge.

Unten habe ich auch meine Datei webpack.mix.js aufgenommen. Ich habe mit einigen Optionen herumgespielt, wie z. B. dem Port und dem Host, da ich weiß, dass sie beim Ausführen in einem Container auf eine bestimmte Weise konfiguriert werden müssen. Jede Hilfe wäre dankbar, da ich Schwierigkeiten habe, herauszufinden, wo ich falsch liege.

mix.options({
    hmrOptions: {
        host: 'localhost',
        port: '80'
    },
});

mix.webpackConfig({
    mode: "development",
    devtool: "inline-source-map",
    devServer: {
        disableHostCheck: true,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        host: "0.0.0.0",
        port: 80
    },
});

Bearbeiten:

Fehlerausgabe beim Ausführen von npm run hot, nachdem beide Hostwerte auf web gesetzt wurden:

> @ hot /var/www/html
> cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js

events.js:298
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRNOTAVAIL: address not available 172.25.0.4:80
    at Server.setupListenHandle [as _listen2] (net.js:1292:21)
    at listenInCluster (net.js:1357:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1496:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:69:10)
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1336:8)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  code: 'EADDRNOTAVAIL',
  errno: -99,
  syscall: 'listen',
  address: '172.25.0.4',
  port: 80
}

Das Problem ist in

mix.options({
    hmrOptions: {
        host: 'localhost',
        port: '80'
    },
});

Sie können localhost nicht verwenden, da es sich in diesem Fall auf Ihren APP-Container bezieht. Verwenden Sie webstattdessen stattdessen localhost, da compose die Dienstnamen für Sie auflöst:

mix.options({
    hmrOptions: {
        host: 'web',
        port: '80'
    },
});

mix.webpackConfig({
    mode: "development",
    devtool: "inline-source-map",
    devServer: {
        disableHostCheck: true,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        host: "web",
        port: 80
    },
});

Webpack hat möglicherweise ein Problem mit dem Datei-Watcher im Docker. Versuchen Sie, die Abrufoption in der devServer-Konfiguration hinzuzufügen.

mix.webpackConfig({
  mode: "development",
  devtool: "inline-source-map",
  devServer: {
    watchOptions: {
      poll: true
    }
  }
});

Für das listen EADDRNOTAVAIL: address not available 172.25.0.4:80Problem:

1. Überprüfen Sie, ob ein Container mit läuft docker ps
2. Töte den Sperrbehälter mit docker stop [container_id]