LAN内PCのサブドメインにアクセスする方法（Nginx + xip.io）

LAN内のサブドメインにアクセスするには xip.io という便利ドメインと、Nginxの server_name に xip.io のURLを入れればいいのですよー、というメモ。

LAN内のサブドメインにアクセスするには……？

サイト制作のためにローカルPC内にサブドメインを作って確認することがよくあります。しかしスマホから確認する時にサブドメインを使う方法がわかりませんでした。

仕方なくディレクトリ指定で確認しているのですが、Wordpressの確認ができずに困っていました。

# ローカルPCでの確認
http://hoge.localhost/wordpress/

# スマホから確認
# エラーになる
http://localhost/hoge/wordpress/

xip.io を使うとLAN内PCのサブドメインにアクセスできる

xip.io という便利ドメインを使うと、http://サブドメイン + IPアドレス + xip.io/ でアクセスできます。

≫iOS シュミレータ・実機からローカルの開発サーバに繋いで開発する

Nginxのサーバー設定で server_name に追記する

すでにローカル環境でサブドメインにアクセスできている前提で話を進めます。

Nginxのサーバー設定ファイルを編集します。
環境によりますが、/usr/local/etc/nginx/servers/あたりにあると思います。

localhost 設定の後ろに xip.io の設定を追加します。

server.conf

server{
  listen       8080;
  # server_name  hoge.localhost; ←変更前
  server_name  hoge.localhost hoge.192.168.0.100.xip.io;

Nginxの設定リロードを忘れずに。

# sudo nginx -s reload

• ローカルPCのIPアドレスは192.168.0.100と仮定しています。
• Apacheと共存するためポートは8080にしています。
• hosts は特に変更していません。

サブドメイン + IPアドレス + xip.io でアクセス

# ローカルPCでの確認
http://hoge.localhost:8080/wordpress/

# スマホから確認
# xio.io がIPアドレスを返してくれる
http://hoge.192.168.0.100.xip.io:8080/wordpress/

以上の設定でLAN内PCのサブドメインにアクセスできます。

DHCPを使っている場合は、再起動したときにIPアドレスが変わる可能性がありますので注意してください。