Reactでカスタムポートでnpm run devを実行する方法


  1. ポート番号の指定: Reactプロジェクトを実行するポート番号を指定するために、package.jsonファイル内の"scripts"セクションを編集します。通常、"start"スクリプトがデフォルトの開発用ポート(通常は3000)を使用してReactアプリケーションを起動します。これをカスタマイズするには、"start"スクリプトを次のように変更します。
"scripts": {
  "start": "react-scripts start --port 5000"
}

上記の例では、ポート番号5000を使用してReactアプリケーションを起動します。

  1. 環境変数の使用: もう1つの方法は、環境変数を使用してポート番号を指定する方法です。環境変数を使用する場合、以下の手順に従います。
  • Unix/Linux/macOS:

    PORT=5000 npm run dev
  • Windows (PowerShell):

    $env:PORT=5000; npm run dev

これにより、ポート番号5000でReactアプリケーションが起動します。

  1. .envファイルの使用: Reactアプリケーションのルートディレクトリに、.envファイルを作成することもできます。このファイルにポート番号を指定し、環境変数を使用する方法と同様に、Reactアプリケーションを起動します。

.envファイルの例:

PORT=5000

上記の例では、ポート番号5000を使用してReactアプリケーションが起動します。

これらの方法を使用すると、Reactプロジェクトをカスタムポートで実行することができます。必要に応じて、他のポート番号を選択してください。