状況
勉強用にWSLを利用したDockerで環境構築し、開発を進めていた。
フロントエンドにはViteを導入し、ホットリロード(ファイルに変更があると自動でブラウザも更新)機能が使える!と思ったが、一向に更新されない。
というか、ブラウザを更新してみたら何分もかかる...。
これはおかしいと思い、解決した際の備忘録
原因
- ソースコードを、WSL(Linux)のファイルシステム上に配置していなかったこと
この状態になっていると、LinuxであるDockerコンテナに対してリクエストが行われた際にWindowsOS上のコードを参照するため、都度Windows→Linuxへのファイル変換が行われてしまいます。
僕はLaravel+React+Viteの環境で開発していたのですが、Laravelの大量コードを都度変換していると考えると、そりゃ激重になりますわな。
解決策
ファイル変換が起きないようにすればよい!
てなわけで、WSLのLinux環境内にソースコードを配置するだけです。
\\wsl.localhost\Ubuntu\home\[username]
こちらのパスをエクスプローラで表示するとWSL上のファイルを参照できるので、このパスの配下にプロジェクトフォルダを移動させます。
毎回入力するのがめんどくさい人はクイックアクセスにピン止めするのをお勧めします。
僕は[username]配下にプロジェクトを配置しました。
すると、激重ブラウザも解消されてホットリロードも効くようになりました!!
おわりに
WSL環境を使い慣れている人にとっては当たり前のことかもしれませんが、同じようにつまずいている人は多いのでは?とおもって書いてみましたとさ。
参考