create-react-appで作ったReactのプロジェクトのポート番号を変える

create-react-app で作成したプロジェクトの react-scripts start のポート番号を3000番から変えてみます。

react-scripts start時のポート番号を変える

結論としてはPORT=3678 react-scripts startのように 環境変数 PORT を指定します。

react-scripts start -p <ポート番号> のようなことは出来ません。

react-scripts start はデフォルトだと「localhost:3000」で起動されます。 ここでは「localhost:3678」に変更してみます。

やり方として、

• npm-scriptsで指定
• .nevで指定

の2つの方法を記載します。

どちらも環境変数 PORT を指定する、というところでは一緒のことをやっているのでプロジェクトに合わせて設定して下さい。

1. npm-scriptsで直接指定

react-scripts start の前に環境変数 PORT を設定

"scripts": {
    "start": "PORT=3678 react-scripts start",
・・・

シンプルに使いたい、試したいといったケースの場合こっちなイメージ

2. .envで指定

.envに環境変数 PORT を作成

PORT=3678

react-scripts start はデフォルトで「.env」を読み込んでくれるのでこれでポート番号3678でlocalhostが起動します！

.envはgitで管理しなくなるため、「.env.sample」のようなファイルにも書く必要が出てきて手間がかかります。

しかし、以下のような「.env.development」「.env.staging」など複数の環境変数を用いて読み込む環境変数を変えている場合、

"scripts": {
    "start:dev": "dotenv -e .env react-scripts start",
    "start:stg": "dotenv -e .env.staging react-scripts start",
・・・

.envに書いてしまった方がnpm-scriptsもごちゃごちゃしなくていいかなと思います。 .envで環境変数を一言管理する、というルール決めも出来ますし。