

ローカルで作成したReactアプリを、他PCのブラウザから表示する設定方法を教えていただけますでしょうか。  
  
自身のPCでReactアプリを作成して、自身PC（ローカル）から起動する手順は学習しました。  
コマンドプロンプトを起動すると下記が表示されます。  

[code]

    Compiled successfully!
    
    You can now view login in the browser.
    
    Local:            http://localhost:3000
    On Your Network:  http://○○○.○○○.○○○.○○○:3000　　　★★★★←IPは○○○としています。
    
    Note that the development build is not optimized.
    To create a production build, use npm run build.
    
    webpack compiled successfully
    
[/code]

こちらの起動したReactアプリを他PCからブラウザで★★★★のURL（`http://○○○.○○○.○○○.○○○:3000`）を  
入れてもアプリが表示されません。

何か設定が必要かと思います。そちらの設定方法をご教授していただきたいと思います。  
よろしくお願いいたします。


CC BY-SA 4.0
2022-10-30T04:27:02.027
91896
2023-09-08T15:12:01.413
2022-10-30T06:08:02.557
55110
55110
question
reactjs
ローカルで作成したReactアプリを起動して、 他のPCのブラウザからアクセスして表示する設定方法について


最終的なローンチ方式の想定が不明ですが、一例として CRA の場合、以下ページに記述されているような「デプロイ」を行って公開するのが一般的です。

<https://create-react-app.dev/docs/deployment>

上記のページには設定内容や手順等も記載されていますので、一度ご確認いただいた上でより具体的な「最終的なローンチ方式」にそった質問いただくのが良さそうに思いました。


CC BY-SA 4.0
2022-10-30T09:53:45.397
91897
2022-10-30T09:53:45.397
16793
91896
answer


[昔のよくある説明](https://stackoverflow.com/a/53921344/4506703)だと、

[code]

    HOST=0.0.0.0 npm run start
    
[/code]

と`HOST`環境変数を設定した上で実行せよ、とあるようですが、少なくとも[最新バージョン(`5.0.1`)](https://github.com/facebook/create-
react-app/releases)から作成した場合では、単純に

[code]

    npm start
    
[/code]

で同一LANの別のPC/スマートフォンからも接続できました。  
つまり、基本的には質問者が行っている手順で問題なくアクセスできるはずです。

* * *

補足:

1.  
ファイアウォール設定(など)で外部からのアクセスを遮断している環境である場合、その設定を変更する必要があります。  
実行環境によって設定変更方法は異なりますので、これが原因である場合、質問者の実行環境を明示しなければ回答者が現れないかと思います。

2.  
起動時のメッセージ

[code]

    You can now view my-app in the browser.
    
      Local:            http://localhost:3000
      On Your Network:  http://192.168.56.1:3000
    
[/code]

に表示されているURL `http://192.168.56.1:3000` でアクセスできるとは限りません。

例えば私の環境だと、`npm start`
を実行しているPCには有線と無線、2つのネットワークインターフェースがありますが、実際にネットワークに接続しているのは無線の方だけです。  
`192.168.56.1` は有線インタフェースに割り当てられているアドレスなので、こちらを指定しても接続できません。  
無線インタフェースの方 `http://192.168.0.14:3000` を指定する必要がありますが、このアドレス `192.168.0.14`
は起動時の出力には現れません。  
自分で調べる必要がありますが、調べ方も実行環境により異なりますので、不明である場合はやはり質問者の実行環境情報の提示が必要です。


CC BY-SA 4.0
2022-11-01T17:39:22.983
91936
2022-11-01T17:39:22.983
2808
91896
answer


本質的な解決になってないかもしれないですが， ngrok を入れるのも手です

<https://ngrok.com/>

これは，ローカルホストで立てているサーバーを一時的にグローバルに出すツールで，スマホで Web アプリをデバッグするときなどに利用することがあります．

今回だと，これをインストールしたあと `ngrok http 3000` とすれば適当な URL が発行されて外からアクセスできるようになります

参考  
<https://www.geeklibrary.jp/counter-attack/ngrok/>


CC BY-SA 4.0
2023-09-08T15:12:01.413
96164
2023-09-08T15:12:01.413
58973
91896
answer