LAN内の他のPCからVagrantで構築した仮想マシンにアクセスする

近年はPCだけでなく、スマートフォンやタブレットなどでWebページを閲覧するのが当たり前になりました。

WebサイトやWebアプリケーションは、様々な機種でストレスなく利用できるよう求められています。

そのような背景から、ローカル開発環境においても、iPhoneやAndroidなどのモバイル端末からWebページを確認できれば便利ですよね。

Vagrantでは簡単な設定をすることで、他のクライアントマシンから仮想マシンへのアクセスが可能になります。

この記事では、その設定方法をまとめます。

設定：Vagrantfileを書き換えてブリッジ接続する

他のPCから仮想マシンにアクセスする簡単な方法として、ブリッジ接続を使用します。

ブリッジ接続とはいったいなんなのか

ブリッジ接続は、それぞれ異なるネットワークに属しているPC同士を通信できるようにする接続方法です。

ブリッジ接続

もともと異なるネットワークセグメント同士をソフトウェア処理またはハードウェアブリッジ装置によって接続することにより、同一のセグメントとして結合する手法である。

参考：Wikipedia

以下に例を挙げます。

PC甲とPC乙が有線LANで接続され、ネットワークに存在していました。

PC甲：192.168.1.5

PC乙：192.168.1.7

また、PC甲とPC丙は無線LANで接続され、別のネットワークに繋がっていました。

PC甲：192.168.11.10

PC丙：192.168.11.11

このとき

甲⇔乙

甲⇔丙

はアクセス可能ですが、乙と丙は通信ができません。

そこで、甲が橋渡し役となり、乙と丙をつなげます。

これがブリッジ接続です。

Vagrantで構築した仮想マシンは乙、仮想マシンをドライブしているPCが甲、他のPCが丙ですね。

Vagrantfileを書き換える

「Vagrantfile」は仮想マシンを構築したディレクトリ内にあります。

テキストエディタなどでこのファイルを開き、次のコードを書き加えます。

config.vm.network"public_network", ip: "192.168.1.20", bridge: "アダプタ名"

ここで記述するipのネットワークアドレスは、接続しているLANのアドレスと同じにします。

また、ホストアドレスは他のPCと被らないよう、違う値にします。

bridgeには使用したいネットワークインターフェイスを記入します。

アダプタ名の確認

Windowsの場合、コマンドプロンプトを開いて『ipconfig/all』と打ち込んでEnter。

ネットワークの情報が出力されます。使用したいアダプタの『説明』の項にアダプタ名が表示されます。

実践：他のPCからアクセスしてみる

他のデバイスのブラウザで、http://[設定したipアドレス]を打ち込んでアクセスしてみます。

例：http://192.168.1.3

スマートフォンからアクセスできました。

WordPressで作成したページにアクセスしてみる

仮想マシン内で確認用に導入したWordPress。そのページにスマートフォンでアクセスしてみます。

例：http://192.168.1.3/wordpress

IPアドレス以降はWordPressで設定したURLを打ち込みます。

あれれ～おかしいぞ。と。

画像を読み込んでくれませんでした。

WordPressのページを他のPCからちゃんと読めるように設定する

ワードプレスのダッシュボードから『設定』→『一般』と進み、URLをVagrantfileで設定したIPに変更します。

そのほか、画像パスを絶対指定している場合は、すべて相対パスに変更します。

もう一度アクセス。今度はうまくいきました。

まとめ

LAN内の他のPCからVagrantで構築した仮想マシンにアクセスする方法をまとめました。

これをやるのに数日費やしましたが、ブリッジ接続の概念やアダプタ名の確認方法など、広く学習できたのは僥倖でした。