初心者さん
Nuxt.js(Vue.js)で開発している時にMac上のWindowsからローカル開発環境に接続したい
このような疑問をお持ちの方に向けて書いています。
Macユーザーは、開発中のWebシステムがWindowsで動いているのか確認したいですよね。
Nuxt.js(Vue.js)の設定を修正して簡単に確認できます。この後、解説していきます。
- Macの仮想環境VirtualBoxにWindowsをインストールし、ローカル環境に接続します
- Nuxt.js(Vue.js)のpackage.jsonの設定を変更
MacユーザーでWindowsで確認したい方、またはスマホで確認したい方も最後までご覧ください。
VirtualBoxのWindowsからMacのローカル開発環境に接続する
まずはローカル環境の準備からはじめます。準備ができたらMacで開発しているローカル環境にWindwosから接続してみましょう。
ローカル開発環境の準備
今回はDockerでVue.js（Nuxt.js）という環境で開発しているというのを前提に話を進めていきます。※DockerのインストールやNuxt.js(Vue.js)の準備は解説しません。
VirtualBoxとWindowsイメージをダウンロード
▼関連記事にはVirtualBoxとWindowsイメージのダウンロードについて書いているので準備してみてください。
の設定を修正して簡単に確認){kind=link}
VirtualBoxを立ち上げてWindowsを起動します。
MacのIPアドレスの確認
ターミナルで以下のコマンドを叩いてIPアドレスを確認しておきます。
ifconfig // 僕の場合は192.168.1.6
Nuxt.js側のpackage.jsonを編集
"dev": "nuxt --hostname localhost --port 3000" ↓↓↓ "dev": "nuxt --hostname 192.168.1.6 --port 3000"
localhostの部分を確認したIPアドレスに変更して起動
yarn run dev
WindowsのIEから接続してみる
実際にWindowsのIE、Edgeなどのブラウザで叩いてみましょう。
http://192.168.1.6:3000
これでMacと同じ画面が表示されたら成功です。
同様にスマホからも接続可能です。
まとめ
MacユーザーにとってWindowsでの確認は面倒ですね。
簡単な確認程度であれば、Windowsマシンを買うまでもないのでVirtualBoxで十分です。
上記の方法で確認してみてください。
おまけ
ちなみにRailsの場合は、cors.rbの設定を変更すると、VirtualBox上のWindowsからNuxtに接続しRialsAPIも叩けます。