reactjs - create-react-app ベースのプロジェクトを実行するポートを指定する方法は?

Question

私のプロジェクトはcreate-react-appに基づいています。npm startまたはyarn start、デフォルトでポート 3000でアプリケーションを実行し、package.json でポートを指定するオプションはありません。

この場合、選択したポートを指定するにはどうすればよいですか? このプロジェクトの 2 つを (テスト用に) 同時に実行したいのですが、1 つはポート3005で、もう 1 つは3006

Answer 1

package.json内のスクリプトを変更できます。

- MacOS の場合:

"scripts": {
     "start": "PORT=9002 react-scripts start",
     "build": "react-scripts build",
     ...     
}

- Windows の場合

  "scripts": {
      "start": "set PORT=9002 && react-scripts start",
      "build": "react-scripts build",
      ...
}

Answer 2

私のWindowsの人々のために、ReactJSポートを変更して、必要なポートで実行する方法を発見しました。サーバーを実行する前に、

 node_modules/react-scripts/scripts/start.js

その中で、以下の行を検索し、ポート番号を目的のポートに変更します

 var DEFAULT_PORT = process.env.PORT || *4000*;

そして、あなたは行ってもいいです。

Answer 3

アプリケーション コードや環境ファイルを何も変更せずに、コマンドを呼び出すときにポート番号を指定するのはどうでしょうか。そうすれば、複数の異なるポートから同じコード ベースを実行して提供することが可能になります。

お気に入り：

$ export PORT=4000 && npm start

上記の例の値の代わりに、好きなポート番号を入れることができます4000。

package.json スクリプトでも同じ式を使用できます。

お気に入り：

"start": "export PORT=4000 react-scripts start"

ただし、後者の場合は を変更する必要がありますがpackage.json、前者の場合は、コマンド ラインからの呼び出しでポート値以外は何も変更しません。