外部からローカルホストのReactに接続する方法についてのメモです。
スマートフォンとパソコンが同じネットワーク配下であるときに限定されますが(自宅のwifi環境など)、スマートフォンの画面サイズに合うようにstyleを簡単に調整したいときに、役に立つと思います。
この方法であれば、スマートフォンで画面を確認しながら、デプロイすることなく、vscodeでstyleの調整ができます。
npm startで起動する場合
a. package.jsonを変更
package.jsonの"start"のところを下記に変更します。HOST=0.0.0.0にします。PORTは何でも可。
HOST=0.0.0.0と&&の間に空白を入れるとエラーになるようです。
package.json
"start": "set HOST=0.0.0.0&&set PORT=80&&react-scripts start",
b. npm startでReactを起動
c. パソコンのIPアドレスを確認
コマンドプロンプトでipconfigを実行し、パソコンのIPアドレスをメモします。(192.168.11.20など)
d. スマートフォンのブラウザにURLを入力
http://192.168.11.20:80 のように入力します。
serve -s buildで起動する場合
a. 下記を実行します。tcp://0.0.0.0にします。ポートは何でも可。
serve -s build -l tcp://0.0.0.0:80
Reactが起動するとvscodeのターミナルにURLが表示されるのでそれをメモします。
b. スマートフォンのブラウザにメモしたURLを入力
http://192.168.11.20:80 のように入力します。