WebStorm 2025.3 ヘルプ

Node.js と Vagrant

Vagrant(英語) を使用すると、Node.js アプリケーションをすばやくブートストラップして、WebStorm から実行、デバッグ、プロファイリングできます。

始める前に

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

  2. Vagrant(英語) と Oracle の VirtualBox(英語) がコンピューターにダウンロード、インストール、構成されていることを確認してください。詳細については、Vagrant: 再現可能な開発環境の使用を参照してください。

  3. 次の実行可能ファイルの親フォルダーがシステム PATH 変数に追加されていることを確認します。

    • Vagrant から vagrant.bat または vagrant を選択してください。これは、Vagrant インストーラによって自動的に実行されます。

    • Oracle VirtualBox インストールからの VBoxManage.exe または VBoxManage。

  4. Vagrant 環境で Node.js を実行可能にするには、すぐに使用できる Vagrant ボックス（jandir/nodejs(英語) など）から始めることができます。

    埋め込まれたターミナル（Alt+F12）を開き、次のコマンドを実行します。

    vagrant init jandir/nodejs vagrant up

Configure a Node.js runtime in a Vagrant environment

Node.js runtimes in Vagrant environments are configured in the Node.js リモートインタープリターの構成 dialog. You can open this dialog from the JavaScript ランタイム page of the 設定 dialog or later, when you Node.js の実行 / デバッグ構成を作成または編集する for running or debugging your application on Vagrant.

推奨される方法は、設定ダイアログでリモート Node.js ランタイムを設定することです。この場合、ランタイムと関連するパッケージマネージャーをプロジェクトのデフォルトとして設定できます。

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

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

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

    Add runtime - Browse button

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

    Configure Node.js remote runtime in Vagrant instance: Add Remote

  4. 開いた Node.js リモートランタイムを構成するダイアログで、Vagrant を選択します。

  5. 使用する環境を指す Vagrant インスタンスフォルダーを指定してください。

    技術的には、目的の環境の VagrantFile 構成ファイルが配置されているフォルダーです。この設定に基づいて、WebStorm は Vagrant ホストを検出し、Vagrant ホスト URL 読み取り専用フィールドにリンクとして表示します。

    デフォルトでは、フィールドには現在のプロジェクトフォルダーが表示されます。

  6. Node.js インタープリターのパスフィールドで、Node.js 実行可能ファイルの場所を指定します。

    Configure remote Node.js runtime in Vagrant environment: specify instance folder and location of Node executable

    Node.js 実行可能ファイルを見つけるには、埋め込みターミナル（Alt+F12）を開いて次のように入力します。

    vagrant ssh whereis node exit
    Locate Node.js executable in a Vagrant environment

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

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

    Remote runtimes dialog: the new Node.js runtime in a Vagrant environment added to the list

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

  9. 使用するパッケージマネージャーへのパスを指定します。

    Configure remote Node.js runtime: package manager specified

    パッケージマネージャーを見つけるには、組み込みターミナル（Alt+F12）を開いて次のように入力します。

    vagrant ssh whereis <package manager> exit
    Locate a package manager in a Vagrant environment

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

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

    ファイルフィールドで、アプリケーションを開始するファイルへのパスを指定します。

    Node.js run/debug configuration: JavaScript file specified

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

  3. ノードランタイムリストから、Vagrant 環境内の関連するリモート Node.js ランタイムを選択します。

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

    または、ノードランタイムフィールドの横にある the Browse button をクリックします。Node.js ランタイムダイアログが開きます。

    ツールバーの the Add button をクリックし、コンテキストメニューからリモートの追加を選択します。

    Remote runtimes dialog

    上記の説明に従って、 Vagrant 環境でリモート Node.js ランタイムを構成します。

  4. 実行 / デバッグ構成を保存するには、OK をクリックします。

Vagrant 環境で Node.js アプリケーションを実行する

  • ツールバーの実行 / デバッグ構成ウィジェットリストから、新しく作成した Node.js 構成を選択し、その横にある the Run button をクリックします。

    Run an app in a Vagrant environment

  • Alternatively, create a Node.js run/debug configuration with a Node.js runtime in a Vagrant environment as described above or modify an existing one and click 実行 in the dialog.

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

アプリケーションが期待どおりに機能することを確認するために、WebStorm 組み込みの HTTP クライアントから HTTP リクエストを実行できます。

Node.js with Vagrant: connect to a running app with a HTTP Request

  1. HTTP リクエストファイルを作成します。

  2. 次のリクエストを書いてください。

    GET http://<host IP>:<application port>/

    デフォルトでは、ホスト IP は 192.168.33.10 です。例:

    GET http://192.168.33.10:3000/

  3. ガターの the Run HTTP Request button をクリックし、Run http://<host IP>:<application port>/ の横にある the Run HTTP Request button をクリックします。

    Launch a HTTP Request

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

Vagrant 環境で Node.js アプリケーションをデバッグする

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

  2. Create a Node.js run/debug configuration with a Node.js runtime in a Vagrant environment as described above.

  3. ツールバーの実行ウィジェットリストから、新しく作成した Node.js 構成を選択し、その横にある the Debug button をクリックします。

  4. 開いたデバッグツールウィンドウで、デバッグセッションに進みます。ブレークポイントをステップスルーし、フレームを切り替え、オンザフライで値を変更し、中断されたプログラムを調べ、式を評価し、ウォッチを設定します。

    Debug a Node.js app in a Vagrant environment
2025 年 11 月 06 日
Node.js と Docker Compose SSH 経由の Node.js

関連ページ：

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

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

Vagrant: 再現可能な開発環境の使用

Vagrant は、仮想マシンのライフサイクルを管理するために使用されるコマンドラインユーティリティです。WebStorm は Vagrant と完全に統合されており、Vagrant 仮想環境を構成し、仮想マシンの動作を制御し、プロジェクト内から Vagrant コマンドを実行できます。Vagrant を使用する場合、次の定義が満たされます。Vagrantfile: Vagrant 環境を定義し、仮想ボックスのすべての構成を格納し、仮想マシンの操作方法を Vagrant に指示するメイン構成ファイ...

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

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

Node.js の実行とデバッグ

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

HTTP クライアント

HTTP クライアントプラグインを使用すると、WebStorm コードエディターで HTTP リクエストを直接作成、編集、実行できます。HTTP リクエストを作成して実行する必要がある場合、主に 2 つのユースケースがあります。RESTful Web サービスを開発していて、それが期待どおりに機能し、仕様に準拠してアクセス可能であり、正しく応答することを確認したい場合。RESTful Web サービスに対応するアプリケーションを開発している場合。この場合、開発を開始する前にサービスへのアクセスと...

デバッグツールウィンドウ

デバッガーセッションを開始すると、デバッグツールウィンドウが開きます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ (フレーム、スレッド、変数など) を表示および分析し、デバッガーアクションを実行します。デフォルトでは、プログラムがブレークポイントに到達したときにデバッグツールウィンドウが開き、セッションが終了しても非表示になりません。この動作を変更するには、ビルド、実行、デプロイ | デバッガー設定ページに移動し、ブレークポイントでデバッグウィンドウを表示するチェ...