最近個人開発アプリのレスポンシブ化を行いました。
デベロッパツールでも見れますが、実機でもちゃんと表示されるか確認したいですよね。そんな時に手軽にスマホアプリでも確認する方法を共有させて頂きます。
【環境】
- windows10 Pro
- Rails: 6.0.3.2
- ruby: 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-linux]
- Docker for windows
- MySQL 5.7
- nginx:1.15.8
手順
まず、PCとスマホを同じWiFiに繋ぎます。
その後、Windowsキー+Rを押し、cmdと入力します。
コマンドプロンプトを開くので、ipconfigと入力しエンターを押します。
イーサネット アダプター VirtualBox Host-Only Network:
(省略)
イーサネット アダプター VirtualBox Host-Only Network #2:
(省略)
イーサネット アダプター vEthernet (Extarnal Virtual Switch):
接続固有の DNS サフィックス . . . . .: flets-west.jp
IPv6 アドレス . . . . . . . . . . . .: 240xxxxxxxxxx
一時 IPv6 アドレス. . . . . . . . . .: 240xxxxxxxxxxxxxxxx
リンクローカル IPv6 アドレス. . . . .: xxxxxxxxxxxxxxxx
IPv4 アドレス . . . . . . . . . . . .: 192.168.1.193//この部分を覚えておく
サブネット マスク . . . . . . . . . .: xxxxxxxxxxxxxxx
デフォルト ゲートウェイ . . . . . . .: xxxxxxxxxxxxxxxxxxx
入力すると↑のように色々でてきますので、おそらくですが、仮想環境にDockerを使っている場合、イーサネット アダプター vEthernet (Extarnal Virtual Switch)と書いてある欄のIPv4のIPアドレスをスマホのブラウザから入力するとアクセスできると思います。
（例：3000番ポートを開放している場合、http://192.168.1.193:3000/ とすると、PCの開発環境にアクセスできます。）
開発環境が違う場合、他のIPアドレスを入力する必要があると思いますので、適時つながるアドレスを見つけてください！
最後まで読んでいただきありがとうございます！
このように日々学んだことをアウトプットしてます！少しでも皆様のお役に立てれば幸いです！ご指摘などあればコメントいただけますと嬉しいです！