Create React Appでポート番号を指定する方法

Create React Appでポート番号を指定する方法

ここでは、環境変数とenvファイルの2つの方法でポート番号を指定する方法を紹介します。

環境変数でポート番号を指定する方法

1. ターミナルを開き、プロジェクトフォルダに移動します。
2. 以下のコマンドを実行します。

PORT=8080 npm start

このコマンドは、PORT環境変数に8080を指定してnpm startを実行します。

その他の環境変数

• HOST: ホスト名またはIPアドレスを指定します。デフォルトはlocalhostです。
• HTTPS: HTTPSで起動する場合はtrueに設定します。デフォルトはfalseです。

例：

PORT=8080 HOST=0.0.0.0 HTTPS=true npm start

envファイルでポート番号を指定する方法

1. プロジェクトフォルダに.envファイルを作成します。
2. .envファイルに以下の内容を記述します。

PORT=8080

1. npm startコマンドを実行します。

.envファイルは、環境変数を設定するためのファイルです。.envファイルに設定された環境変数は、npm startコマンド実行時に読み込まれます。

どちらの方法でも、ポート番号を指定することはできます。環境変数の方がシンプルですが、.envファイルの方が環境ごとに設定を変更しやすいため、複数の環境でプロジェクトを運用する場合には.envファイルを使用するのがおすすめです。

create-react-appでポート番号を指定するには、環境変数またはenvファイルを使用できます。どちらの方法でも、プロジェクトフォルダに移動してnpm startコマンドを実行することで、指定したポート番号でプロジェクトを起動することができます。

環境変数でポート番号を指定する例

# ターミナルで以下のコマンドを実行

PORT=8080 npm start

envファイルでポート番号を指定する例

PORT=8080

npm start

• 上記のサンプルコードは、デフォルトのポート番号3000を8080に変更する例です。
• 環境変数またはenvファイルに設定したポート番号は、react-scripts startコマンド実行時に読み込まれます。

他の方法

package.jsonファイル

1. プロジェクトフォルダのpackage.jsonファイルを開きます。
2. "scripts"オブジェクトに以下のプロパティを追加します。

"scripts": {
  "start": "react-scripts start --port 8080"
}

この設定により、npm startコマンドを実行すると、ポート8080でプロジェクトが起動されます。

直接スクリプトを実行

1. プロジェクトフォルダのnode_modules/.bin/react-scriptsファイルを開きます。

./react-scripts start --port 8080

このコマンドは、react-scripts startスクリプトを直接実行し、--portオプションでポート番号を8080に指定します。

create-react-appでポート番号を指定するには、以下の方法があります。

• 環境変数
• envファイル
• package.jsonファイル
• 直接スクリプトを実行

どの方法を使用するかは、開発環境やプロジェクトの要件によって異なります。