HMR funktioniert nicht mit Laravel Mix in Docker

8

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:

Geben Sie hier die Bildbeschreibung ein

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
}
James Pavett
quelle
Es gibt kein Protokoll, es schlägt lautlos fehl?
loic.lopez
@ loic.lopez Ja, wissen Sie, ob es Protokolle gibt, die eine Ursache identifizieren könnten?
James Pavett
Ich denke, Sie könnten interessiert sein an: github.com/JeffreyWay/laravel-mix/issues/868
loic.lopez
Leider habe ich beide durchgearbeitet und sie haben die Ausgabe überhaupt nicht wirklich verändert. Immer noch keine Antwort in ihrem Browser, dass HMR aktiv ist
James Pavett

Antworten:

3

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
    },
});
LinPy
quelle
Hallo @LinPy, jetzt erhalte ich die folgenden Fehler in allen meinen Ressourcendateien: web // css / app.css net :: ERR_ABORTED 504 (Gateway Timeout) usw. ...
James Pavett
Läuft Ihr Webserver? Was ist in den Webcontainerprotokollen?
LinPy
Dies scheinen nur die Standardprotokolle zu sein, die Sie erwarten würden: 172.25.0.1 - - [20 / Feb / 2020: 08: 52: 28 +0000] "GET /favicon.ico HTTP / 1.1" 200 0 " localhost / admin / dashboard Mozilla / 5.0 (Windows NT 10.0; Win64; x64)
James Pavett
Entschuldigung für die Unannehmlichkeiten, ich kann jetzt nicht einmal npm run hot ausführen, sondern erhalte nur eine Fehlerausgabe. Ich habe es in meinem Hauptbeitrag bearbeitet und nur ein bisschen nach dem Fehler gesucht.
James Pavett
0

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]
Alan Darmasaputra
quelle
Immer noch kein Glück, und unter dieser Adresse laufen keine anderen Container. Ich bekomme es nur, wenn ich beide Hosts wie in @ LinPys Vorschlag auf Web eingestellt habe, aber ansonsten funktioniert es sowieso nicht.
James Pavett