Laravel10 ViteをEC2上で自動更新するための設定

Larvel10では、フロントエンド・ビルドツールとして、Viteが採用されています。
Mixへ戻すことも可能ですが、Viteはビルドも早く、利用していても快適ですので、是非利用をお勧めします。

ただし、AWSのEC2上で開発を行う際など、そのままの設定では、

$ npm run dev 

を利用した自動更新のコマンドで失敗します。

この自動更新が正常に行うようにするためには vite.config を以下のように修正する必要があります。

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        host: true,
        hmr: {
            host: 'laravel.example.com（開発環境として利用しているドメイン）'
        }
    },
});

serverの項目を追加し、hostの項目を trueに、hmrのhostに開発環境として利用しているドメインを設定します。

また、AWSのセキュリティグループの設定で、5173ポートを自身の環境のIPからアクセス可能なようにしておく必要があります。