HMR không hoạt động với Laravel Mix trong Docker

Tôi đang gặp một số vấn đề khi thiết lập Tải lại mô-đun nóng trong Laravel Mix bên trong thùng chứa Docker.

Tôi có Dockerfile sau:

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

Mà tôi đang xây dựng bằng cách sử dụng tệp docker-compose.yml bên dưới.

  # 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

Trong các ứng dụng Node.js trước đây, tôi đã sao chép dữ liệu bên trong dockerfile và gắn âm lượng trong tệp soạn thảo, tuy nhiên điều này dường như không có tác dụng tương tự với Laravel.

Tôi đang thấy đầu ra bên dưới trong Git Bash, tuy nhiên các trang web hoàn toàn không tải lại các thay đổi sau khi tôi chạy npm chạy nóng bên trong container, thậm chí không được làm mới thủ công:

Mặc dù vậy, npm chạy watch-poll, mà tôi đã sử dụng trước đây, vẫn hoạt động như mong đợi.

Thông thường tôi thấy các bản ghi trong bảng điều khiển từ HMR và WDS bên trong trình duyệt khi xem ứng dụng. Tuy nhiên trong tình huống này tôi không thấy bất kỳ đầu ra nào.

Dưới đây tôi cũng đã bao gồm tệp webpack.mix.js của mình. Tôi đã loay hoay với một số tùy chọn, chẳng hạn như cổng và máy chủ, vì tôi biết chúng cần được cấu hình theo một cách nhất định khi chạy bên trong một container. Bất kỳ trợ giúp sẽ được đánh giá cao khi tôi đang cố gắng để làm việc mà tôi đang đi sai.

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

Biên tập:

Lỗi đầu ra khi chạy npm chạy nóng sau khi đặt cả hai giá trị máy chủ lên 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
}

vấn đề là ở

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

bạn không thể sử dụng localhost vì nó được đề cập đến bộ chứa APP của bạn trong trường hợp này, bạn nên làm gì là sử dụng webthay vì soạn thảo sẽ phân giải tên dịch vụ cho bạn:

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 có thể có vấn đề với trình xem tập tin nằm trong docker. Hãy thử thêm tùy chọn bỏ phiếu trong cấu hình devServer.

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

Đối với listen EADDRNOTAVAIL: address not available 172.25.0.4:80vấn đề:

1. Xem nếu có một container chạy với docker ps
2. Giết container chặn bằng docker stop [container_id]