VPS環境でlaravel+reactで環境作成時のエラー備忘録「 ERR_CONNECTION_REFUSED」

環境

php 8.3.6
laravel Framework 11.4.0
composer 2.7.2
sail v20.12.2
npm npx 10.5.2

環境構築中のエラー

上記を参考に環境を作成して、
「sail npm run dev」を実行してブラウザを表示しようとしたらブラウザーが真っ白で下記のconsoleエラーが発生

http://localhost:5173/@react-refresh net::ERR_CONNECTION_REFUSED

プロジェクト直下にある「vite.config.js」にserverの部分を追加し
host:の 「157.xxx.xxx.xxx」の部分をグローバルIPにすることで解決

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'; // 追加

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss', 
                'resources/ts/index.tsx'
            ],
            refresh: true,
        }),
        react(), // 追加
    ],
    server: {
        hmr: {
            host: '157.xxx.xxx.xxx',
        },
      }
});

まとめ

VPSやawsなどのクラウドで作成する方の参考になればと思います
ポートの解放も必要です(ポート解放については過去の記事をご参照ください)