WebStorm 2024.3 ヘルプ

Node.js と Docker Compose

Docker Compose(英語) は、マルチコンテナーアプリケーションを実行するために使用されます。例: Web サーバー、バックエンドデータベース、アプリケーションコードを個別のサービスとして実行できます。各サービスは、必要に応じてコンテナーを追加することで拡張できます。これにより、本番環境と同様に、動的な環境で効率的な開発とテストを実行できます。

始める前に

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

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

Docker Compose を使用して Node.js インタープリターを構成する

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

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

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

  1. 設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | Node.js に移動します。

  2. Node インタープリターフィールドの横にある the Browse button をクリックします。

    Add interpreter - Browse button

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

    Configure Node.js interpreter in Docker container: Add Remote

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

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

    Configure a Node.js interpreter via Docker Compose: select the Docker Server

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

  6. 構成ファイルフィールドで、使用する docker-compose 構成ファイルを指定します。「参照」をクリックし、表示される「Docker Compose 構成ファイル」ダイアログで構成ファイルのリストを作成します。

    Configure a Node.js interpreter via Docker Compose: configuration files

  7. サービスリストから、使用するサービスを選択します。

    Configure Node.js interpreter via Docker Compose: select service

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

    Remote Interpreters dialog: the new Node.js interpreter in Docker added to the list

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

    Settings: newly configured remote Node.js interpreter selected as default

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

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

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

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

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

  1. 設定ダイアログ（Ctrl+Alt+S）を開き、言語 & フレームワーク | Node.js に移動します。

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

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

    Settings: newly configured remote Node.js interpreter selected as default

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

    • 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 です。

    Configure Node.js interpreter in Docker container: set as default project interpreter

Node.js 実行 / デバッグ構成を作成する

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

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

    Node.js run/debug configuration: JavaScript file specified

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

  4. Node インタープリターリストから、Docker Compose を介して関連するリモート Node.js インタープリターを選択します。

    Node.js with Docker: run/debug configuration, select interpreter

    または、Node インタープリターフィールドの横にある the Browse button をクリックし、上記のようにリモート Node.js インタープリターを構成します。

    Node.js with Docker: run/debug configuration, configure interpreter, select Add Remote

  5. Docker Compose エリアで、Docker Compose に渡すコマンドとオプションを指定します。デフォルト設定を受け入れるか、「 the Expand button 」をクリックしてカスタム設定 (たとえば、--rm や --service-ports などのカスタム Docker Compose フラグ) を指定します。詳細については、Docker オフィシャル Web サイト(英語)を参照してください。

    コマンドプレビューを確認してください。

    Docker Compose area preview
Node.js と Docker Node.js と Vagrant

関連ページ：

プラグインのインストール

プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

Docker

Docker は、分離された再現可能な環境で実行可能ファイルをデプロイおよび実行するためのツールです。これは、たとえば、本番環境と同じ環境でコードをテストする場合に役立ちます。WebStorm は Docker 機能を統合し、Docker イメージの作成、Docker コンテナーの実行、Docker Compose アプリケーションの管理、パブリックおよびプライベート Docker レジストリの使用など、IDE から直接実行するための支援を提供します。Docker プラグインを有効にするこの機能は...

Node.js と Docker

Docker を使用すると、Node.js アプリケーションをすばやくブートストラップして、WebStorm から実行、デバッグ、プロファイリングできます。IDE は、新しい Dockerfile を自動的に作成し、イメージをビルドして実行し、ソースコードを同期し、コンテナーに npm 依存関係をインストールすることにより、初期構成を処理します。WebStorm と Docker のクイックツアーでいくつかの例を見つけることができます。始める前に：設定 | プラグインページのインストール済みタブで、...

Node.js

このページは、プラグインのインストールに従って、設定 | プラグインページのインストール済みタブで Node.js バンドルプラグインが有効になっている場合にのみ表示されます。次の Node.js バージョンは、WebStorm 2023.3 以降でサポートされています。Node.js 20 - アクティブな長期サポート (LTS) バージョン、Node.js 21 - 現在のバージョン、サポートされている Node.js バージョンの詳細情報 Node インタープリターこのフィールドでは、現在のプロ...

実行 / デバッグ構成: Node.js

作成: 次の Node.js バージョンは、WebStorm 2023.3 以降でサポートされています。Node.js 20 - アクティブな長期サポート (LTS) バージョン、Node.js 21 - 現在のバージョン、サポートされている Node.js バージョンの詳細を参照してください。このページでは、構成固有の項目と、すべての実行 / デバッグ構成に共通のオプションについて説明します。この構成の使用方法の詳細については、「Node.js の実行とデバッグ」を参照してください。このダイアロ...

Node.js の実行とデバッグ

WebStorm は、Node.js アプリケーションの実行とデバッグを支援します。WebStorm から起動し、すでに実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に：設定 | プラグインページのインストール済みタブで、Node.js および JavaScript Debugger に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。Node.js アプリケーションを実行する：WebStorm は...