HMRがDockerのLaravel Mixで機能しない


8

Dockerコンテナ内のLaravel MixでHot Module Reloadingを設定する際にいくつか問題があります。

次の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内のデータをコピーし、ボリュームを構成ファイルにマウントしましたが、これはLaravelと同じ効果があるようには見えません。

Git Bashで以下の出力が表示されますが、手動で更新した場合でも、コンテナー内でnpm run hotを実行した後、Webページが変更でリロードされません。

ここに画像の説明を入力してください

これにもかかわらず、以前使用した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 run hotを実行すると、エラー出力が表示されます。

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

ログはありません、それは静かに失敗しますか?
loic.lopez

@ loic.lopezええ、原因を特定できるログがあるかどうか知っていますか?
James Pavett

興味があると思います:github.com/JeffreyWay/laravel-mix/issues/868
loic.lopez


残念ながら、私はそれらの両方に取り組みましたが、実際には出力はまったく変更されていません。それでもHMRがアクティブであるというブラウザー内の応答はありません
James Pavett

回答:


3

問題は

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

この場合、apphostコンテナを参照しているため、localhostを使用することはできません。compose webがサービス名を解決するため、代わりに何を実行すればよいですか。

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様、すべてのリソースファイルで次のエラーが発生しました:web // css / app.css net :: ERR_ABORTED 504(Gateway Timeout)etc ...
James Pavett

Webサーバーは稼働していますか?Webコンテナのログには何がありますか?
LinPy

これらは、予想される標準のログのように見えます: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

ご不便をおかけして申し訳ありませんが、npm run hotを実行できず、エラー出力が表示されるだけです。私はそれをメインの投稿に編集しましたが、自分でエラーを少し調査しました。
James Pavett

0

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]

まだ運が悪く、そのアドレスで実行されている他のコンテナはありません。@LinPyの提案のように両方のホストをWebに設定した場合にのみ取得しますが、それ以外の場合は動作しません。
James Pavett
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.