MinEMemO

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

📝 更新日:2023-05-18 / 📄 作成日:2023-05-17
Hero Image
目次

はじめに

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

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

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

この記事がなかったらもっと時間がかかっていたと思います。
本当に感謝です。

https://qiita.com/hitotch/items/aa319c49d625c2a9b65e

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

docker-compose.yml の php 部分

以下追加

docker-compose.yml

ports:
  - 5173:5173

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

PHPイメージを読み込む Dockerfile

以下追加

Dockerfile

EXPOSE 5173

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

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

以下追加

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のバージョンを指定するようにします。

以下追加

Dockerfile

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 部分

以下追加

docker-compose.yml

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

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

~~~~~省略~~~~~

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

PHPイメージを読み込む Dockerfile

以下追加

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です。)

さいごに

Docker出来てしまえば、共有が簡単なのですが、それまでの道のりが大変・・
CSSの反映だけだったのですが、仕様上重たすぎる問題もあってかなり時間を使いました。
profile_icon
taka
プログラマー
いつでも転職希望の業務経験7年目(2023時点)のエンジニアです。 仕事の合間にすこしずつ転職活動はしていますが、条件が合う場合ぜひTwitterなどでご連絡頂けると嬉しいです。 希望条件は基本的に残業は1日x1h程度。収入は一旦現状維持。 ある程度で構わないので、保守運用が管理されていて、精神的に安心して働ける環境が良いです。 経験言語はHTML、CSS、javascript、PHP、MySQL、Docker、Vuejs、Laravel このブログは完全に自作で静的ジェネレータで作りました。 この範囲で言えば React.js Gatsby.js GraphQLも経験があります。 最近はAIがどう社会に受け入れられ、日常になっていくのかの行く末が気になっています。 今までの人生で一番変化を感じて不思議な感覚です。