Docker+Laravel+React+Viteで環境構築し、npm run dev で画面真っ白

画面真っ白に

表題の通り、Docker+Laravel+React+Viteで環境構築後にnpm run dev で画面が真っ白になってしまった。

docker --version
Docker version 20.10.6, build 370c289

php artisan --version
[22-Jul-2023 14:05:32 Asia/Tokyo] Xdebug: [Step Debug] Could not connect to debugging client. Tried: host.docker.internal:9000 (through xdebug.client_host/xdebug.client_port).
Laravel Framework 10.15.0

npm list --depth=0
data@ /data
+-- @headlessui/react@1.7.15
+-- @inertiajs/react@1.0.9
+-- @tailwindcss/forms@0.5.4
+-- @vitejs/plugin-react@3.1.0
+-- autoprefixer@10.4.14
+-- axios@1.4.0
+-- laravel-vite-plugin@0.7.8
+-- postcss@8.4.27
+-- react-dom@18.2.0
+-- react@18.2.0
+-- tailwindcss@

エラー文言

デベロッパーツール＞Console

GET http://127.0.0.1:5173/@vite/client net::ERR_CONNECTION_REFUSED
localhost/:25     GET http://127.0.0.1:5173/resources/js/app.jsx net::ERR_CONNECTION_REFUSED
localhost/:25     GET http://127.0.0.1:5173/resources/js/Pages/Welcome.jsx net::ERR_CONNECTION_REFUSED
localhost/:20     GET http://127.0.0.1:5173/@react-refresh net::ERR_CONNECTION_REFUSED

portがおかしい

ConsoleのリクエストURLからportがおかしいことに気づく。

Dockerのnginxで指定していたportは8080:80にしていたのだが、http://127.0.0.1:5173となっている。

うーん。なぜだ。

解決方法

Laravel,Reactを導入しているコンテナの設定が漏れている気がしてきた。

Dockerにてアプリケーションコンテナにportをしてみると解決できた。

docker-compose.ymlに以下を追記。

app:
    build: ./docker/php
    volumes:
      - ./src:/data
    ports:
    - 5173:5173  ←vite用port開通

そして、viteがホストを参照するようにするため、package.jsonに以下を追記。

"scripts": {
        "dev": "vite --host",   ←--hostを追記
        "build": "vite build"
    },

これで解決できた−