Docker開発環境、Laravel, viteでnpm run devで画面が真っ白になる

wsl2, Dockerで開発しています。
Laravel9, viteでnpm run devを実行すると画面が真っ白になってしまいます。

■npm run dev後のhttp://localhost/の画面

真っ白です…

こちらの記事に解決策があったので試しました。

一方で、 npm run dev の場合は、 Vite の開発サーバが別途立ち上がります。そして Vite でビルドされたファイルへアクセスするための埋め込みリンクは、 Vite の開発サーバの URL となります。 Docker を使う場合、 Docker ホスト側から Docker コンテナ内の Vite 開発サーバへどうやってアクセスするのかが、問題になりました。

とありましたので、記事の通りに試しました。

フォルダ構成

project
└docker
　　└app…php用コンテナ
　　　　└Dockerfile
　　　　└php.ini
　　└db…mysql用コンテナ
　　　　└Dockerfile
　　　　└my.conf
　　└phpmyadmin…phpmyadmin用コンテナ
　　　　└session
　　└web…nginx用コンテナ
　　　　└Dockerfile
　　　　└default.conf
└src…Laravelのソース一式

ソース

■vite.config.js（src配下のLaravel用ソースの中のもの）

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        host: true,
        hmr: {
            host: 'localhost',
        },
    },
});

記事にあるように、

server: {
        host: true,
        hmr: {
            host: 'localhost',
        },
    },

を追加しました。

■docker-compose.yml

version: '3'

services:

  # ---------------------------------
  # php
  # ---------------------------------
  app:
    build:
      context: .
      dockerfile: ./docker/app/Dockerfile
    container_name: NLaraCrm_app
    volumes:
      - ./src/:/app

  # ---------------------------------
  # nginx
  # ---------------------------------
  web:
    build:
      context: .
      dockerfile: ./docker/web/Dockerfile
    ports:
      - 80:80
      - 5173:5173
    depends_on:
      - app
    volumes:
      - ./src/:/app

  # ---------------------------------
  # mysql
  # ---------------------------------
  db:
    build:
      context: .
      dockerfile: ./docker/db/Dockerfile
    container_name: NLaraCrm_db
    ports:
      - 3306:3306

    environment:
      MYSQL_DATABASE: database
      MYSQL_USER: user
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: password
      TZ: 'Asia/Tokyo'

    # 起動時のコマンド
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci

    volumes:
      - mysql-volume:/var/lib/mysql
    

  # ---------------------------------
  # phpmyadmin
  # ---------------------------------
  phpmyadmin:
    image: phpmyadmin/phpmyadmin:5
    container_name: NLaraCrm_phpmyadmin

    links:
      - db

    ports:
      - 8081:80

    volumes:
      - ./docker/phpmyadmin/sessions:/sessions

volumes:
  mysql-volume:

webのportsに - 5173:5173を追加しました。

docker-compose up -dをし直し、appコンテナに入りキャッシュをクリアしましたが依然として画面は白いままです。。。

白い画面のソースを見ますと

<script type="module" src="http://localhost:5173/@vite/client"></script><script type="module" src="http://localhost:5173/resources/js/app.js">

になっていましたので、試しにhttp://localhost:5173/@vite/clientをクリックすると

動作していませんとエラーが…

ポート5173につながっていないのでしょうか…

アドバイスをいただけますと幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

自分で解決できないうちはLaravel公式の使い方だけした方がいい。
SailならWindows/Mac、npm run devをDocker内で動かす/外で動かす、どのパターンでも問題ないし何か問題があっても解決方法を探しやすい。
独自のDockerfile docker-compose.ymlではどこが原因かは他人からは調べにくい。

投稿2022/10/28 06:30