DockerでLEMP環境を作成した際にLaravel Viteがエラーになった件

Laravel Viteを起動するとCSSが適用されていなかった

Laravel10ではLaravelViteがデフォルトで入っており、Tailwind CSSを使用する場合、LaravelViteが起動されていないとCSSがローカルで適用されません。ですが、今回はviteを起動しても一部のCSSが適用されない問題が発生しました。
localhostを検証(F12)で確認すると以下のエラーが発生していました。

GET http://127.0.0.1:5173/@vite/client net::ERR_EMPTY_RESPONSE
GET http://127.0.0.1:5173/resources/js/app.js net::ERR_EMPTY_RESPONSE
GET http://127.0.0.1:5173/resources/css/app.css net::ERR_EMPTY_RESPONSE

上記が発生していた原因としては以下でした。

• Dockerの設定でポート5173(Viteで使うポート)がDocker外に開かれていないこと
• ViteはLocal:は見ているがNetwork:は見ていない

改善する手順

appサーバのポート5173の設定を追加する

以下、portsの部分を追記

compose.yaml

  app:
    build:
      context: .
      dockerfile: ./docker/php/Dockerfile
    volumes:
      - ./src/:/app
    ports:
      - 5173:5173

以下、docker/php/DockerfileにEXPOSEの設定を追加

FROM php:8.1.18-fpm
EXPOSE 5173

上記設定後にDockerコンテナを再起動する。

--hostを追加する。

Viteの起動オプションを修正する。(server:を追記)

vite.config.js

    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    server: {
        host: true,
        hmr: {
            host: 'localhost',
        },
    },

上記でコンソールのエラーが消えているはずです。

最後に

DockerでLEMP環境を作成して学習していた際に、エラーに遭遇したため、解消方法を記載しました。
環境の構成は異なると思いますが、1からDockerfileを作成している場合は、Vite用のポートの設定もする必要があるという内容でした。
初めての記事なので、読みにくいところもあると思いますが、よろしくお願いします。

参考文献