0

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

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

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

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

5
  • 「(起動してあるアプリに) 他のPCからアクセスする」と「他のPCから起動する」では意味合いが異なります。実際に必要としているのは前者のように見えますが、質問やタイトルを今一度見直してみてください。
    – cubick
    Commented 2022年10月30日 5:40
  • 「サーバ上で上記のアプリは起動できました」のサーバーとは何ですか?
    – WebSurfer
    Commented 2022年10月30日 5:57
  • >WebSurfer様 コメントありがとうございます。 「サーバ」が混乱させてしまいました。申し訳ございません。  サーバは自身のPCです。  実際に使用するサーバです。この中にReactアプリを作成して  利用者が自身のPCからアクセスして使用する運用を予定しています。  ※通信が可能であることは確認済です。
    – tomo kuma
    Commented 2022年10月30日 6:11
  • 1
    >cubick様  コメントありがとうございます。  前者であり、起動しているアプリを他PCからのブラウザで表示します。
    – tomo kuma
    Commented 2022年10月30日 6:12
  • 「サーバは自身のPC」とのことですが、その PC の OS は何ですか? Windows ですとエディションによっては IIS という Web サーバーを利用できますが、であれば、To create a production build, use npm run build. とあるように作成した production build を IIS にデプロイするという話になると思いますけど。
    – WebSurfer
    Commented 2022年10月30日 23:13

3 件の回答 3

1

昔のよくある説明だと、

HOST=0.0.0.0 npm run start

HOST環境変数を設定した上で実行せよ、とあるようですが、少なくとも最新バージョン(5.0.1)から作成した場合では、単純に

npm start

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


補足:

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

2.
起動時のメッセージ

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.56.1:3000

に表示されている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 は起動時の出力には現れません。
自分で調べる必要がありますが、調べ方も実行環境により異なりますので、不明である場合はやはり質問者の実行環境情報の提示が必要です。

0

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

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

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

0

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

https://ngrok.com/

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

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。