web-dev-qa-db-fra.com

HMR ne fonctionne pas avec Laravel Mix dans Docker

Je rencontre des problèmes pour configurer le rechargement du module à chaud dans Laravel Mix dans un conteneur Docker.

J'ai le Dockerfile suivant:

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

Ce que je construis en utilisant le fichier docker-compose.yml ci-dessous.

  # 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

Dans les applications Node.js précédentes, j'ai copié les données à l'intérieur du fichier docker et monté le volume dans le fichier de composition, mais cela ne semble pas avoir le même effet avec Laravel.

Je vois la sortie ci-dessous dans Git Bash, mais les pages Web ne se rechargent pas du tout avec les modifications après avoir exécuté npm à chaud à l'intérieur du conteneur, pas même avec une actualisation manuelle:

enter image description here

Malgré cela, npm run watch-poll, que j'ai utilisé précédemment, fonctionne toujours comme prévu.

En règle générale, je vois des journaux dans la console de HMR et WDS dans le navigateur lors de la visualisation de l'application. Cependant, dans cette situation, je ne vois aucune sortie.

Ci-dessous, j'ai également inclus mon fichier webpack.mix.js. J'ai joué avec certaines des options, telles que le port et l'hôte, car je sais qu'elles doivent être configurées d'une certaine manière lors de l'exécution à l'intérieur d'un conteneur. Toute aide serait appréciée car j'ai du mal à comprendre où je me trompe.

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
    },
});

Éditer:

Sortie d'erreur lors de l'exécution de npm à chaud après avoir défini les deux valeurs d'hôte sur Web:

> @ 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
}
laraveldockerdocker-composewebpack-dev-serverlaravel-mix
8
James Pavett

Webpack peut avoir un problème avec l'observateur de fichiers dans le docker. Essayez d'ajouter l'option d'interrogation dans la configuration de devServer.

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

Pour le listen EADDRNOTAVAIL: address not available 172.25.0.4:80 problème:

  1. Voir s'il y a un conteneur en cours d'exécution avec docker ps
  2. Tuez le conteneur bloquant avec docker stop [container_id]
0
Alan Darmasaputra