Node.js と Docker Compose
Docker Compose(英語) は、マルチコンテナーアプリケーションを実行するために使用されます。例: Web サーバー、バックエンドデータベース、アプリケーションコードを個別のサービスとして実行できます。各サービスは、必要に応じてコンテナーを追加することで拡張できます。これにより、本番環境と同様に、動的な環境で効率的な開発とテストを実行できます。
始める前に
設定 | プラグインページのインストール済みタブで、JavaScript Debugger、Node.js、Node.js リモートインタープリター、Docker の必須プラグインが有効になっていることを確認します。詳細については、プラグインのマッピングを参照してください。
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 インタープリターは、この実行 / デバッグ構成でのみ使用できます。
設定ダイアログ(Ctrl+Alt+S)を開き、 に移動します。
Node インタープリターフィールドの横にある
をクリックします。
現在構成されているすべてのインタープリターのリストが表示された Node.js インタープリターダイアログで、ツールバーの
をクリックし、コンテキストメニューからリモートの追加を選択します。
開いた Node.js リモートインタープリターの構成ダイアログで、Docker Compose を選択します。
サーバーリストから、使用する Docker 構成を選択します。
または、フィールドの横にある新規をクリックし、Docker サポートを有効にする説明に従って Docker サーバーを構成します。
構成ファイルフィールドで、使用する docker-compose 構成ファイルを指定します。「参照」をクリックし、表示される「Docker Compose 構成ファイル」ダイアログで構成ファイルのリストを作成します。
サービスリストから、使用するサービスを選択します。
OK をクリックして、新しいインタープリターがリストに追加される Node.js インタープリターダイアログに戻ります。
新しく構成されたインタープリターをプロジェクトのデフォルトとして設定するには、リストでインタープリターを選択し、OK をクリックして Node.js ダイアログに戻ります。
WebStorm は、たとえば実行 / デバッグ構成を作成するときに、Node インタープリターリストから
Project
エイリアスを選択するたびに、このインタープリターを自動的に使用します。新しいインタープリターに関連付けられたパッケージマネージャーを使用してプロジェクトの依存関係を管理するには、このパッケージマネージャーをプロジェクトのデフォルトとして設定します。これを行うには、パッケージマネージャーフィールドでパッケージマネージャーの場所を指定します。プロジェクトでデフォルトの Node.js インタープリターとパッケージマネージャーを指定するから詳細を参照してください。
プロジェクトでデフォルトの Node.js インタープリターとパッケージマネージャーを指定する
WebStorm は、実行 / デバッグ構成の作成時など、Node インタープリターリストから Project
エイリアスを選択するたびに、デフォルトのプロジェクトインタープリターを自動的に使用します。
デフォルトのプロジェクトパッケージマネージャーは、依存関係を管理するために自動的に使用されます。たとえば、package.json ファイルから <package manager> install
を実行したり、ESLint、Prettier などのサードパーティツールをインストールしたりします。
設定ダイアログ(Ctrl+Alt+S)を開き、 に移動します。
Node インタープリターリストから、現在のプロジェクトでデフォルトで使用する構成を選択します。
パッケージマネージャーリストから、使用するパッケージマネージャーに関連付けられているエイリアスを選択します。WebStorm はその位置を自動的に検出します。
または、必要なパッケージマネージャーの場所を手動で指定します。
npm 実行可能ファイルのデフォルトの場所は
/usr/local/lib/node_modules/npm
です。pnpm のデフォルトの場所は、インストール方法によって異なります。
npm を介してインストールするための /usr/local/lib/node_modules/pnpm。
カールを介してインストールするための /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 です。
Node.js 実行 / デバッグ構成を作成する
構成の編集ダイアログで、ツールバーの
に進みます。開いたをクリックし、コンテキストメニューから Node.js を選択します。「実行 / デバッグ構成: Node.js」ダイアログが開きます。
ファイルフィールドで、それを開始するアプリケーションのメインファイルへのパスを指定します(たとえば、Express(英語) アプリケーションの場合は bin/www)。
必要に応じて、Node.js アプリケーションの実行とデバッグで説明されているいくつかのオプション設定を指定します。
Node インタープリターリストから、Docker Compose を介して関連するリモート Node.js インタープリターを選択します。
または、Node インタープリターフィールドの横にある
をクリックし、上記のようにリモート Node.js インタープリターを構成します。
Docker Compose エリアで、Docker Compose に渡すコマンドとオプションを指定します。デフォルト設定を受け入れるか、「
」をクリックしてカスタム設定 (たとえば、
--rm
や--service-ports
などのカスタム Docker Compose フラグ) を指定します。詳細については、Docker オフィシャル Web サイト(英語)を参照してください。コマンドプレビューを確認してください。
関連ページ:
![](https://resources.jetbrains.com/help/img/idea/2024.2/ws_plugins_settings.png)
プラグインのインストール
プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...
![](https://resources.jetbrains.com/help/img/idea/2024.2/ws_03_DockerSettings.png)
Docker
Docker は、分離された再現可能な環境で実行可能ファイルをデプロイおよび実行するためのツールです。これは、たとえば、本番環境と同じ環境でコードをテストする場合に役立ちます。WebStorm は Docker 機能を統合し、Docker イメージの作成、Docker コンテナーの実行、Docker Compose アプリケーションの管理、パブリックおよびプライベート Docker レジストリの使用など、IDE から直接実行するための支援を提供します。Docker プラグインを有効にするこの機能は...
![](https://resources.jetbrains.com/help/img/idea/2024.2/ws_node_interpreter_from_settings_browse_button.png)
Node.js と Docker
Docker を使用すると、Node.js アプリケーションをすばやくブートストラップして、WebStorm から実行、デバッグ、プロファイリングできます。IDE は、新しい Dockerfile を自動的に作成し、イメージをビルドして実行し、ソースコードを同期し、コンテナーに npm 依存関係をインストールすることにより、初期構成を処理します。WebStorm と Docker のクイックツアーでいくつかの例を見つけることができます。始める前に:設定 | プラグインページのインストール済みタブで、...
![](https://pleiades.io/icons/webstorm.png)
Node.js
このページは、プラグインのインストールに従って、設定 | プラグインページのインストール済みタブで Node.js バンドルプラグインが有効になっている場合にのみ表示されます。次の Node.js バージョンは、WebStorm 2023.3 以降でサポートされています。Node.js 20 - アクティブな長期サポート (LTS) バージョン、Node.js 21 - 現在のバージョン、サポートされている Node.js バージョンの詳細情報 Node インタープリターこのフィールドでは、現在のプロ...
![](https://resources.jetbrains.com/help/img/idea/2024.2/ws_node_docker_run_configuration_docker_container_settings.png)
実行 / デバッグ構成: Node.js
作成: 次の Node.js バージョンは、WebStorm 2023.3 以降でサポートされています。Node.js 20 - アクティブな長期サポート (LTS) バージョン、Node.js 21 - 現在のバージョン、サポートされている Node.js バージョンの詳細を参照してください。このページでは、構成固有の項目と、すべての実行 / デバッグ構成に共通のオプションについて説明します。この構成の使用方法の詳細については、「Node.js の実行とデバッグ」を参照してください。このダイアロ...
![](https://resources.jetbrains.com/help/img/idea/2024.2/ws_node_run_app_with_rc.png)
Node.js の実行とデバッグ
WebStorm は、Node.js アプリケーションの実行とデバッグを支援します。WebStorm から起動し、すでに実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に:設定 | プラグインページのインストール済みタブで、Node.js および JavaScript Debugger に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。Node.js アプリケーションを実行する:WebStorm は...