Docker環境のLaravel ViteでHot Reloadが効かない問題の解消

よく、Laravelなどの解説サイトではPHPとNodeのプロセスを1つのコンテナで動かしていることが多いです。
ただ、1コンテナ1プロセスの原則があるので、私はコンテナでの開発環境をPHPとNodeで分けています。
このとき、Viteのホットリロードがされず、npm run devが使えない問題があったのでそれを調べていました

以下のようにapp（PHPのコンテナ）とnode（Nodeコンテナ）を分けています。
ポイントとしては、Nodeのコンテナでviteが利用する5173ポートを開放しておくことです。

services:
  app:
    build:
      dockerfile: ./docker/php-fpm/Dockerfile
    volumes:
      - ./web/:/work
    depends_on:
      - node

  node:
    image: node:21
    tty: true
    volumes:
      - ./web/:/work
    working_dir: "/work"
    ports:
      - "5173:5173"

vite.config.jsを以下のように設定してあげます。

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        hmr: {
            host: 'localhost',    // 開発環境のdockerのhostを設定してあげる
        },
        watch: {
            usePolling: true,    // WindowsのWSL2でも動くように設定
        }
    }
});

• https://ja.vitejs.dev/config/server-options#server-watch

[PR] おすすめの本

この記事を書いた人

Nな人（えぬなひと）。
Nは本名から取っています。
Laravelが大好きなPHPerで、WEBを作るときはLaravelを技術スタックに絶対推すマン。
PHP、Pythonと、昔はperlを書いていたP言語エンジニア。
最近はNimを書いたりしています。