PhpStorm 2026.1 Help

Node.js と Docker

Docker を使用すると、Node.js アプリケーションをすばやくブートストラップして、PhpStorm から実行、デバッグ、プロファイリングできます。 IDE は新しい Dockerfile を自動的に作成し、イメージのビルドと実行、ソースコードの同期、コンテナー内で npm の依存関係をインストールすることで初期構成を行います。

WebStorm と Docker のクイックツアー(英語)でいくつかの例を見つけることができます。

始める前に

  1. 設定 | プラグイン ページ、タブ インストール済み で、必要な JavaScript と TypeScript、 JavaScript デバッガー、 Node.js、 Node.js リモートインタープリター、 Docker プラグインが有効化されていることを確認してください。 詳細については、 プラグインの管理 を参照してください。

  2. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの Marketplace タブに Node.js リモートインタープリタープラグインをインストールして有効にします。

  3. Docker に記載されている手順に従って、 Docker をダウンロード、インストール、設定してください。

Docker で Node.js ランタイムを構成する

Docker の Node.js ランタイムは、 Node.js リモートランタイムを構成する ダイアログで設定します。 このダイアログは、 設定 ダイアログの JavaScript ランタイム ページから、または Docker でアプリケーションを実行またはデバッグするために Node.js 実行/デバッグ構成を作成または編集する際に開くことができます。

推奨される方法は、 設定 ダイアログでリモート Node.js ランタイムを設定することです。 この場合、ランタイムと関連するパッケージマネージャーをプロジェクトのデフォルトとして設定できます。 これにより、Docker で設定された Node.js ランタイムを使用してアプリを実行およびデバッグできるだけでなく、プロジェクトの依存関係の管理、テストの実行、コードのリンティングも実行できるようになります。 以下の npm、pnpm、yarn と Docker、 アプリケーションをテストする、 Docker を使用した ESLint を参照してください。

Node.js 実行 / デバッグ構成で直接構成したリモート Node.js ランタイムは、この実行 / デバッグ構成でのみ使用できます。

リモート Node.js ランタイムを作成する

  1. 設定 ダイアログ（Ctrl+Alt+S ）を開き、 言語 & フレームワーク | JavaScript ランタイム に進みます。

  2. ノードランタイム フィールドの横にある 閲覧ボタン をクリックします。

    ランタイムを追加 - 参照ボタン

  3. 現在構成されているすべてのランタイムのリストが表示されている Node.js ランタイムダイアログで、ツールバーの 追加ボタン をクリックし、コンテキストメニューから リモートの追加​​ を選択します。

    Docker コンテナーで Node.js ランタイムを構成する: リモートの追加

  4. 開いた Node.js リモートランタイムを構成するダイアログで、 Docker を選択します。

  5. サーバー リストから、使用する Docker 構成を選択します。

    Docker コンテナーで Node.js ランタイムを構成する: Docker サーバーを選択する

    または、フィールドの横にある 新規 をクリックし、 Docker サポートを有効にする説明に従って Docker サーバーを構成します。

  6. イメージ名 リストから、使用するイメージを選択します。

    Docker コンテナーで Node.js ランタイムを構成する: Docker イメージを選択

    Node.js 実行可能ファイルは自動的に検出され、 Node.js ランタイムパス フィールドに表示されます。

  7. OK をクリックすると、新しいランタイムがリストに追加される Node.js ランタイム ダイアログに戻ります。

    リモートランタイムダイアログ: Docker の新しい Node.js ランタイムがリストに追加されました

  8. 新しく構成されたランタイムをプロジェクトのデフォルトとして設定するには、リストでそれを選択し、 OK をクリックして JavaScript ランタイム ダイアログに戻ります。

    設定: 新しく構成されたリモート Node.js ランタイムがデフォルトで選択されました

    PhpStorm では、たとえば実行 / デバッグ構成を作成する際など、 ノードランタイム リストから プロジェクト エイリアスを選択するたびにこのインタープリターが自動的に使用されます。

    新しいランタイムに関連付けられたパッケージマネージャーをプロジェクトの依存関係の管理に使用するには、このパッケージマネージャーをプロジェクトのデフォルトとして設定します。 そのためには、 パッケージマネージャー フィールドにパッケージマネージャーの場所を指定します。 詳しくは デフォルトのプロジェクト Node.js ランタイムとパッケージマネージャーの指定 を参照してください。

デフォルトのプロジェクト Node.js ランタイムとパッケージマネージャーを指定する

PhpStorm では、実行 / デバッグ構成作成時など、 ノードランタイム リストから プロジェクト エイリアスを選択するたびに、デフォルトのプロジェクトインタープリターが自動的に使用されます。

