【Rails】開発中サイトをスマホ・タブレットなどの実機でリアルタイム確認する方法

2022年1月26日

Railsでサイトを開発中、スマホ・タブレットなどの実機で確認したいときはありますね。

わざわざテスト環境、ましてや本番環境にアップして確認などは大変で難しいです。

実は複雑な設定をしなくても簡単に確認できる方法があるのでまとめました。

実機で開発中のRailsサイトを確認する方法

確認方法はすごくシンプル。

PCとスマホ（タブレット）を同じWi-Fiに接続する
PCが利用しているIPアドレスを確認
確認した番号でホストを指定して開発環境のサーバーを再起動

たったこれだけです。

詳しく手順をまとめていきますね。

PCとスマホ（タブレット）を同じWi-Fiに接続する

文字通り接続しているWi-Fiを同じにするだけなので、問題は無いと思います。

PCが利用しているIPアドレスを確認

Wi-Fiの接続設定にてPCが利用しているホスト番号を確認します。

Macの確認方法

画面右上のWi-Fiマークをクリックし「ネットワーク環境設定」に進みます。

Wi-Fiの詳細画面に出ている、赤枠部分の番号を確認してください。
192.XXX.X.XXの形式の数字が表示されているはずです。

Windowsの確認方法

コマンドプロンプトを起動してください。

$ ipconfig

IPv4アドレスが表示されるので、その番号を控えておいてください。

確認した番号でホストを指定して開発環境のサーバーを再起動

最後にホストを指定してRailsのサーバーを起動します。

もしサーバーを起動中であればControl + Cで終了してください。

先ほど確認できたIPアドレスが192.111.2.333だった場合は以下のコマンド。

$ rails server -b 192.111.2.333
もしくは
$ rails s -b 192.111.2.333

以下のようにメッセージが出てサーバーが起動するはずです。

=> Booting Puma
=> Rails 6.1.4.1 application starting in development 
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.5.0 (ruby 2.7.4-p191) ("Zawgyi")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 98249
* Listening on http://192.111.2.33:3000
Use Ctrl-C to stop

Listening on http://192.111.2.33:3000となっていますので、スマホ（タブレット）でhttp://192.111.2.33:3000にアクセスすればOK。

これで開発中のサイトが確認できます。