はじめに

Docker環境でLaravel9のbreezeを使用した時にcss, jsの参照問題で地味にハマったのでその解決法の共有です。

環境

Docker環境と構成: リポジトリ

PHP
Nginx
Node
Mysql
Mysql(test db)
PHP My Admin
Ngrock
Schemaspy
Schemaspy Server(Nginx)

それぞれのVersion

PHP: 8.1.13
Laravel: 9.42.2
Composer: 1.10.26
Node: 16.18.1

前提

Dockerを使用してLaravel環境を構築している。
Breezeをインストールしている。
Nodeサーバーではnpm run devをしている状態。

現象

下記の画像のようにcssとjsの参照がうまくできていませんでした。

エラー内容

Failed to load resource: net::ERR_EMPTY_RESPONSE

原因

Laravel9からビルドツールがLaravel MixからViteへの変更があった。
ブラウザからNodeサーバーにアクセスするため、Nodeサーバーの5173ポートを公開する必要がある。
Viteのネットワーク経由のアクセスを設定していない。

解決方法

Nodeサーバーの5173ポートを公開

自分の環境では下記のように追加

Node Dockerfile

  node:
    container_name: node
    build: ./infra/node
    ports:
      - 5173:5173 //追加
    tty: true
    volumes:
      - ./backend:/work
    working_dir: /work

http://localhost:5173/で下記のようになっていればOKです。

Viteの設定

vite.config.jsでネットワーク経由のアクセスを設定する。

vite.config.js

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
// ここから追加
    server: {
        host: true,
        hmr: {
            host: 'localhost',
        },
    },
});

変更後にnpm run dev をするとNetworkのところにURLが設定されていればOKです。

このNetworkのIPアドレスはDocker Networkで設定されているもので下記のコマンドで確認できます。

# ネットワークの名前を検索
$ docker network ls

# ネットワークの詳細を表示
$ docker network inspect NETWORK_NAME

ブラウザで確認

http://localhost:8080/loginにアクセスすると下記のようになっていればOKです。

参考

【超入門】20分でLaravel開発環境を爆速構築するDockerハンズオン