簡単localhost:3000をスマホ(iPhone)でも確認する方法

 スマホ(iPhone)でローカル環境を見ることが出来る

 きっかけ

週末はRubyOnRailsをつかってアプリケーションの構築を学習もしています。

Railsアプリ開発中に、ターミナル画面からrails sを利用して、Web画面での見え方を確認することはあったのですが、スマホからローカル画面の見え方を確認したいと思い調べることにしました。


1.同じWi-FiでPC(Mac)とスマホ(iPhone)を接続する

最初に自分は、PCを5Gで、スマホを2Gを選択していたため、接続できなかったことはここだけの話し。

・PCでの画面
スクリーンショット 2021-07-11 9.23.31.png

・スマホ(iPhone)での画面
スクリーンショット 2021-07-11 9.28.44.png


2.PC(Mac)のIPアドレスを確認する

1.システム環境設定を選択する
スクリーンショット 2021-07-11 9.39.40.png

2.ネットワークを選択する
スクリーンショット 2021-07-11 9.40.07.png

3.IPアドレスの確認
スクリーンショット 2021-07-11 9.40.19.png


3.PC(Mac)のターミナルで『bundle exec rails s -b XXX.XXX.XXX.XXX』を打ち込んででサーバを起動する

スクリーンショット 2021-07-11 10.07.52.png

※『Rails s』で起動している記事もありました。自分の場合は『bundle exec』がないと、スマホでは見ることが出来ませんでした。RailsのPathの都合かと思っています。


4.スマホ(iPhone)で 【IP:ポート番号】 にアクセスする

ローカル環境を確認することが出来れば完了です
スクリーンショット 2021-07-11 10.21.02.png


 おわりに

振り返ると、なぜ「今までスマホ(iPhone)をつかって確認する」ということをしなかったのか不思議に思います。当たり前を改めて定義するというのでしょうか?こうやって改めて見直していくことが学習の面白みなのかもしれないと感じました。
能書きはさておき、これでレスポンシブの状況を実機で直ぐに確認できるのは嬉しいすぎる。是非とも皆さんの開発ライフが捗ればいいかと存じます。


参考記事

Qiita記事【localhost をスマホ実機で確認する方法】
Qiita記事【localhostにスマホから繋げてみた!!(Mac編)】
Qiita記事【bundle execって必要なの?】

Last modified: 2021-07-11

Author