Mac上のWindowsからローカル開発環境に接続

プログラミング

Nuxt.js(Vue.js)で開発している時にMac上のWindowsからローカル開発環境に接続したい

今回は、このような悩みを解決します。

Macユーザーは、開発中のWebシステムがWindowsで動いているのか確認したいですよね。

Nuxt.js(Vue.js)の設定を修正して簡単に確認できます。この後、解説していきます。

  1. Macの仮想環境VirtualBoxにWindowsをインストールし、ローカル環境に接続します
  2. Nuxt.js(Vue.js)のpackage.jsonの設定を変更

MacユーザーでWindowsで確認したい方、またはスマホで確認したい方も最後までご覧ください。



目次

  1. VirtualBoxのWindowsからMacのローカル開発環境に接続する
    • ローカル開発環境の準備
    • VirtualBoxとWindowsイメージをダウンロード
    • MacのIPアドレスの確認
    • Nuxt.js側のpackage.jsonを編集
    • WindowsのIEから接続してみる
  2. まとめ

VirtualBoxのWindowsからMacのローカル開発環境に接続する

nuxt

まずはローカル環境の準備からはじめます。準備ができたらMacで開発しているローカル環境にWindwosから接続してみましょう。

01ローカル開発環境の準備

今回はDockerでVue.js(Nuxt.js)という環境で開発しているというのを前提に話を進めていきます。※DockerのインストールやNuxt.js(Vue.js)の準備は解説しません。

02VirtualBoxとWindowsイメージをダウンロード

▼関連記事にはVirtualBoxとWindowsイメージのダウンロードについて書いているので準備してみてください。

VirtualBoxを立ち上げてWindowsを起動します。

03MacのIPアドレスの確認

ターミナルで以下のコマンドを叩いてIPアドレスを確認しておきます。

ifconfig
// 僕の場合は192.168.1.6

04Nuxt.js側のpackage.jsonを編集

"dev": "nuxt --hostname localhost --port 3000"
 ↓↓↓
"dev": "nuxt --hostname 192.168.1.6 --port 3000"

localhostの部分を確認したIPアドレスに変更して起動

yarn run dev

05WindowsのIEから接続してみる

実際にWindowsのIE、Edgeなどのブラウザで叩いてみましょう。

http://192.168.1.6:3000

これでMacと同じ画面が表示されたら成功です。

同様にスマホからも接続可能です。

まとめ

MacユーザーにとってWindowsでの確認は面倒ですね。

簡単な確認程度であれば、Windowsマシンを買うまでもないのでVirtualBoxで十分です。

上記の方法で確認してみてください。

おまけ

ちなみにRailsの場合は、cors.rbの設定を変更すると、VirtualBox上のWindowsからNuxtに接続しRialsAPIも叩けます。


当サイト申し込みが多いプログラミングスクール

人気があるプログラミングスクールには、理由があります。

気になった方は候補に含めてみてください。