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も叩けます。

当サイトで申込の多いプログラミングスクール

TechAcademyの無料体験
マンツーマンでオリジナルアプリの作成ができるテックアカデミーは人気が高いプログラミングスクール。
Webエンジニア輩出実績トップクラスの【ポテパンキャンプ】
転職に強く本気でエンジニア転職を目指す人におすすめ。難易度が高いため身につくスキルも高く企業からの評価も高いのが特徴。
CodeCamp無料体験
講師を選択できるのが特徴のコードキャンプ。チャットでの質問ができないと言われていますが、オプションでチャットサポートを選択できるのがあまり知られていない。講師の評判が高いため質問しながらどんどん進みたい人向け。