GatsbyJSのローカル環境をスマホやタブレットから確認する方法

技術


GatsbyJSでの開発はPCで進めていくことになると思います。

ローカル環境で確認するわけですが、スマホやタブレットからの表示気になりますよね。

都度本番環境にアップするのはちょっとこわい……。

今回はそんな悩みを解決するGatsbyJSのローカル環境を開発しているPC以外から確認する方法です。

PCとつなぎたい端末を同じネットワークに接続する

ローカル環境のため、同じネットワークに繋がっていないと、見つけることができません。

Wi-Fiの同じSSIDに接続するなど、接続先のネットワークを揃えましょう。

gatsby developのオプションを設定する

GatsbyJSのdevelopコマンドにオプションを追加します。

gatsby develop -H 0.0.0.0
オプション説明
-Hホストを指定するオプション。0.0.0.0はローカルホスト上の全てのアドレスを意味する。

serveでも同様のオプションが指定します。

PCのIPアドレス確認

つぎに、PCのIPアドレスを確認します。

下記コマンドを実行

ipconfig

出力された情報のIPv4 アドレスがPCのローカルIPアドレスです。

イーサネット アダプター イーサネット:

   メディアの状態. . . . . . . . . . . .: メディアは接続されていません
   接続固有の DNS サフィックス . . . . .:

Wireless LAN adapter ローカル エリア接続* 1:

   メディアの状態. . . . . . . . . . . .: メディアは接続されていません
   接続固有の DNS サフィックス . . . . .:

Wireless LAN adapter ローカル エリア接続* 2:

   メディアの状態. . . . . . . . . . . .: メディアは接続されていません
   接続固有の DNS サフィックス . . . . .:

Wireless LAN adapter Wi-Fi:

   接続固有の DNS サフィックス . . . . .:
   IPv6 アドレス . . . . . . . . . . . .: hogehoge
   一時 IPv6 アドレス. . . . . . . . . .: hogehoge
   リンクローカル IPv6 アドレス. . . . .: hogehoge
   IPv4 アドレス . . . . . . . . . . . .: 100.64.1.xx
   サブネット マスク . . . . . . . . . .: 255.255.252.0
   デフォルト ゲートウェイ . . . . . . .: hogehoge
                                          100.64.1.1

イーサネット アダプター Bluetooth ネットワーク接続:

   メディアの状態. . . . . . . . . . . .: メディアは接続されていません
   接続固有の DNS サフィックス . . . . .:

つなぎたい端末から接続

スマホやタブレットなど、つなぎたい端末からブラウザを起動します。

PCのIPv4アドレスが100.64.1.xxだった場合、http://localhost:8000は次のように読み替えます。

http://100.64.1.xx:8000

PCのIPアドレス:ポート番号です。

つながらないときに確認したいこと

ここまでやってつながらない場合は、ファイアウォールの設定を確認してください。

  • PCが同一ネットワークの他の端末から見つからない設定になっていないか
  • セキュリティソフトでPCへの接続がはじかれていないか

特に、PCでIPアドレス指定でつながるのに、スマホやタブレットからつながらない場合はファイアウォールの設定による可能性が高いです。ご確認ください。

sake

現役システムエンジニア。
普段はホスト系のお仕事してます。
ブログでは主にWeb関係の技術について、勉強したことや実際にコーディングしてみた内容を発信していきます。

プロフィール