localhost で Create-React-App を実行するポートを指定する

1. create-react-app プロジェクトのセットアップ
2. ローカルホストで create-react-app を実行するポートを指定する
3. create-react-app プロジェクトのポートを変更する
4. cross-env パッケージを使用して create-react-app プロジェクトのポートを変更する

Facebook は、React を開発および維持する組織です。 同じチームが、React アプリを開発するための優れた環境を提供する create-react-app パッケージをリリースしました。

これにより、Web パック、トランスパイラー、およびその他の最新ツールをセットアップする手間をかけずに、JSX および JavaScript コードの作成に集中できます。 npm を介してコマンドを実行するだけで、React シングルページ アプリケーションを作成できます。

create-react-app プロジェクトのセットアップ

開発者は、npm や yarn などのツールを使用してコマンドを入力する必要があります。 create-react-app で作成されたアプリケーションは localhost で利用できるようになり、localhost:3000 に移動してアプリケーションをプレビューできます。

ローカルホストで create-react-app を実行するポートを指定する

ローカルでホストされているアプリケーションは、リモート サーバー上ではなく、コンピューター上に存在し、ネットワークに接続されていないデバイスからはアクセスできません。

場合によっては、localhost で 2つのアプリケーションを実行する必要があるため、ブラウザーが異なる localhost アドレスで異なるアプリケーションを表示する方法が必要です。

通常、ローカル ネットワーク上のポートを使用して、ローカル ホスト上の 2つの異なるアプリケーション インスタンスを区別します。 アプリケーション A は localhost:3000 でホストでき、アプリケーション B は localhost:3006 でホストできます。

create-react-app プロジェクトを作成して起動したい場合は、デフォルトで localhost:3000 アドレスでホストされます。 3000 はここのポートです。 create-react-app アプリケーションを起動するとき、npm はアプリケーションを実行するためのポートを指定するように求めません。

デバイスで既に 1つの React アプリケーションを実行していて、別のアプリケーションを起動しようとしても、別のポートを自動的に使用してホストすることはありません。 代わりに、アプリケーションがそのポートで既に実行されていることを示すエラーが表示されます。

そのため、特定の create-react-app プロジェクトを別のポートで実行するように指定する方法が必要になる場合があります。 このようにして、2つの create-react-app プロジェクトを同時に実行できます。

create-react-app プロジェクトのポートを変更する

アプリケーションのポートを変更するには、プロジェクト ディレクトリに移動し、package.json ファイルを見つける必要があります。 これはプロジェクトのメイン ディレクトリにあるため、見つけるのは難しくありません。

ファイルを開いたら、npm start などのアプリケーションの起動に使用されるコマンドを制御する "scripts" セクションを見つけます。

Windows でのポートの変更

何も変更しない限り、このセクションは次のようになります。

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

ただし、必要に応じてポートを指定できます。 これを行うには、"start" プロパティの値を変更する必要があります。

たとえば、アプリケーションを 8000 ポートで実行する場合は、次の変更を行うことができます。

"scripts": {
    "start": "set PORT=8000 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

ご覧のとおり、最初に set PORT=8000 を追加し、&& 演算子を使用して前の値に接続しました。

Windows で create-react-app プロジェクトのデフォルト ポートを変更するのに必要なのはこれだけです。 ここでアプリケーションを実行すると、ブラウザで localhost:8000 アドレスで開きます。

Linux/Mac でポートを変更する

Linux および Mac では、package.json ファイルの "scripts" セクションを次のように変更することで、デフォルトの localhost ポートを変更できます。

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

お使いの Linux または Mac のバージョンでうまくいかない場合は、次の方法を試してください。

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

cross-env パッケージを使用して create-react-app プロジェクトのポートを変更する

JavaScript コミュニティは、PORT などの環境変数を 1 か所で設定する方法を開発しました。これは、すべてのプラットフォームで同様に動作します。

npm を開発依存関係として使用してパッケージをインストールする必要があります。 つづりが正しいことを確認してください。

npm install --save-dev cross-env

次に、"scripts" セクションの "start" プロパティを次の値に変更します。

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

現在、パッケージはメンテナンス モードになっています。つまり、新しい機能は追加されていませんが、引き続き機能します。