ローカル環境で開発中のスマホ向けRailsアプリを、実際にスマホの画面で動作確認するために「ngrok」を使用しました。
自分用のメモとしてngrok導入〜使用方法をまとめます。
まずはngrokのインストール
$ brew cask install ngrok
※caskがインストールされていないとエラーが出ます。
その場合、caskをインストールしてから上記コマンドを実行しましょう。
ngrokコマンドを実行
インストールが完了したら早速 ngrokコマンドを実行しましょう。
開発中アプリの起動ページのポート番号がhttp://localhost:3000の場合は次のようにコマンドを記入します。
$ ngrok http 3000
ターミナルにこのような結果が出ればコマンドは成功です。
実行結果からURLを取得しアクセスする
実行結果画面のForwardingにURLの記載があるので、httpsのURLをコピーしてブラウザのアドレスバーにペーストしアクセスします。
上記のようにアクセスがブロックされますが、画面の指示通りアクセスの許可を設定すればOKです。
config/environments/development.rbに以下を追記しましょう。
※記載するコードはブラウザに表示されたものをコピペしてください。
Rails.application.configure do
//中略
config.hosts << "1366147bc404.ngrok.io"
end
Railsアプリを起動済みの場合は、Ctrl＋Cで一度落としてからrails sで再起動して、先ほどのブラウザをリロードするとアクセスできるはずです。
QRコードを作成してスマホで読み込む
ここまで完了すれば先程のURLをスマホのブラウザに入力してアプリにアクセスできますが、URLをポチポチ打つよりQRコードを作成する方が楽です。
GoogleChromeとmacの組み合わせを例にすると、ブラウザ上で簡単にQRコードを作成することができます。
右クリックから「このページのQRコードを作成」を選択すると...
このように恐竜のマークのかわいいQRコードを作成できます。
他にも、以下のようなサイトを利用すれば無料ですぐにQRコードを作成できます。
https://qr.quel.jp/
作成したQRコードをスマホで読み込んでURLにアクセスしたら、ローカル起動のRailsアプリをスマホで動作確認することができます！
補足
この記事で紹介した「ngrok」は無料かつ登録無しでも使用できますが、その場合は一定の時間が経過するとアクセスできなくなってしまいます。
ちょっとした動作確認程度に使用するだけなら十分ですが、もっと使いたい人はユーザー登録してみても良いかと思います。