PhpStorm 2026.3 Help

Node.js と Docker

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

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

始める前に

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

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

  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. Server リストから、使用する 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 は、たとえば実行 / デバッグ構成を作成するときに、 ノードランタイム リストから Project エイリアスを選択するたびに、このインタープリターを自動的に使用します。

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

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

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

デフォルトのプロジェクトパッケージマネージャーは、依存関係を管理するために自動的に使用されます。たとえば、 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

IntelliJ IDEA を使用すると、ローカルプロジェクトの場合と同じように、プロジェクトの依存関係を管理し、Docker コンテナーでスクリプトを実行できます。

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

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

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

    • package.json ファイルを開き、ローカル開発の場合と同様に進めます。たとえば、コンテキストメニューから '<パッケージマネージャー> のインストール' の実行 を選択します。 依存関係は Docker コンテナー内のデフォルトのパッケージマネージャーを使用してインストールされ、 node_modules フォルダーがプロジェクトに表示されます。

    • または、コマンドラインシェルや組み込みの ターミナル （Alt+F12 ）を開いて、必要なパッケージを手動でインストールします。例えば、 npm install --save-dev eslint を実行してください。

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

  4. スクリプト実行

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

  1. 実行 | 実行構成の編集 に進みます。 開いた 構成の編集 ダイアログで、ツールバーの the Add New Configuration button をクリックし、コンテキストメニューから 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 コンテナーの設定を確認します。 the Expand icon をクリックすると、ポップアップで設定が開きます。

    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. ガターの the Run HTTP Request button をクリックし、 http://<ホスト IP>:<コンテナーポート>/ の実行 の横にある the Run HTTP Request button をクリックします。

      HTTP リクエストを起動する

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

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

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

    Debugging a Node.js application in a Docker container

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

    2. 上記の説明に従ってNode.js 構成を作成し、ツールバーの 実行 / デバッグ構成を選択 リストから選択し、リストの横にある the Debug button をクリックします。

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

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

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

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

    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. エディターの任意の場所を右クリックして、コンテキストメニューから '<パッケージマネージャー> のインストール' の実行 を選択します。

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

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

    Docker を使用した ESLint

    PhpStorm を使用すると、ローカルで実行するのと同じ方法で、Docker コンテナー内のコードに対して ESLint(英語) を実行できます。 詳細については、 JavaScript リンター と ESLint を参照してください。

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

    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. エディターの任意の場所を右クリックして、コンテキストメニューから '<パッケージマネージャー> のインストール' の実行 を選択します。

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

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