PhpStorm 2020.3 ヘルプ

Node.js と Docker

Node.js アプリケーションを Docker で素早くブートストラップして、PhpStorm から実行、デバッグ、プロファイルを作成できます。IDE は、新しい Dockerfile を自動的に作成し、イメージをビルドおよび実行し、ソースコードを同期し、npm 依存関係をコンテナーにインストールすることにより、初期構成を処理します。

WebStorm と Docker のクイックツアー(英語)でいくつかの例を見つけることができます

始める前に

  1. JetBrains リポジトリからプラグインをインストールする説明に従って、設定 / 環境設定 | プラグインページで Node.js リモートインタープリタープラグインをインストールして有効にします。

  2. 設定 / 環境設定 | プラグインページで Node.js と Docker バンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。

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

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

  1. メインメニューから実行 | 構成の編集を選択し、次に構成の編集ダイアログでツールバーのthe Add buttonをクリックしてリストから Node.js を選択します。実行 / デバッグ構成: Node.js ダイアログが開きます。

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

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

Node.js インタープリターを指定する

タイプリモートインタープリター - Docker の構成済み Node.js インタープリターの 1 つを Node インタープリターリストから選択するか、新しいものを構成します。

  1. 実行 / デバッグ構成: Node.js ダイアログで、Node インタープリターフィールドの横にあるthe Browse buttonをクリックします。

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

  3. 開いた Node.js リモート インタープリターの設定ダイアログで、Docker オプションを選択します。

    1. サーバーフィールドで、使用する Docker の設定を指定します。詳細については、Docker デーモンの接続設定を構成するを参照してください。リストから構成を選択するか、新規 ... をクリックして、開いた Docker ページに新しい構成を作成します。

    2. イメージ名: フィールドで、使用するベース Docker イメージを指定します。リストから以前にダウンロードしたイメージまたはカスタムイメージのいずれかを選択するか、node:argonmhart/alpine-node などのイメージ名を手動で入力します。後で実行構成を起動すると、Docker はマシン上で指定されたイメージを検索します。検索が失敗した場合、イメージは Docker レジストリページDocker 公式イメージ(英語)リポジトリからダウンロードされます。

    3. Node.js インタープリターのパスフィールドには、指定されたイメージからのデフォルトの Node.js インタープリターの場所が表示されます。

    4. OK をクリックすると、PhpStorm は Node.js リモート インタープリターの設定ダイアログを閉じ、新しいインタープリター構成がリストに追加される Node.js インタープリターダイアログに移動します。OK をクリックして、実行構成に戻ります。

Docker コンテナー設定を指定する

自動設定でも、アプリケーションが実行されているポートをコンテナーのポートとバインドする必要があります。これらの公開ポートは Docker ホストの IP アドレス(デフォルトでは 192.168.99.100)で利用可能です。エクスプレスアプリケーションのクライアント側をデバッグするときは、このようなバインディングが必要です。この場合は、コンピューターからブラウザーを開き、アプリケーションで指定されているポートを介してコンテナーホストのアプリケーションにアクセスする必要があります。

ポートバインドを構成する

  1. Docker コンテナー設定フィールドでthe Browse buttonをクリックし、表示される Docker コンテナー設定の編集ダイアログでポートバインディング領域を展開します。

  2. the Add button をクリックし、開いているポートバインディングダイアログで、次のようにポートをマッピングします。

    • コンテナーポート」フィールドに、アプリケーションで指定されているポートを入力します。

    • ホストポートフィールドに、コンピューターのブラウザーでアプリケーションを開くときに経由するポートを入力します。

    • ホスト IP フィールドに、Docker のホストの IP アドレスを入力します。デフォルト IP は 192.168.99.100 です。ホストは、設定 / 環境設定ダイアログDocker ページAPI URL フィールドで指定されます。

    • OK をクリックして Docker コンテナー設定の編集ダイアログに戻り、新しいポートマッピングがリストに追加されます。

  3. OK をクリックして実行 / デバッグ構成: Node.js ダイアログに戻ります。

アプリケーションを実行する

  1. 上記のようNode.js 構成を作成します。

  2. ツールバーの実行 / デバッグ構成を選択しますリストから、新しく作成された Node.js 構成を選択します。

  3. the Run button をクリックして実行 / デバッグ構成を選択しますリストに移動します。

