まとめ
どちらかでできる。
- 環境変数
PORTを設定する。 - プロジェクトルートに
.envファイルを作ってPORTを設定する。
.env
PORT=4000
説明
create-react-app コマンドで作られたアプリケーションは、npm start コマンドで Web ブラウザでアプリケーションを開くよう設定されます。
この npm start コマンドは、内部では react-scripts というスクリプトを介して実行されています。
package.json
{
...
"scripts": {
"start": "react-scripts start",
...
デフォルトでは http://localhost:3000 と 3000 番ポートで実行するのですが、設定を書くことでポート番号を変えることができます。
環境変数を設定するか、.env ファイルを置くことで反映させられます。
環境変数でやる
たとえば $ PORT=4000 npm start とすることで、http://localhost:4000 でアプリケーションを開くことができます。
他のプロジェクトに影響がなければ export PORT=4000 でもいいと思います。
.env ファイルでやる
プロジェクトルートに .env ファイルを作り、以下のように書いて npm start すれば OK です。
.env
PORT=4000
ちなみに .env ファイルの仕様はこちら。