ngrokを使用してlocalhostをスマホで開く方法
2021年11月25日
対象
今回はmacユーザーに限った内要です。
開発をしているとスマホ端末での依存性のあるバグや表示の崩れがあることが多々あります。
今回はそれを確認する方法を説明していきます。
ngrokをinstallする
ngrokをinstallする前にHomebrewをinstallする必要があります。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
HomebrewはmacOS(またはLinux)用のパッケージマネージャーです。
installするとbrewコマンドが使えるようになります。
brew install ngrok
次にngrokをinstallします。
localholtを立ち上げる
次に開発端末でlocalhostを立ち上げます。
この時にlocalhostで立ち上げたポート番号を確認します。
大体3000や8000あたりでしょうか。
ngrokでlocalhost環境を作る
ngrok http 3000
自分の場合は3000だった為、こちらでngrokを立ち上げます。
下記のような形になると思います。
ngrok by @inconshreveable (Ctrl+C to quit)
Session Status online
Version 2.3.40
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://3eb3-2405-6582-320-2f00-a9a6-4ed0-2c50-e7e8.ngrok.io -> http://localhost:3000
Forwarding https://3eb3-2405-6582-320-2f00-a9a6-4ed0-2c50-e7e8.ngrok.io -> http://localhost:3000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
下記の部分の.ioまでをコピペしてスマホに貼り付けるとlocalhostと同じ環境が開ます！
Forwarding https://3eb3-2405-6582-320-2f00-a9a6-4ed0-2c50-e7e8.ngrok.io -> http://localhost:3000
お疲れさまでした！