PhpStorm 2024.3 ヘルプ

Node.js と Vagrant

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

始める前に

  1. 設定 | プラグインページのインストール済みタブで、JavaScript and TypeScriptJavaScript DebuggerNode.jsNode.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 リモートインタープリターの構成ダイアログで構成されます。このダイアログは、Vagrant でアプリケーションを実行またはデバッグするために Node.js の実行 / デバッグ構成を作成または編集するを実行するときに、設定ダイアログの Node.js ページ以降から開くことができます。

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

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 remote interpreter in Vagrant environment: Add Remote
  4. 開いた Node.js リモートインタープリターの構成ダイアログで、Vagrant を選択します。

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

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

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

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

    Configure remote Node.js interpreter 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 をクリックして Node.js ダイアログに戻ります。

    Remote Interpreters dialog: the new Node.js interpreter in a Vagrant environment added to the list

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

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

    Configure remote Node.js interpreter: 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. Node インタープリターリストから、Vagrant 環境で関連するリモート Node.js インタープリターを選択します。

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

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

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

    Remote Interpreters 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

関連ページ:

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

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

Vagrant

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

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

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

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 サービスに対応するアプリケーションを開発している場合。この場合、開発を開始する前にサービスへのアクセスと...

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

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