Laravel+Breeze+Vite+Dockerでのレイアウト崩れ対応

実行環境

• Laravel v10.10.1
• Breeze v1.21.0
• Vite v4.3.5
• Docker Engine v23.0.5
• PHP v8.2.6
• composer v2.5.5
• node v16.20.0
• npm v9.6.6

レイアウト崩れの状況

Docker のコンテナ内でnpm run devを行うと、
以下の画像のように、CSS と JS が効いていない状態になってしまいます。

解決方法

compose.yml の修正

node が動いているコンテナで 5173port の開放を行う。
vite を起動するとデフォルトでは、5173port を利用するため開放する必要がある。
sail を利用している場合は、デフォルトで開放されているので修正する必要はありません。

web:
  ports:
    - "5173:5173"

package.json の修正（もしくは vite.config.js の修正）

デフォルとの状態だと、package.json の scripts で "dev": "vite" が設定されているので、 "dev": "vite --host" へ修正します。

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

もしくは vite.config.js に server: { host: true } を追記する方法でも大丈夫です。

export default defineConfig({
    server: {
        host: true,
    },
});

無事、レイアウト崩れが解消

※一部コードを変えているので Laravel+Breeze インストール直後のデフォルトの表示とは異なります。

補足

Brave(ブラウザ)を利用している方は、広告ブロックをオフにしないと Vite が正常に機能しないみたいです。地味にハマったポイントです。。

まとめ

たくさん記事がありそうなものですが、あまりヒットしなかったので同じような悩みを抱えてる人の問題解決に少しでも役に立てたら良いなと思い記事にしてみました。
割と適当な人間なので間違っている箇所や、言葉のチョイスが間違ってる所とかもあるかもしれないですが、気になる箇所があったら教えて下さい。

初めて、技術記事を書いたのですが自身の頭の整理になって良いですね。良ければ記事を書いたことが無いと言う人も書いてみると新たな発見があるかもしれないです。ではでは。