Railsアプリの開発環境サーバーをpuma-devに変更しスマホからもアクセスできるようにしたい

ご挨拶

各位、いつもたいへんお世話になっています。
先日、ようやくRailsTutorialの成果物を皆様のおかげで完成させることができ、その後も拡張機能を実装したりレイアウトを変更したり遊びながら、秋の夜長を楽しんでいる次第です。

そんな中、当アプリに於いてはせっかくBootstrapを利用しているのだからスマホレイアウトも色々いじってみたいと思い立ち、こちらの記事を参考にレスポンシブ・レイアウトを実装し修正して行こうとしたのですが、ここで一つ問題が発生しました。

問題とは

スマホからではlocalhost:3000にアクセスできない
その為、herokuに挙げてからでしかスマホではレイアウトを確認できない

セルフ対応

いい感じの便利なやつがないかggl it
するとpowといういい感じのやつがあるらしいと認知する
さらにgglと時代はpuma-devらしいと知る
よし、早速入れてみようと思い立ち、以下の記事群を参考に導入してみる

躓き a.k.a. 立ちはだかる壁

導入までは手順通りに順調に進んだものの、いざpuma-devで起動しURLにアクセスしても空のエラーページに遷移する
エラーメッセージはNo application configured, nothing to run
URLはhttp://tumatter-app.test/ / http://tumatter-app.test:+ その都度ターミナルに表示されているポート番号
tail -f ~/Library/Logs/puma-dev.logにてログを確認↓↓

! Detecting app 'tumatter-app' dying on start
! Booting app 'tumatter-app' on socket /Users/nasa/.puma-dev/tumatter/app/tmp/puma-dev-663.sock
tumatter-app[4160]: Puma starting in single mode...
tumatter-app[4160]: * Version 3.9.1 (ruby 2.3.1-p112), codename: Private Caller
tumatter-app[4160]: * Min threads: 0, max threads: 5
tumatter-app[4160]: * Environment: development
tumatter-app[4160]: ERROR: No application configured, nothing to run
! Killing 'tumatter-app' (4160)
* App 'tumatter-app' shutdown and cleaned up
! Detecting app 'tumatter-app' dying on start
! Booting app 'tumatter-app' on socket /Users/nasa/.puma-dev/tumatter/app/tmp/puma-dev-663.sock
tumatter-app[4321]: Puma starting in single mode...
tumatter-app[4321]: * Version 3.9.1 (ruby 2.3.1-p112), codename: Private Caller
tumatter-app[4321]: * Min threads: 0, max threads: 5
tumatter-app[4321]: * Environment: development
tumatter-app[4321]: ERROR: No application configured, nothing to run
! Killing 'tumatter-app' (4321)
* App 'tumatter-app' shutdown and cleaned up
! Detecting app 'tumatter-app' dying on start
! Booting app 'tumatter-app' on socket /Users/nasa/.puma-dev/tumatter/app/tmp/puma-dev-663.sock
tumatter-app[4452]: Puma starting in single mode...
tumatter-app[4452]: * Version 3.9.1 (ruby 2.3.1-p112), codename: Private Caller
tumatter-app[4452]: * Min threads: 0, max threads: 5
tumatter-app[4452]: * Environment: development
tumatter-app[4452]: ERROR: No application configured, nothing to run
! Killing 'tumatter-app' (4452)
* App 'tumatter-app' shutdown and cleaned up
! Detecting app 'tumatter-app' dying on start

DNSサーバーをアップデートしなければならないと#3の参考記事に記載があったので、OS X で DNS キャッシュをリセットするを元にコマンドsudo killall -HUP mDNSResponderを実行してみる

さりとて

以上の処置を実施しましたが、現状変化はありません。
ブラウザではエラーページに遷移し、同一Wi-Fiに接続したスマホのブラウザからアクセスしてもアクセスできない旨が表示されます。

皆様、何かお気づき、もしくはここが怪しいと思われる箇所等がございましたらご指導ご鞭撻のほどをよろしくお願いします。

自己解決方法

link -nにてシンボリック登録したアプリ名が間違っていたようでPCからは登録アプリ名.testにてpuma-devを利用した開発サーバーの起動・稼働を確認できました。

行動規範の内容に同意します

回答1件

ベストアンサー

開発環境でスマホ用のレイアウトを確認したい、ということですよね。
Webブラウザの画面サイズをスマホサイズに縮小してチェックする、という方法ではどうでしょうか？
サイズ参考リンク

もしくはPC自体のIPアドレス宛にスマホからアクセスする、という方法でも可能だと思います。
Qiita

RailsアプリがPC（もしくはクラウド）に保存されている時に、
スマホからlocalhost:3000にアクセスしてもPCで起動しているRailsアプリのWebサーバにアクセスすることはできません。
http://localhost/というのは**自分自身の**ローカルサーバにアクセスする、ということなのですから。
スマホでlocalhost:3000にアクセスするのであれば、スマホ自身のローカルサーバにアクセスすることになります。
そしておそらく、nuasKentさんのスマホには対象のRailsアプリが入っていません（Webサーバも起動してないと思います）。
なのでlocalhost:3000にアクセスしても目的のRailsアプリにアクセスすることはできないことになります。

投稿2018/10/19 07:50

troch

総合スコア349

nuasKent

2018/10/21 03:57

ご回答ありがとうございます。サイズ参考リンクを参照し、Chromeの開発者モードで調節しました。思えば開発者モードでレイアウトを確認すればよかったですね... PCが接続されているIPにアクセスする方法は試してみたのですが、(ifconfigのen0）には拒否されてしまいました。それと >> スマホからではlocalhost:3000にアクセスできないこの質問は少し誤解を招く形となってしまいました。参考記事#1.と#2.にあげたようにIPアドレスを使った`xip.io`のドメインでスマホからアクセスできないのがそもそもの問題解決をしたかったテーマでした。またそれは、`ngrok`を使うことでスマホからもアクセスできように環境を構築できました！親切な助言ありがとうございました????????????????????????????????

行動規範の内容に同意します