React プロジェクト ポート指定
2024-08-27
React.jsでcreate-react-appプロジェクトのポートを指定する方法
React.jsプロジェクトをcreate-react-appで作成した後、プロジェクトを実行する際に特定のポートを指定することができます。これにより、複数のプロジェクトを同時に実行したり、特定のポートを必要とする他のアプリケーションと干渉しないようにすることができます。
方法1: package.jsonファイルを変更する
- プロジェクトのルートディレクトリにある
package.jsonファイルを開きます。 "scripts"セクション内の"start"スクリプトを以下のように変更します:
"scripts": {
"start": "react-scripts start --port 3001"
}
この例では、ポート番号を3001に指定していますが、任意のポート番号を使用することができます。
方法2: react-scriptsコマンドのオプションを使用する
- ターミナルまたはコマンドプロンプトでプロジェクトのルートディレクトリに移動します。
- 以下のコマンドを実行します:
npx react-scripts start --port 3001
注意点
- デフォルトのポート
create-react-appはデフォルトでポート3000を使用します。このポートが他のアプリケーションで使用されている場合は、別のポートを指定する必要があります。 - ポート番号の衝突
指定したポート番号が既に他のアプリケーションで使用されている場合、エラーが発生します。
{
"name": "my-react-app",
"version": "0.1.0",
"scripts": {
"start": "react-scripts start --port 3001"
},
"dependencies": {
// ...
}
}
この例では、package.jsonファイルの"scripts"セクションに"start"スクリプトを追加し、--port 3001オプションを使用してポート番号を指定しています。
npx react-scripts start --port 3001
この例では、react-scriptsコマンドを実行する際に--port 3001オプションを指定しています。
両方の方法を組み合わせる
{
"name": "my-react-app",
"version": "0.1.0",
"scripts": {
"start": "react-scripts start --port 3001"
},
"dependencies": {
// ...
}
}
npx react-scripts start --port 3002
環境変数を使用する
環境変数を使用して、プロジェクトのポートを指定することができます。これにより、異なる環境で異なるポートを使用することができます。
方法
- プロジェクトのルートディレクトリで
.envファイルを作成します。 - ファイルに以下の行を追加します:
PORT=3001
- プロジェクトを実行します。
例
npx react-scripts start
この方法を使用すると、プロジェクトを実行する際に環境変数PORTの値が使用されます。
react-scriptsの--portオプションを使用する
react-scriptsコマンドの--portオプションを使用して、プロジェクトのポートを指定することができます。
npx react-scripts start --port 3001
この方法を使用すると、コマンドラインで直接ポートを指定することができます。
package.jsonファイルの"start"スクリプトを変更する
package.jsonファイルの"start"スクリプトを変更して、プロジェクトのポートを指定することができます。
{
"scripts": {
"start": "react-scripts start --port 3001"
}
}
react-scriptsの--proxyオプションを使用して、プロジェクトのポートを指定することができます。このオプションは、プロジェクトを別のサーバーにプロキシする際に使用されます。
npx react-scripts start --proxy http://localhost:3000
reactjs npm create-react-app
