コーディング時のブラウザ検証がラクになる方法をご紹介します。ホストOS(Mac)のローカル環境のコンテンツをゲストOS(Win)でも同様にローカルチェックできちゃいます。VMwareとdockerと組み合わせれば鬼に金棒の最強ツールですよ！
コミットや本番公開する前にローカル環境でブラウザ検証したい
自マシンのローカル環境でコーディングしたものを、ブラウザ検証しますよね。
そのときに、Macであればsafari、Chrome、Firefoxなどモダンブラウザのチェックは簡単ですが、Windowsブラウザ（IE、Edge）をチェックするのに便利なのがVMwareです。
MacをホストOS、WindowsをゲストOSとして、VMwareを使いMac内でWindowsを起動します。
本番に公開されているものをVMware上で確認することは簡単ですが、開発者としてはそうはいきません。
ローカル環境で制作したページや動的サイトを公開前にWindowsブラウザ検証したい場合は、一工夫することでVmwareでもページ確認をすることができます。
「VMware」とは
Mac 環境で Windows を実行する仮想環境を構築するソフトウェアです。他にも人気のあるソフトとしてVirtualBoxがありますが、どちらかを使っている方が多いのではないでしょうか。
[blogcard url=”https://eng-entrance.com/vm-list”]
VMwareはいくつかシリーズがあり、個人用で簡単に仮想環境が作れるシリーズは「VMware Fusion」というものになります。ソフト有料で1万円程度ですが、仮想環境構築がとても簡単ですのでおすすめです。
肝心のWindowsOSはマイクロソフトからIEのテスト用に無料で使えるOSイメージが公開されています。
わざわざWindowsOSを購入しなくてもよいのでとてもありがたいですね。
ここに公開されているので、環境に合わせてダウンロードしてください。
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
VMwareのインストール手順はこちらが参考になりますよ
[blogcard url=”https://pc-karuma.net/vmware-fusion-download-install/”]
それではvmware fusionをインストールし、Windowsを起動できる状態まで整っていることを前提に話を進めていきます。
ローカル環境はdockerで構築しよう
以前ご紹介しましたが、ローカルの開発環境はdockerで構築するとものすごく便利です。XAMMPやMAMPを使っている方はぜひdockerに乗り換えてみてください。
[st-card id=1479 label=”関連” name=”” bgcolor=”” color=”” readmore=”on”]
[st-card id=1515 label=”関連” name=”” bgcolor=”” color=”” readmore=”on”]
dockerのDAMPで開発環境を構築すると、ローカル環境上で◎◎.testというドメインを利用することが出来るようになります。
このドメインが使えるようになることで、Vmware上でも同じようにホストOS(Mac)側のページを確認することができます。
ローカルホストのIPアドレスを調べる
ホストOS(Mac)でターミナルを起動してifconfigコマンドを打ちましょう。
〜中略〜
flags=8051<UP,POINTOPOINT,RUNNING,MULTICAST> mtu 2000
inet6 fe80::cf12:c2fc:8c41:a988%utun0 prefixlen 64 scopeid 0xb
nd6 options=201<PERFORMNUD,DAD>
vmnet1: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
ether 00:50:56:c0:00:01
inet 192.168.102.1 netmask 0xffffff00 broadcast 192.168.102.255
vmnet8: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
ether 00:50:56:c0:00:08
inet 192.168.44.1 netmask 0xffffff00 broadcast 192.168.44.255
ここで「vmnet8」の項目を確認します。
私の環境ではinet 192.168.44.1となっているところが仮想環境で動くゲストOS(Win)のローカルホストIPアドレスということになります。
VMware側でホストファイルを設定する
IPアドレスとドメインを一致させるためにhostsファイルをいじります。
ホストOS(Mac)側のlocalhost:8080は127.0.0.1です。VMwareのゲストOS側から同じ場所を見る192.168.44.1をアドレスに入れると確認することができます。
しかしこのままではdocker-DAMPで設定した◎◎.testのドメインがVMwareのゲストOS(Win)側からアクセスできないため、ゲストOS(Win)内のhostファイルに追記します。
## For docker -damp##
192.168.44.1 ◎◎.test
保存して再度VMwareのゲストOS(Win)側のブラウザから◎◎.testにアクセスしてみてください。
するとホストOS側のローカルコンテンツが見事に確認できていると思います。
コーディング時のブラウザチェックは意外と面倒なものですよね。とくにOSをまたぐブラウザチェックは手間がかかります。Gitにコミットする前、サーバーに直接アップロードする前にすぐにブラウザチェックできる環境があるととても作業の時短になりますので、是非準備しておきましょう。
番外: Parallels Desktopを使う場合
仮想環境をParallels Desktopで構築する場合は、macのターミナルでifconfigで情報を確認し、vnic0の項目でinetの隣の値がIPアドレスになります。(大抵は10.211.55.2です)
