PyCharm 2026.1 Help

Node.js と Docker

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

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

始める前

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

  2. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの マーケットプレース タブに Node.jsNode.js リモートインタープリターJavaScript Debugger プラグインをインストールしてください。 プラグインは PyCharm Pro でのみ利用できます。

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

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

Docker の Node.js ランタイムは、 Configure Node.js Remote Runtime ダイアログで設定します。 このダイアログは、 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 ランタイムがデフォルトで選択されました

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

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

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

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

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

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

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

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

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

PyCharm を使用すると、ローカルプロジェクトと同じように、プロジェクトの依存関係を管理したり、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. 実行 | 実行構成の編集 に進みます。 開いた 構成の編集 ダイアログで、ツールバーの Add New Configuration ボタン をクリックし、コンテキストメニューから 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 コンテナー設定の編集フィールドの横にある 閲覧アイコン をクリックして、表示される Docker コンテナー設定の編集 ダイアログで設定を指定します。

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

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

    Docker コンテナー設定を構成する: 指定するポートバインディングオプションを選択する
    • コンテナーポート 」フィールドに、アプリケーションで指定されているポートを入力します。

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

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

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

    Docker: ポートバインディングが追加されました
  3. OK をクリックして Run/Debug Configuration: Node.js ダイアログに戻ると、ポートバインディングが Docker コンテナーの設定 フィールドに表示されます。

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

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

    Running a Node.js application in a Docker container
    1. Node.js 実行 / デバッグ構成を 上記の説明通りに作成します。

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

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

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

    アプリケーションが期待どおりに動作するか確認するために、PyCharm 組み込み 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 ボタン をクリックし、 http://<host IP>:<container port>/ を実行 の横にある the Run HTTP Request ボタン をクリックします。

      HTTP リクエストを起動する

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

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

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

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

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

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

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

    PyCharm を使用すると、ローカルと同じ方法で Docker コンテナー内で MochaJestテストを実行できます。 詳細については、 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

    PyCharm を使えば、ローカルと同じ方法で 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 月 1 日