0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Reactアプリケーションをスマホで動作確認するための手順

Posted at

ゴール

レスポンシブ対応などのテストのため、スマホを用いてReactアプリケーションを表示したい。

前提条件

・デザリングができるスマホがあること
・PCはWindowsPCを想定(Linuxの場合は各種設定やコマンドをLinuxに置き換えてください)

手順

1.

PCとスマホをデザリングする。

2.

PC側の外部からのNode.jsアプリケーションの受信許可設定を行う。

「コントロールパネル」⇒「システムとセキュリティ」⇒「Windowsファイアーウォール」
image.png

「許可されたアプリ一覧」にNode.jsがありますが、チェックを入れて許可する。

3.

Reactプロジェクトを下記コマンドで開始する。

$env:HOST="0.0.0.0"; npm start

上記コマンドで起動する(同じLAN上のインターフェースを全て許可する。)

プロジェクト起動後は下記コマンドで確認

netstat -ano | findstr :3000

image.png

4.

スマホ側でReactプロジェクト起動時に表示されたIPアドレスをブラウザで入力

image.png

無事表示されたら成功(自分は成功でした)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?