create-react-appベースのプロジェクトを実行するポートを指定するにはどうすればよいですか？

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

この場合、どのようにして選択したポートを指定できますか？私はこのプロジェクトの2つを同時に（テストのために）実行したいと思います。1つはポートで3005、もう1つは3006

環境変数を設定したくない場合はscripts、package.json の一部を次のように変更することもできます。

"start": "react-scripts start"

に

Linux（Ubuntu 14.04 / 16.04でテスト済み）およびMacOS（MacOS Sierra 10.12.4で@ aswin-sでテスト済み）：

"start": "PORT=3006 react-scripts start"

または（多分）@IsaacPakによるより一般的な解決策

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

Windows @JacobEnsorソリューション

"start": "set PORT=3006 && react-scripts start"

cross-env libはどこでも動作します。詳細については、Aguinaldo Possattoの回答を参照してください

私の回答の人気による更新：現在、.envファイルに保存された環境変数を使用することを好みます（さまざまなdeploy構成の変数のセットを便利で読みやすい形式で格納するのに便利です）。シークレットをファイルに保存している場合は、追加すること*.envを忘れないでください。以下に、ほとんどの場合に環境変数を使用する方が良い理由を説明します。秘密を環境に保存することが悪い考えである理由の説明はここにあります。.gitignore.env

このタスクを実行する別の方法を次に示します。

.envプロジェクトのルートにファイルを作成し、そこにポート番号を指定します。お気に入り：

PORT=3005

cross-envを使用してポートを設定すると、Windows、Linux、Macで動作します。

yarn add -D cross-env

次に、package.jsonの開始リンクは次のようになります。

"start": "cross-env PORT=3006 react-scripts start",

という名前の環境変数PORTを指定して、サーバーが実行されるポートを指定できます。

$ export PORT=3005 #Linux
$ $env:PORT=3005 # Windows - Powershell

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

 node_modules/react-scripts/scripts/start.js

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

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

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

.envほかにメインディレクトリに名前を付けてファイルを作成し、変数を目的のポート番号にpackage.json設定しPORTます。

例えば：

.env

PORT=4200

少しだけ更新してwebpack.config.jsください：

devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000 // <--- Add this line and choose your own port number
}

その後、npm start再度実行します。

あなたにはpackage.json、スクリプトや使用に行く--port 4000か、set PORT=4000以下の例のように、：

package.json （ウィンドウズ）：

"scripts": {
    "start": "set PORT=4000 && react-scripts start"
}

package.json （Ubuntu）：

"scripts": {
    "start": "export PORT=4000 && react-scripts start"
}

これはWindowsとLinuxの両方で機能します

package.json

"scripts": {
    "start": "(set PORT=3006 || export PORT=3006) && react-scripts start"
    ...
}

しかし、PORT = 3006が記述された.envを作成することをお勧めします

私のpackage.jsonファイルの変更"start": "export PORT=3001 && react-scripts start"も私にとってはうまくいき、macOS 10.13.4を使っています

要約すると、これを達成するための3つのアプローチがあります。

1. 「PORT」という名前の環境変数を設定します
2. package.jsonの「scripts」部分の下にある「start」キーを変更します
3. .envファイルを作成し、PORT構成をその中に配置します

最もポータブルなものが最後のアプローチになります。ただし、他の投稿者が述べたように、構成をパブリックソースリポジトリにアップロードしないようにするには、.gitignoreに.envを追加します。

詳細：この記事

アプリの起動時にデフォルトのポート設定を見つけることができます

yourapp / scripts / start.js

下にスクロールして、ポートを任意に変更します

const DEFAULT_PORT = parseInt（process.env.PORT、10）|| 4000;

これがあなたに役立つことを願っています;）

これを試して：

npm start port=30022

3000コマンドラインパラメータまたは環境変数として、以外のポートを指定できると便利です。

現在、プロセスはかなり複雑です。

1. 走る npm run eject
2. それが完了するのを待ちます
3. 編集してscripts/start.js、3000使用したいポートに置き換えます。
4. 編集config/webpack.config.dev.jsして同じことを行う
5. npm start

Windowsでは、2つの方法で実行できます。

1. 「\ node_modules \ react-scripts \ scripts \ start.js」で、「DEFAULT_PORT」を検索し、目的のポート番号を追加します。

   例：const DEFAULT_PORT = parseInt（process.env.PORT、10）|| 9999;

2. package.jsonで、以下の行を追加します。"start"： "set PORT = 9999 && react-scripts start"次に、NPM startを使用してアプリケーションを開始します。9999ポートでアプリケーションを起動します。

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

お気に入り：

$ export PORT=4000 && npm start

4000上記の例の値の代わりに、好きなポート番号を指定できます。

既に実行している場合はnpm run eject、scripts / start.jsに移動し、ポートconst DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;（この場合は3000）を任意のポートに変更します。

React-Appのデフォルトポートの変更

cd /your/project/project_name/node_modules/react-scripts/scripts/
vim start.js

この行に移動します。

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';

ポート番号をポート番号に変更します

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

例えば：

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3100;

保存して終了