React.js開発でNode.jsのローカルWEBサーバーが起動しないときの対応

2021/12/11 2022/9/15 Node.js, React, Tips, プログラミング

この記事は公開から2年以上経過しています。

React.js開発でnpm startを行ったときnode.jsのローカルWEBサーバーが起動しない現象が発生したため、その対応についての備忘録。

問題

npm startやreact-scripts start実行で

Compiled successfully!

You can now view projectname in the browser.

http://hostname:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

と表示されるが、WEBブラウザが自動起動しない(エラーも発生しない)。

また、手動起動したブラウザのアドレスバーに直接アドレス(ホスト名/IPアドレス)を入力しても、サーバーに接続できず、netstatやssコマンドでプロセスとポートを確認すると、node.jsのローカルWEBサーバー自体が起動されていない事が確認できる。

原因

環境変数HOSTに設定されているコンピュータ名(メッセージ中のhostname部分)からのIPアドレスの正引きに失敗している。

対応

方法1

お使いのネットワーク環境のローカルDNSサーバー(リゾルバー)に、環境変数HOSTのホスト名に該当するIPアドレスを登録する。

方法2

.envファイルでHOST=IPAddressを指定する。
(PORT=PortNumberでポート番号の指定も可)

HOST=0.0.0.0

方法3

package.jsonのstartスクリプトにHOST=IPAddressを設定する。
(PORT=PortNumberでポート番号の指定も可)

  "scripts": {
    "start": "HOST=0.0.0.0 react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "react-scripts test"
  }

方法4

コマンド実行時のシェルのシェル変数でHOST=IPAddressを設定する。

HOST=0.0.0.0
npm start

以上です。