アプリサービス

コミット前に!本番公開前に!VMwareでWindowsブラウザを簡単にローカルチェックする方法

コーディング時のブラウザ検証がラクになる方法をご紹介します。ホスト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がありますが、どちらかを使っている方が多いのではないでしょうか。

VMwareはいくつかシリーズがあり、個人用で簡単に仮想環境が作れるシリーズは「VMware Fusion」というものになります。ソフト有料で1万円程度ですが、仮想環境構築がとても簡単ですのでおすすめです。

肝心のWindowsOSはマイクロソフトからIEのテスト用に無料で使えるOSイメージが公開されています。

わざわざWindowsOSを購入しなくてもよいのでとてもありがたいですね。

ここに公開されているので、環境に合わせてダウンロードしてください。
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

VMwareのインストール手順はこちらが参考になりますよ

それではvmware fusionをインストールし、Windowsを起動できる状態まで整っていることを前提に話を進めていきます。

ローカル環境はdockerで構築しよう

以前ご紹介しましたが、ローカルの開発環境はdockerで構築するとものすごく便利です。XAMMPやMAMPを使っている方はぜひdockerに乗り換えてみてください。

[st-card id=1479 label=” name=”]

[st-card id=1515 label=” name=”]

dockerのDAMPで開発環境を構築すると、ローカル環境上で◎◎.testというドメインを利用することが出来るようになります。

このドメインが使えるようになることで、Vmware上でも同じようにホストOS(Mac)側のページを確認することができます。

ローカルホストのIPアドレスを調べる

ホストOS(Mac)でターミナルを起動してifconfigコマンドを打ちましょう。

ここで「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にコミットする前、サーバーに直接アップロードする前にすぐにブラウザチェックできる環境があるととても作業の時短になりますので、是非準備しておきましょう。

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です