WSL上のHugoサーバにLAN内の端末からアクセスする

Posted at — 2023-01-27

WSL(WSL2)上でhugo server した際に、手持ちのiPhone等から見た目を確認したかったので、色々試行錯誤しました

断片的な情報であれば調べれば出てくるのですがそれも分かりにくかったり、自分のケースに合わなかったりしたので注意点を上げていきます

サーバ起動時のオプション指定

LAN内へサーバを開放するにはオプションを指定する必要があります

$ hugo server --bind=0.0.0.0

注意点としては必ず0.0.0.0を指定することです

127.0.0.1やlocalhostと指定してしまうとLANからアクセスすることが出来ません

まずはWSL側のIPアドレスを確認しておきます

$ ifconfig eth0 | grep inet
inet 172.28.28.0  netmask 255.255.240.0  broadcast 172.28.31.255

調べたIPアドレスに対してWindows側でポートフォワードを設定しますターミナル(PowerShell)は管理者権限で起動します

netsh.exe interface portproxy add v4tov4 listenaddress=0.0.0.0 listenport=31313 connectaddress=172.28.28.0 connectport=1313

listenaddressは0.0.0.0を指定します

ここでもlocalhostや127.0.0.1にしないように注意

listenportは1313では無く、他の使用していないポートにします(ここでは31313)

connectaddressはWSL側のIPアドレス(172.28.28.0)を指定します

ここで、ブラウザからhttp://localhost:31313にアクセスして動作確認します

アクセスできない場合はいつも通りhttp://localhost:1313を試し、こちらがアクセスできるのであればポートフォワードの設定でミスしている可能性が高いです

こちらにもアクセスできない場合は、サーバの起動に問題が生じている可能性が高いです

このままLAN内の端末からアクセスしてもファイアウォールにブロックされる可能性が高いです

コントロールパネルのシステムとセキュリティ > Windows Defender ファイアウォール > 詳細設定で、受信の規則 > 新しい規則から、別途31313ポートへのアクセスを許可するようにします

規則の種類 -> ポート
TCPかUDP -> TCP
特定のローカルポート -> 31313
操作 -> 接続を許可する
プロファイル -> プライベートのみチェック
名前 -> 適当に設定

Windows側のIPアドレス+ポート番号を指定するだけです

http://192.168.1.11:31313

ポート番号は1313ではなく、ポートフォワード設定時に指定したポート番号(31313)にして下さい

リンクの指定から.BaseURLを排除すれば直ります

<link rel="stylesheet" type="text/css" media="screen" href="{{ .Site.BaseURL }}css/main.css" />

となってる場合は

<link rel="stylesheet" type="text/css" media="screen" href="/css/main.css" />

にすれば直ります

というわけでなんとか解決しました(完)