Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

どんな記事?

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

などで確認できるはず!

kurkuru
💼 Onebox株式会社でCTOをしています。 📧 yaritoriというメール共有サービスをつくっています。 👨‍💻 Go/React/Ruby/Java/PHP/React Native/IntelliJ IDEA 💬 twitterのDMから承っております。
https://yaritori.jp/
kojin-dev
kojin-devは個人開発者による、各々知見を共有するためのコミュニティです。
https://kojin-dev.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away