localhost起動したhugo serverにLAN内の他端末からアクセスする

目次

概要

PC上で立てたHugo localhost serverのブログ記事にスマホなどの他の手持ち端末からアクセスする設定を調べたのでメモがてらブログとして残します。 また、毎回PCのローカルIPアドレスを入力するのが面倒だったので処理をまとめたshellも作成しました。 こちらも併せて紹介します。

動機

Hugoで自分のPCをlocalhostにして記事の見映えを確認する際、PC上のブラウザだけでなく他のプラットフォームブラウザでの見映えを確認したい時があります。

もちろんChromeのデベロッパーツールなど、ブラウザに付属する開発ツールを用いれば様々な画面サイズの見映えを確認することは可能です。 しかし、本番へ反映する前にエミュレートではなく実際に手持ちのスマホや他のPCでの見映えや挙動を確認したいことも多かったので今回調べてみました。

環境

• Hugo v0.71.0
• Windows 10
  • Git for Windows付属のターミナルによるbash環境が必要です。
  • ただし、ローカルIPアドレスを調べる限りでは標準装備のコマンドプロンプトでも問題ありません。
• Mac (Catalina)
• LAN内のルーター経由で各PC/スマホがお互いにプライベートIPアドレスでアクセスできること
  • 要はLAN環境が構築されていること
  • 通信会社が提供している公衆無線wifiは不可

普通にlocalhostを立てる場合のコマンド

マニュアル通りlocalhost設定でhugo serverを立てる場合、コマンドは下記のようになります。

# 通常はこちら
$ hugo server

# draft設定の記事も反映する場合はこちら
$ hugo server -D

このコマンドをhugo プロジェクトディレクトリ内で実行すると、 http://localhost:1313 のアドレスで作成したHugoプロジェクトのサイトにアクセスすることが可能です。 (1313はhugoが定めるデフォルトのポート番号です)

しかし、上記の設定ではコマンドを実行したPCでしか作成したサイトにアクセスできません。 これは、hugoのサーバー設定がデフォルトで “127.0.0.1” というローカルループバックアドレス、 つまり自分自身を指す特別なIPアドレスとバインドされているためです。

hugo serverのlocalhostにPCのローカルIPアドレスをバインドする

PCのローカルIPアドレスを調べる

どうやらlocalhost以外のIPアドレスをバインドしてあげればきちんとサーバーとして動作してくれそうです。 “hugo server” コマンドはオプションとして “–bind” というlocalhost以外のIPアドレスをバインドする方法を提供しています。 つまりPCのローカルIPアドレスをこのオプションで指定してあげればLAN内の他の端末からもhugo serverで起動したローカルサーバーにアクセスすることが可能になります。

PCのローカルIPアドレスは Windowsの場合はipconfig コマンド、Mac/Linuxの場合は ifconfig コマンドで調べることが可能です。

• ipconfig コマンド実行結果 / “IPv4 Address”の部分を使用します

  $ ipconfig
  Windows IP Configuration
  
  Ethernet adapter XXXXXXXXXXXXXX:
  
  Connection-specific DNS Suffix  . : XXXXXXXXXXXXX
  IPv6 Address. . . . . . . . . . . : aaaa:bbbb:cccc:dddd:ffff:0000:1111:2222
  Temporary IPv6 Address. . . . . . : aaaa:bbbb:cccc:dddd:ffff:0000:1111:2222
  Link-local IPv6 Address . . . . . : eeee::ffff:cccc:1111:0000%5
  IPv4 Address. . . . . . . . . . . : 192.168.X.Y
  Subnet Mask . . . . . . . . . . . : 255.255.255.0
  Default Gateway . . . . . . . . . : ffff::1111:ffff:0000%5
                                     192.168.1.1
  

• ifconfig コマンド実行結果 / 長いのでgrepで今回必要な”inet”部分だけ抽出

  $ ifconfig | grep inet\ 
  	inet 127.0.0.1 netmask 0xff000000 
  	inet 192.168.1.8 netmask 0xffffff00 broadcast 192.168.1.255
  

IPアドレス付きURLをbaseURLに指定する

また、”–baseURL” オプションでIPアドレス指定でのURLを指定することできちんとローカライズしたディレクトリにもアクセスができるようになります。

# 192.168.X.Y は各環境によって変わります。
$ hugo server [-D or -F] --bind 192.168.X.Y --baseURL http://192.168.X.Y

上記コマンドでhugoサーバーを起動することにより、LAN内の端末であればスマホであっても http://192.168.X.Y:1313 というURLでhugoプロジェクトのサイトにアクセスすることができます。

IPアドレス取得処理をshellで楽にする

これでLAN内の他端末からhugo serverで起動したページにアクセスできるようになりました。 しかし、ローカルIPアドレスはルーターによって自動付与されることが多く、毎回固定されているわけではないので都度調べるのは面倒です。 ルーターを設定してローカルIPを固定する方法もありますが、いずれにせよhugoサーバー起動時に毎回IPアドレスを入力するのは面倒です。

そこでshellを用いてこの処理を楽にしてみました。 また、ドラフト表示ON/OFFはよく指定するので引数指定できるようにしてあります。(何も指定がなければドラフトONの “-D”指定) ついでに –gc を毎回指定して環境をcleanにするようにしています。

Windows(Git for Windows)での運用

Windows環境はGit for WindowsのターミナルでHugoをコマンドライン実行しているので ipconfigを用います。 下のshellをコピペすれば皆さんの環境でも使えると思います。

やっているのはipconfigのIPv4 Address部分をawkコマンドで抽出しているだけです。 日本語環境の場合、「Address」が日本語表記で「アドレス」に変わっている場合があるので お使いの環境に合わせて都度変更してください。

#!/usr/bin/env bash -xe

# use can boot hugo server sh command as below
# sh bootlocal_win.sh [optional:-D or -F]

# -D(draft / default) or -F(Feature)
development=${1:-"-D"}

# extract local ip addr / Git for Windows only
local_ip=$(ipconfig | grep IPv4\ Address | awk '{print substr($0, index($0, "1"))}')
echo ""
echo "Use this Addr"
echo "http://${local_ip}:1313/"
echo ""

# boot hugo
hugo server ${development} --bind ${local_ip} --baseURL http://${local_ip} --gc

あとは上記shellを適当な名前、hugoプロジェクト内に保存しshを実行すればOKです。

$ cd [your_hugo_project]
$ sh win_boot.sh [-D or -F]

Mac/Linux等のコマンドでの運用

Mac環境も、同じようにshellを組みます。 「ipconfig」が「ifconfig」に変わったことと、該当アドレスを抜き出す際のコマンドがawkからcutに変わっていますが それ以外は殆ど変わっていません。

#!/usr/bin/env bash -xe

# use can boot hugo server sh command as below
# sh bootlocal_win.sh [optional:-D or -F]

# -D(draft / default) or -F(Feature)
development=${1:-"-D"}

# extract local ip addr / mac only
local_ip=$(ifconfig | grep "inet " | grep -v 127.0.0.1 | cut -d\  -f2)
echo ""
echo "Use this Addr"
echo "http://${local_ip}:1313/"
echo ""

# boot hugo
hugo server ${development} --bind ${local_ip} --baseURL http://${local_ip} --gc

こちらも同じく上記shellを適当な名前、hugoプロジェクト内に保存しshを実行すればOKです。

$ cd [your_hugo_project]
$ sh mac_boot.sh [-D or -F]