PhpStorm 2025.3 ヘルプ

Node.js と Vagrant

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

始める前に

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

  2. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブに Vagrant プラグインをインストールして有効にします。

  3. Vagrant(英語) と Oracle の VirtualBox(英語) がコンピューターにダウンロード、インストール、構成されていることを確認してください。詳細については、Vagrant を参照してください。

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

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

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

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

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

    vagrant init jandir/nodejs vagrant up

Vagrant 環境で Node.js ランタイムを構成する

Vagrant 環境の Node.js ランタイムは、Node.js リモートインタープリターの構成ダイアログで設定します。このダイアログは、設定ダイアログの JavaScript ランタイムページから、または Vagrant でアプリケーションを実行またはデバッグするために Node.js の実行 / デバッグ構成を作成または編集するを実行する際に開くことができます。

推奨される方法は、設定ダイアログでリモート 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 構成ファイルが配置されているフォルダーです。この設定に基づいて、PhpStorm は 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

    PhpStorm は、たとえば実行 / デバッグ構成を作成するときに、ノードランタイムリストから 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

  • または、上記のように Vagrant 環境で Node.js ランタイムを使用して Node.js 実行 / デバッグ構成を作成するか、既存の構成を変更して、ダイアログで実行をクリックします。

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

アプリケーションが期待どおりに機能することを確認するために、PhpStorm 組み込みの 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. 上記のように、 Vagrant 環境で Node.js ランタイムを使用して Node.js 実行 / デバッグ構成を作成します。

  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

関連ページ：

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

プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...

Vagrant

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

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

作成: 次の Node.js バージョンは、PhpStorm 2023.3 以降でサポートされています。Node.js 22 - アクティブな長期サポート（LTS）バージョン、Node.js 24 - 現在のバージョン、サポートされている Node.js バージョンの詳細を参照してください。このダイアログで、コンピューター上の Node.js アプリケーションと一緒にデバッガーを開始するための構成を作成します。始める前に：Node.js をダウンロードしてインストールします。構成タブ：ノードラン...

Node.js の実行とデバッグ

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

HTTP クライアント

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

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

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