デフォルトのプロジェクトパッケージマネージャーは、依存関係を管理するために自動的に使用されます。たとえば、 package.json ファイルから <package manager> install を実行したり、ESLint、Prettier などのサードパーティ製ツールをインストールしたりします。

  1. 設定 ダイアログ（Ctrl+Alt+S ）を開き、 言語 & フレームワーク | JavaScript ランタイム に進みます。

  2. ノードランタイム リストから、現在のプロジェクトでデフォルトで使用する構成を選択します。

  3. パッケージマネージャー リストから、使用するパッケージマネージャーに関連付けられているエイリアスを選択します。 PhpStorm はその場所を自動的に検出します。

    設定: 新しく構成されたリモート Node.js ランタイムがデフォルトで選択されました

    または、必要なパッケージマネージャーの場所を手動で指定してください。

    • npm 実行可能ファイルのデフォルトの場所は /usr/local/lib/node_modules/npm です。

    • pnpm のデフォルトの場所は、インストールメソッドによって異なります：

      1. npm を介してインストールするための /usr/local/lib/node_modules/pnpm 。

      2. カールを介してインストールするための /usr/local/pnpm-global/<version>/node_modules/pnpm （curl -f https://get.pnpm.io/<version>.js | node - add --global pnpm）。

      詳細については、 pnpm 公式 Web サイト(英語)を参照してください。

    • ヤーンのデフォルトの場所は /opt/yarn-<version>5 で、たとえば /opt/yarn-v1.22.5 です。

    Docker コンテナーで Node.js ランタイムを構成する: デフォルトのプロジェクトインタープリターとして設定

npm、pnpm、yarn と Docker

PhpStorm を使うと、ローカルプロジェクトと同様に、Docker コンテナー内でプロジェクトの依存関係を管理したりスクリプトを実行したりできます。

  1. Docker のリモート Node.js ランタイムが構成されていることを確認してください。

  2. デフォルトのプロジェクト Node.js ランタイムとパッケージマネージャーを指定する

  3. プロジェクトの依存関係を管理します。

    • package.json ファイルを開き、ローカル開発と同様に操作してください。たとえば、コンテキストメニューから 「パッケージマネージャー install」を実行してください。 を選択します。 依存関係は Docker コンテナー内のデフォルトパッケージマネージャーでインストールされ、 node_modules フォルダーがプロジェクトに表示されます。

    • または、組み込みの ターミナル （Alt+F12 ）を開き、必要なパッケージを手動でインストールします。たとえば npm install --save-dev eslint を実行します。

    パッケージのインストールと更新、 package.json を編集 の詳細を参照してください。

  4. スクリプト実行

Node.js 実行構成を作成する

  1. 実行 | 実行構成の編集 に進みます。 開いた 構成の編集 ダイアログで、ツールバーの 「新しい構成を追加」ボタン をクリックし、コンテキストメニューから Node.js を選択します。 「実行 / デバッグ構成: Node.js 」ダイアログが開きます。

  2. ファイル フィールドで、それを開始するアプリケーションのメインファイルへのパスを指定します（たとえば、 Express(英語) アプリケーションの場合は bin/www ）。

    Node.js の実行 / デバッグ構成: JavaScript ファイルが指定されました

  3. 必要に応じて、 Node.js アプリケーションの実行とデバッグで説明されているいくつかのオプション設定を指定します。

  4. ノードランタイム リストから、Docker 環境内の関連するリモート Node.js ランタイムを選択します。

    Node.js と Docker: 構成の実行 / デバッグ、インタープリターの選択

    または、 ノードランタイム フィールドの横にある 閲覧ボタン をクリックし、 上記のようにリモート Node.js ランタイムを構成します。

    Node.js と Docker: 実行 / デバッグ構成、ランタイムの構成、リモートの追加を選択

  5. 自動生成された Docker コンテナーの設定を確認します。 展開アイコン をクリックすると、ポップアップで設定が開きます。

    Node.js と Docker: 実行 / デバッグ構成、Docker コンテナー設定

  6. オプション: 下記の説明に従ってポートバインディングを構成します。

ポートバインディングを構成する (オプション)

基本的に、アプリケーションが実行されているポートをコンテナーのポートにバインドする必要があります。

