WebStorm 2026.1 Help

Node.js と Docker

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

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

始める前に

  1. JavaScript Debugger、 Node.js、 Node.js Remote Interpreter、 Docker の必須プラグインが 設定 | プラグイン ページ、タブ インストール済み で有効になっていることを確認してください。 詳細は プラグインの管理 を参照してください。

  2. Docker をダウンロード、インストール、設定し、 Docker の説明に従ってください。

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

Docker の Node.js ランタイムは、 Node.js リモートランタイムの構成 ダイアログで設定します。 このダイアログは、 設定 ダイアログの JavaScript Runtime ページから、または 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 ランタイムがデフォルトで選択されました

    WebStorm は、たとえば実行/デバッグ構成作成時など ノードランタイム リストから Project エイリアスを選択するたびに、このインタープリターを自動的に利用します。

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

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

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

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

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

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

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

    設定: 新しく構成されたリモート 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

WebStorm を使えば、ローカルプロジェクトと同様に Docker コンテナー内でプロジェクトの依存関係管理やスクリプトの実行ができます。

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

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

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

    • package.json ファイルを開き、ローカル開発と同じ手順で進めてください。たとえば、コンテキストメニューから 「<package manager> 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 コンテナーの設定を確認します。 Expand アイコン をクリックすると、ポップアップで設定が開きます。

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

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

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

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

Docker コンテナー設定の編集フィールドの横にある 閲覧アイコン をクリックして、表示される 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. Run ボタン をクリックして 実行 / デバッグ構成を選択 リストに移動します。

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

    アプリケーションが期待通りに動作するか確認するには、WebStorm の 組み込み 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 アプリケーションと一緒にローカルでデバッガーを起動する場合に進みます。

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

    WebStorm を使えば、ローカルと同じ方法で 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. エディターの任意の場所を右クリックして、コンテキストメニューから 「<package manager> install」を実行 を選択します。

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

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

    Docker を使用した ESLint

    WebStorm を使えば、ローカルと同じように 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. エディターの任意の場所を右クリックして、コンテキストメニューから 「<package manager> install」を実行 を選択します。

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

      Docker コンテナー内の ESLint
    2026 年 6 月 8 日
    V8 CPU とメモリのプロファイリングチュートリアル: Node.js Express アプリケーションを Docker 化する