デバッグを開始する

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

  2. 上記の説明に従って Node.js 構成を作成し、ツールバーの実行 / デバッグ構成を選択しますリストから選択して、リストの横にあるthe Debug buttonをクリックします。

  3. Node.js アプリケーションと一緒にデバッガーを起動する場合に進みます。

Docker Compose 定義を持つ Docker コンテナーでリモート Node.js インタープリターを使用する

Docker Compose(英語) を使用すると、Node.js サーバーとアプリケーションコードを別々のサービスとして実行できます。必要に応じてコンテナーを追加することで各サービスを拡張できます。これにより、実稼働環境に似た動的環境で効率的な開発とテストを実行できます。

マッピングの構成

リモート Node.js インタープリターを使ってアプリケーションをデバッグするとき、デバッガーは PhpStorm に現在処理されているファイルの名前と処理される行の番号を伝えます。PhpStorm はこのファイルのローカルコピーを開き、提供された番号の行を示します。この動作は、サーバー上のファイルとフォルダー、およびそれらのローカルコピーとの間の対応を指定することによって有効になります。この対応はマッピングと呼ばれ、デバッグ構成で設定されます。

  1. メインメニューから実行 | 構成の編集を選択します。表示される構成の編集ダイアログで、ツールバーのthe Add New Configuration button をクリックして、コンテキストメニューから Node.js を選択します。

  2. 開いた実行 / デバッグ構成: Node.js ダイアログで、Node インタープリターリストから必要なリモートインタープリターを選択します。

  3. パスマッピングフィールドの横にあるthe Browse buttonをクリックします。開くプロジェクトパスマッピングの編集ダイアログは、デプロイ構成から取得されたパスマッピングを示しています。これらのマッピングは読み取り専用です。

    • カスタムマッピングを追加するには、the Add buttonをクリックして、プロジェクト内のパスとリモートランタイム環境の対応するパスをそれぞれローカルパスフィールドとリモートパスフィールドに指定します。手動でパスを入力するか、the Browse buttonをクリックして表示されるダイアログで関連ファイルまたはフォルダーを選択します。

    • カスタムマッピングを削除するには、リスト内でカスタムマッピングを選択し、the Remove buttonをクリックします。

関連ページ:

プラグインを管理する

PhpStorm のユーザーインターフェースはデフォルトでは英語です。日本語化する場合は、日本語言語パックのインストールを参照してください。プラグインは以下に示すように PhpStorm のコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する...

Docker

Dockerを使用すると、開発者はアプリケーションをコンテナー内にデプロイして、実稼働と同じ環境でコードをテストできます。PhpStorm は、Dockerプラグインを使用して Docker サポートを提供します。プラグインはバンドルされ、デフォルトで有効になっています。Dockerプラグインは P...

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

ダイアログは、プラグインの管理に従って、設定 / 環境設定 | プラグインページでNode.jsバンドルプラグインが有効になっている場合にのみ使用できます。このダイアログで、コンピューター上の Node.js アプリケーションと一緒にデバッガーを開始するための構成を作成します。始める前に :Node...

Node.js の実行とデバッグ

PhpStorm は、Node.js アプリケーションの実行とデバッグを支援します。PhpStorm から起動し、既に実行中のアプリケーションにアタッチするアプリケーションをデバッグできます。始める前に :設定 / 環境設定 | プラグインページでNode.jsバンドルプラグインが有効になっているこ...

Node.js インタープリターダイアログ

このダイアログを使用して、ローカルまたはリモートNode.js インタープリターまたはWindows Subsystem for Linux の Node.jsを構成します。ローカル Node.js インタープリターという用語は、コンピューター上の Node.js のインストールを示します。リモート...

設定 / 「設定」ダイアログ

現在のプロジェクトに関連する設定はアイコンでマークされています。設定ダイアログでは、PhpStorm の動作と外観を制御できます。ダイアログの左上部分にある検索フィールドを使用して、目的のオプションを見つけます。あるいは、検索ボックスにあるカテゴリの階層リスト(設定のグループ)を使用して設定を参照す...