ローカルネットワーク内で開発中のGatsbyのスマフォなどで動作確認する方法

はじめに

実際のスマフォなどで開発中のGatsbyのサイトを確認する方法を提示する

前提条件

gatsby: 2.19.2

macで動作確認しているため開発マシンのIPアドレスの取得は各OSごとに違う場合がある

開発マシンのIPアドレス取得

ifconfigコマンドでipアドレス取得

> ifconfig
.
..
...
en0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
	options=400<CHANNEL_IO>
	ether xx:xx:xx:xx:xx:xx
	inet6 fe80::18e8:b8eb:c36b:8185%en0 prefixlen 64 secured scopeid 0x6
	inet 192.168.1.xxx netmask 0xffffff00 broadcast 192.168.1.255
	nd6 options=201<PERFORMNUD,DAD>
	media: autoselect
	status: active
...
..
.

上記のがLAN内のIPアドレスが192.168.1.xxxだとわかる

Gatsbyの開発モードに-Hオプションを付ける

ホスト指定のオプションで0.0.0.0をつけてあげる

-H, --host	Set host. Defaults to localhost
ref: https://www.gatsbyjs.org/docs/gatsby-cli/

> gatsby develop -H 0.0.0.0

Gatsbyの開発モードが動いている端末にスマフォからアクセス

これでlocalhost:8000で起動していることを確認したら、LAN内のWifiにつながっているスマフォのブラウザで
先程取得したIPアドレスを元に、デフォルト8000ポートで動いているGatsbyの開発モードが動いている端末にアクセスすることができる

http://192.168.1.xxx:8000