【Docker】Laravel 9+Laravel Breezeで@viteのCSSが反映しない

はじめに

以下の組み合わせで、CSSが反映しない状態になりました。
変更しないといけないことが多かったので、反映するまでに変更した部分だけ記載したいと思います。

原因はLaravel 9からViteになったことが主な原因だそうで、そこに対しての調整になります。

• Windows PC
• Docker
• php 8.1
• Laravel 9
• Laravel Breeze

反映させるのに必要な変更

docker-compose.yml の php 部分

以下追加

ports:
  - 5173:5173

※追加場所はVolumeの上にしました。

PHPイメージを読み込む Dockerfile

以下追加

EXPOSE 5173

※追加場所はRUNの上にしました。

Viteの設定ファイル vite.config.js

以下追加

    server: {
        host: true,

        // ホットリロード(自動更新)がならない場合追加
        hmr: {
            host: 'localhost',
        },
        // CSSの自動反映がならない場合追加(Dockerだと多少時差がでるかも)
        watch: {
          usePolling: true,
        },
    },

※追加場所はpluginsの下にしました。
※vite.config.jsはLaravel9をインストールしたらLaravelプロジェクトの直下に自動でできるファイルです。

Laravel Breezeインストールやnpm run dev時にnpmエラーが出る場合

PHPイメージを読み込む Dockerfile

node.jsのバージョンが古いとダメみたいです。
16.16.0なら大丈夫とのことで、バージョンアップする必要があります。

Dockerfile内の RUN apt-get install の部分でnode.jsのバージョンを指定するようにします。

以下追加

RUN apt-get install -y node.js npm && npm install n -g && n 16.16.0

※追加場所はRUNの最後にしました。
※もし既存でnode.jsのインストールしてる場所があれば消してください。

表示の高速化

viteの仕様上 node_modules フォルダや、 vendor フォルダのバインドを除外しないと、ページを表示するたびにロードに時間がかかるそうです。
以下追加した後は、確かに早くなったので、表示が重たい方はぜひ試してみてください。

docker-compose.yml の php 部分

以下追加

#app(phpの部分)のvolumeにバインド除外用の設定を追加
#重たいものをバインドしないことによって表示が軽くなる
#portsの下に書きました。
#「名前付きボリューム:コンテナ内のパス」で書くようです。

volumes:
  - ignore_node_modules:/app/node_modules
  - ignore_vendor:/app/vendor

～～～～～省略～～～～～

#ファイルの一番下に除外するために使う、名前付きボリュームを定義
volumes:
  ignore_node_modules:
  ignore_vendor:

PHPイメージを読み込む Dockerfile

以下追加

#バインドしないようにしたので、起動する度に npm と composer の install が必要なので、コマンドで自動でインストールさせるようです。
#これがあると、Docker起動後に毎回手動で composer install と npm install をしなくてよくなり npm run dev だけでよくなります。

ENTRYPOINT [ "bash", "-c", "composer install; npm install; exec php-fpm" ]

※追加場所はファイルの一番下にしました。
※筆者の環境ではこれがなくても install なしで npm run dev だけで動いてる気がしてますが、何かあったらまた更新します。
※npmやcomposerのコマンドはコンテナ内でしてください。(「docker compose exec サービス名 コマンド」を使ってしたらOKです。)

さいごに