Docker コンテナー設定の編集フィールドの横にある the Browse icon をクリックして、表示される Docker コンテナー設定の編集 ダイアログで設定を指定します。

  1. ポートバインディング 領域を展開し、ツールバーの 追加ボタン をクリックします。 開いた ポートバインディング ダイアログで、ポートを次のようにマップします。

  2. オプションを変更 をクリックして、指定するオプションを選択します。

    Docker コンテナー設定を構成する: 指定するポートバインディングオプションを選択する

    • 「コンテナーポート 」フィールドに、アプリケーションで指定されているポートを入力します。

    • ホストポート フィールドに、コンピューターからアプリケーションにアクセスするための任意のポートを入力します。

    • ホスト IP フィールドに、Docker ホストの IP アドレスを入力します。 localhost を利用している場合は、 127.0.0.1 を入力してください。

      Docker: 指定されたポートバインディング

    • OK をクリックして、新しいポートバインディングがリストに追加される Docker コンテナー設定の編集 ダイアログに戻ります。

    Docker: ポートバインディングが追加されました

  4. OK をクリックして、 実行/デバッグ構成：Node.js ダイアログに戻り、ポートバインディングが Docker コンテナーの設定 フィールドに表示されます。

    Docker: ポートバインディングが追加されました

    アプリケーションを実行する

    Running a Node.js application in a Docker container

    1. Node.js 実行 / デバッグ構成を 上記の説明に従って作成します。

    2. ツールバーの 実行 / デバッグ構成を選択 リストから、 新しく作成された Node.js 構成を選択します。

    3. the Run button をクリックして 実行 / デバッグ構成を選択 リストに移動します。

    アプリケーションの出力を確認する

    アプリケーションが期待通りに動作するかを確認するには、PhpStorm の 組み込み HTTP クライアントから HTTP リクエストを実行できます。

    Node.js with Docker: connect to a running app with a HTTP Request

    1. HTTP リクエストファイルを作成します。

    2. 次のリクエストを記述してください：

      GET http://<host IP>:<container port>/

      例：

      GET http://127.0.0.1:3010/

    3. ガターの 「HTTP リクエストを実行」ボタン をクリックし、 http://<host IP>:<container port>/ を実行する の横にある 「HTTP リクエストを実行」ボタン をクリックします。

      HTTP リクエストを起動する

      アプリケーションの出力は、 実行 ツールウィンドウの別のタブに表示されます。

      アプリケーションの出力は、実行ツールウィンドウに表示されます

    アプリケーションをデバッグする

    Debugging a Node.js application in a Docker container

    1. 必要に応じて、Node.js コードに ブレークポイント を設定してください。

    2. Node.js 構成を 上記の説明に従って作成し、ツールバーの 実行 / デバッグ構成を選択 リストから選択し、リストの横にある 「デバッグ」ボタン をクリックしてください。

    3. Node.js アプリケーションと一緒にローカルでデバッガーを起動する場合に進みます。

    アプリケーションをテストする

    PhpStorm を使うと、ローカルと同じように、Docker コンテナー内で Mocha テストや Jest テストを実行できます。 詳細については、 Mocha および Jest を参照してください。

    1. Docker 内の関連するリモート Node.js ランタイムがプロジェクトのデフォルトとして設定され、選択されていることを確認してください。 また、このリモートランタイムに関連付けられたパッケージマネージャーがプロジェクトのデフォルトに設定されていることも確認してください。 詳細については、 Docker で Node.js ランタイムを構成する と npm、pnpm、yarn と Docker を参照してください。

    2. package.json を開き、必要なテストフレームワークが devDependencies セクションにリストされていることを確認します。

      { "name": "node-express", "version": "0.0.0", "private": true, "dependencies": { "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1", "pug": "^3.0.2" }, "devDependencies": { "chai": "^4.3.4", "concurrently": "^6.3.0", "eslint": "^8.1.0", "http-server": "^14.0.0", "jest": "^27.3.1", "mocha": "^9.1.3", "nyc": "^15.1.0" } }

    3. エディターの任意の場所を右クリックして、コンテキストメニューから 「パッケージマネージャー install」を実行してください。 を選択します。

    4. Mocha オフィシャル Web サイト(英語)または Jest オフィシャル Web サイト(英語)の指示に従ってテストを作成します。

    5. Mocha テストの実行、 Mocha テストのデバッグ、 Jest テストの実行、 Jest テストのデバッグに従って、エディターから直接単一のテストを実行およびデバッグするか、実行 / デバッグ構成を作成して、テストの一部またはすべてを起動します。

    Docker を使用した ESLint

    PhpStorm を使うと、ローカルと同じように、Docker コンテナー内のコードに対して ESLint を実行できます。 詳細については、 JavaScript リンター​​ および ESLint を参照してください。

    1. Docker 内の関連するリモート Node.js ランタイムがプロジェクトのデフォルトとして設定され、選択されていることを確認してください。 また、このリモートランタイムに関連付けられたパッケージマネージャーがプロジェクトのデフォルトに設定されていることも確認してください。 詳細については、 Docker で Node.js ランタイムを構成する と npm、pnpm、yarn と Docker を参照してください。

    2. package.json を開き、ESLint が devDependencies セクションにリストされていることを確認します。

      { "name": "node-express", "version": "0.0.0", "private": true, "dependencies": { "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1", "pug": "^3.0.2" }, "devDependencies": { "eslint": "^8.1.0" } }

    3. エディターの任意の場所を右クリックして、コンテキストメニューから 「パッケージマネージャー install」を実行してください。 を選択します。

    4. その後、ESLint は、コードをローカルで操作する場合と同じように機能します。 検出された不一致の説明をエディターまたは 問題 ツールウィンドウで表示し、提案されたクイックフィックスを適用します。 詳細については、 JavaScript リンター​​ および ESLint を参照してください。

      Docker コンテナー内の ESLint
    2026 年 5 月 22 日
    V8 CPU とメモリのプロファイリングNode.js と Docker Compose