はじめに
sailを使ってwindowsのローカルに
インストールしたLaravel＋React＋Inersia。
開発している際ブラウザで動作確認するとき、毎回ローディング時間が長い。。。
開発ができないわけではないけど、効率上げるためにWSLに移動させました。
なので移動する前は問題なく開発ができていました。
そして移動してdockerを立ちあげてからlocalhostにアクセスすると真っ白。
デベロッパーツールには以下のエラーが。。。
GET http://[::1]:5175/resources/js/app.jsx net::ERR_CONNECTION_REFUSED
結論
プロジェクト名/public/hot
上記のファイルを削除すること真っ白の画面がなんと、表示されました。
もう、、、いろいろいじったのでこれだけではないかもですが
デベロッパーツールに見覚えのないポート番号でエラーになってたら疑ってみてよいです。
ポート5175なんてymlファイルにもdockerfileにもvite.config.jsにも設定してない。
なんだこれって思ってたけど、検索にヒットしない。
デフォルトかなって思ってましたが
public/hotの中身が。
エラーまんまのポート(笑)
今まで動いてたのにwsl環境に移したら急にこれ拾うん？謎。。。
他にもやったこと
ここからは意味がなかったかもだけどいろんな記事を試したので
解決しなかったら見てみてください。
メインのポートとnpm run devのポートは別にする。
ポートが競合してサーバーつながらなくなる。
これはほんとに関係ないけど。
npm run devとメインポート（localhost）が同じでないといけないと思ってましたが
逆に別ではいといけない。
自分は5173と80にポートを設定して
npm run devをした際はポートを5174などかぶらないようにした。
この場合5174にアクセスすると画面が出ることを確認する。
5173はアクセスできないのはなんでだろ？？？
vite.config.jsの追記
13～20行目の追記
こんな追記なくても動いたけど、記事を見ると13～17は結構皆さん書いてます。
portはポートの指定。
strictPortは上記のポートが使われていたらエラーを出してほかのポートにアクセスしない。