【WSL2】viteで起動したサーバに、外部端末からアクセスする方法

お疲れ様です。秋並です。

今回は、

• viteで起動したサーバに、外部IPからアクセスする方法 on WSL2

について解説します。

package.jsonまたは、vite.config.tsの変更

最初に、デフォルトでviteを起動するとlocalhostからしかアクセスできないので、IPアドレスからアクセスできるようにpackage.jsonまたは、vite.config.tsを変更します。

手順については、下記を参考にしてください

.wslconfigの編集

次に「C:/ユーザー/<ユーザー名>」に.wslconfigを作成し、以下のように設定します。

[wsl2]
dnsTunneling=true
autoProxy=true
networkingMode=mirrored

[experimental]
hostAddressLoopback=true

.wslconfigファイルは、隠しファイルになるのでエクスプローラーの「表示」タブから隠しファイルを表示できるように設定してください。

また、よくある間違いとして「.wslconfig.txt」のように余計な拡張子がついてしまっていることがあるので、同様に「表示」タブからファイルの拡張子を表示するようにし、拡張子がついていないことを確認してください。

ファイアーウォールの設定

最後にファイアーウォールの「受信の規則」で対象の外部端末のIPからのアクセスを許可します。

ファイアーウォールの設定はセキュリティに影響するので、必要に応じて詳細に設定してください。

ここまで設定出来たら、下記コマンドでwslを一度再起動してください（下記コマンドはpower shellなどで実行）。

wsl --shutdown

viteでサーバーを起動

ここまでの手順が完了したら、viteでサーバーを起動してください（wsl2上で実行）。

サーバを起動すると、以下のように表示されると思います。

（前略）
  ➜  Local:   http://localhost:5173/
  ➜  Network: http://***.***.***.***:5173/
  ➜  Network: http://***.***.***.***:5173/ # こっちに外部端末のブラウザからアクセスできる

おそらく、Networkには上記のように2つアドレスが表示されると思いますが、2つ目のアドレスに外部端末からアクセスできるようになっているはずです。