Vagrantで立ち上げたWebサーバにiPhoneやAndroidからアクセスする。

どんな記事？

Vagrant(ゲストOS)上のWebサーバへは、立ち上げているPC（ホストOS）からしかアクセスができない。
これだと、iPhoneやAndroidなどの実機確認を行う際に困るので、その解決策を調べました。

参考にした記事

Vagrant + VirtualBoxで仮想環境側のポートをあける

環境

ホストOS

• Mac OS X EL Capitan 10.11.6

ゲストOS

• Vagrant 1.8.4
• centos6.7

LAN

• iPhoneのテザリングでPCから無線で接続し、iPhoneとPCを同一LAN内に置く。（同一LAN内であれば他の環境でもOKと思われます。）

やること

• ポートフォワードを設定
• ファイアウォールを設定（必要であれば）
• iPhone/Androidで確認！

ポートフォワードを設定

Vagrantfileにネットワークポートフォワード設定を追記する

config.vm.network :forwarded_port, host: 3000, guest: 3000

Vagrantfile

Vagrant.configure("2") do |config|
  config.vm.box = "centos6.7"

  # Create a forwarded port mapping which allows access to a specific port
  # within the machine from 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, host: 3000, guest: 3000

ファイアウォールを設定（必要であれば）

iptablesが動作していない場合はこの項は不要
iptablesが動いているか確認

[vagrant@localhost ~]$ sudo service iptables status
iptables: Firewall is not running.

もし動いていて、iptablesを切りたい場合

[vagrant@localhost ~]$ sudo service iptables stop
iptables: Setting chains to policy ACCEPT: filter          [  OK  ]
iptables: Flushing firewall rules:                         [  OK  ]
iptables: Unloading modules:                               [  OK  ]

iptablesが動作している場合は、以下のように該当のポートを開く。

/etc/sysconfig/iptablesに
-A INPUT -p tcp -m tcp --dport #{該当のポート番号} -j ACCEPT
を追記する。

例）Railsなどデフォルトで3000番ポートのアプリの場合は
-A INPUT -p tcp -m tcp --dport 3000 -j ACCEPT
となるため、以下のような記載となる。

# Firewall configuration written by system-config-firewall
# Manual customization of this file is not recommended.
*filter
:INPUT ACCEPT [0:0]
:FORWARD ACCEPT [0:0]
:OUTPUT ACCEPT [0:0]
-A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
-A INPUT -p icmp -j ACCEPT
-A INPUT -i lo -j ACCEPT
-A INPUT -m state --state NEW -m tcp -p tcp --dport 22 -j ACCEPT
-A INPUT -p tcp -m tcp --dport 3000 -j ACCEPT
-A INPUT -j REJECT --reject-with icmp-host-prohibited
-A FORWARD -j REJECT --reject-with icmp-host-prohibited
COMMIT

変更を読み込ませるため、iptablesを再起動

[vagrant@localhost ~]$ sudo service iptables restart
iptables: Setting chains to policy ACCEPT: filter          [  OK  ]
iptables: Flushing firewall rules:                         [  OK  ]
iptables: Unloading modules:                               [  OK  ]
iptables: Applying firewall rules:                         [  OK  ]

ここまでで設定は完了。

確認

MacなどのホストOSのIPを調べる。

mac-user:13:18:21 test_dir $ifconfig

これで同一LAN内にあるiPhoneのsafariやAndroidのChromeなどで
ip:{port}と打ち込めば表示される。

例
ホストOSのIPが192.168.10.0でVagrant上でWebサーバを3000番ポートで立ち上げている場合

192.168.10.0:3000

などで確認できるはず！