スマホ端末からローカル環境にアクセス(Vagrant編)

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

案件によってPCサイトだけでなくスマートフォンサイトの構築も行うことがあると思います。Chromeデベロッパーツールを使ってデザイン確認もできますが、どうしてもスマートフォン端末からしか確認できないことも多々ありますよね。(androidとiOSのアドレスバーの表示方法がそれぞれ異なるので、ヘッダー部分の文字が隠れたり隠れなかったりなどいろんな不具合が出てきます)そこで今回は、Vagrantを使用しスマートフォン端末でローカル環境に接続して確認しなければならない状況があったので、その方法をメモとして残します。(Vagrantがインストールされていることを前提に書きます)

VagrantFileを編集(ポートフォワードの設定)

#Create a forwarded port mapping which allow access to a specific port
#within the machine form a port on the host machine. In the example below,
#accessing "localhost:8080" will access port 80 on the guest machine.
#config.vm.network "forwarded_port", guest: 80, host: 8080
+ config.vm.network "forwarded_port", guest:3000, host:3000 #この行を追加

vagrantを再起動

vagrant reload 

自分のPCのローカルipを調べる

$ ifconfig | grep 192
inet 192.168.24.204 netmask 0xffffff00 broadcast 192.168.24.255

接続確認

スマートフォン端末のブラウザからhttp://192.168.24.204:3000 にアクセスし完了