HMR无法在Docker中与Laravel Mix一起使用

Question

bounty到期明天。该问题的答案有资格获得+ 50声望赏金。James Pavett希望对此问题引起更多关注：“只要能从能够使HMR与Laravel和Docker一起工作的人中寻求帮助，”

我在Docker容器内的Laravel Mix中设置热模块重载时遇到一些问题。

我有以下Dockerfile：

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

我正在使用以下docker-compose.yml文件进行构建。

  # 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

在以前的Node.js应用程序中，我已经复制了dockerfile中的数据，并将卷装载到了compose文件中，但这似乎与Laravel并没有相同的效果。

[我在Git Bash中看到以下输出，但是在容器内运行npm hot之后，甚至没有手动刷新，网页都根本没有重新加载任何更改：

尽管如此，我之前使用的npm run watch-poll仍然可以按预期运行。

通常，在查看应用程序时，我会从浏览器内的HMR和WDS在控制台中看到日志。但是在这种情况下，我看不到任何输出。

[下面我还包含了我的webpack.mix.js文件。我一直在搞弄一些选项，例如端口和主机，因为我知道在容器内运行时需要以某种方式对其进行配置。在我努力找出我要去哪里的时候，我们将提供任何帮助。

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

编辑：

将两个主机值都设置为Web后，运行npm时热输出错误：

> @ 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
}

Answer 1

问题出在

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

您不能使用本地主机，因为在这种情况下它是引用您的APP容器，您应该使用web，因为compose会为您解析服务名称：

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

Answer 2

Webpack可能在docker内部存在文件监视程序的问题。尝试在devServer配置中添加轮询选项。

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

对于listen EADDRNOTAVAIL: address not available 172.25.0.4:80问题：

1. 查看是否有一个容器正在运行docker ps
2. 用docker stop [container_id]杀死阻塞容器