web-dev-qa-db-ja.com

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

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

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

reactjsnpm
118
letthefireflieslive

環境変数 を設定したくない場合は、package.jsonのscripts部分を以下から変更することもできます。

"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"

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

204
El Ruso

これはこのタスクを達成するための別の方法です。

プロジェクトルートに.envファイルを作成し、そこでポート番号を指定します。好きです：

PORT = 3005

73
Shahriar Hasan Sayeed

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

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

cross-env を使ってポートを設定することができます。これはWindows、Linux、およびWindowsで動作します。マック。

yarn add -D cross-env

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

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

私のwindowsの人々のために私はあなたが望む任意のポートで動作するようにReactJSポートを変更する方法を発見しました。サーバを実行する前にに行く

node_modules/react-scripts/scripts/start.js

その中で、以下の行を検索して、ポート番号をご希望のポートに変更してください。

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

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

3
Ayodeji

webpack.config.jsを少し更新するだけです。

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

それからnpm startをもう一度実行します。

2
Sanchit Bhatnagar

これはWindowsとLinuxの両方で動作します

package.json

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

おそらく、その中にPORT = 3006と書かれた.envを作成することを好むでしょう

1
Metu

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

yourapp/scripts/start.js

下にスクロールして、ポートを必要なものに変更します。

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

これが助けになることを願っています;）

1
akhisyabab

私のpackage.jsonファイル"start": "export PORT=3001 && react-scripts start"の変更も私のために働きました、そして私はmacOS 10.13.4にいます

1
Refayat Haque

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

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

最も移植性の高い方法が最後の方法です。しかし、他のポスターで述べられているように、設定を公開ソースリポジトリにアップロードしないために.envを.gitignoreに追加してください。

もっと詳しく： この記事

1
mikaelfs

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起動を使用してアプリケーションを起動します。それは9999ポートでアプリケーションを起動します。

0
rahulnikhare

あなたのアプリケーションコードや環境ファイルの中で何かを変更する必要なしにコマンドを呼び出している間ポート番号を与えることはどうですか？そのようにして、いくつかの異なるポートから同じコードベースを実行し、提供することが可能です。

好きです：

$ export PORT=4000 && npm start

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

0
Selçuk

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

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

  1. npm run ejectを実行します
  2. それが終わるのを待ちます
  3. scripts/start.jsを編集し、3000を使用するポートで検索/置換します
  4. config/webpack.config.dev.jsを編集して同じことを行います
  5. npm start
0
MD.ALIMUL Alrazy