前提

Dockerで構築したLaravelの開発環境でViteを正常に動作する方法を説明します。

Laravel BreezeをインストールしたときにTailwindが読み込まれず対応。

ブラウザコンソールに下記のようなエラーが発生。

GET http://[::]:5173/@vite/client net::ERR_SOCKET_NOT_CONNECTED
GET http://[::]:5173/resources/css/app.css net::ERR_SOCKET_NOT_CONNECTED
GET http://[::]:5173/resources/js/app.js net::ERR_SOCKET_NOT_CONNECTED

手順

Laravelの.envファイルを修正

.envの APP_URLを正しく設定する。

APP_URL=http://localhost:8000

Laravelを実行しているコンテナの5173ポートを解放する。

  app:
    build: ./docker/php
    ports:
      - "5173:5173"

package.jsonを修正

"scripts": {
  "dev": "vite --host",
  "build": "vite build"
},

--host オプションを追加する。