Node.js と Docker

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

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

リモート Node.js ランタイムを作成する

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

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

   

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

   

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

5. サーバーリストから、使用する Docker 構成を選択します。

   

   または、フィールドの横にある新規をクリックし、Docker サポートを有効にする説明に従って Docker サーバーを構成します。

6. イメージ名: リストから、使用するイメージを選択します。

   

   Node.js 実行可能ファイルは自動的に検出され、Node.js インタープリターのパスフィールドに表示されます。

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

   

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

   

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

   新しいランタイムに関連付けられたパッケージマネージャーをプロジェクトの依存関係の管理に使用するには、このパッケージマネージャーをプロジェクトのデフォルトとして設定します。そのためには、パッケージマネージャーフィールドにパッケージマネージャーの場所を指定します。詳しくはデフォルトのプロジェクト Node.js ランタイムとパッケージマネージャーを指定するを参照してください。

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

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

   

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

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

   

   または、ノードランタイムフィールドの横にある をクリックし、上記のようにリモート Node.js ランタイムを構成します。

   

5. 自動生成された Docker コンテナーの設定を確認します。 をクリックすると、ポップアップで設定が開きます。

   

6. オプション : 下記の説明に従ってポートバインディングを構成します。

ポートバインディングを構成する (オプション)

基本的に、アプリケーションが実行されているポートをコンテナーのポートにバインドする必要があります。

Docker コンテナー設定の編集フィールドの横にある をクリックして、表示される Docker コンテナー設定の編集ダイアログで設定を指定します。

1. ポートバインディング領域を展開し、ツールバーの をクリックします。開いたポートバインディングダイアログで、ポートを次のようにマップします。

2. オプションを変更をクリックして、指定するオプションを選択します。

   

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

   • ホストポートフィールドに、コンピューターからアプリケーションにアクセスするための任意のポートを入力します。

   • ホスト IP フィールドに、Docker のホストの IP アドレスを入力します。localhost を使用している場合は、127.0.0.1 と入力します。

     

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

   

4. OK をクリックして、実行 / デバッグ構成: Node.js ダイアログに戻り、ポートバインディングが Docker コンテナーの設定フィールドに表示されます。

   

1. 上記のように Node.js 実行 / デバッグ構成を作成します。

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

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

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

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

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

1. Docker 内の関連するリモート Node.js ランタイムがプロジェクトのデフォルトとして設定され、選択されていることを確認してください。また、このリモートランタイムに関連付けられたパッケージマネージャーがプロジェクトのデフォルトとして設定されていることも確認してください。詳細については、Docker で Node.js ランタイムを構成するおよび npm、pnpm、yarn と Docker を参照してください。

2. package.json を開き、必要なテストフレームワークが devDependencies セクションにリストされていることを確認します。

   { "name": "node-express", "version": "0.0.0", "private": true, "dependencies": { "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1", "pug": "^3.0.2" }, "devDependencies": { "chai": "^4.3.4", "concurrently": "^6.3.0", "eslint": "^8.1.0", "http-server": "^14.0.0", "jest": "^27.3.1", "mocha": "^9.1.3", "nyc": "^15.1.0" } }

3. エディターの任意の場所を右クリックして、コンテキストメニューから実行 '<package manager> install' を選択します。

4. Mocha オフィシャル Web サイト(英語)または Jest オフィシャル Web サイト(英語)の指示に従ってテストを作成します。

5. Mocha テストの実行、Mocha テストのデバッグ、Jest テストの実行、Jest テストのデバッグに従って、エディターから直接単一のテストを実行およびデバッグするか、実行 / デバッグ構成を作成して、テストの一部またはすべてを起動します。

1. Docker 内の関連するリモート Node.js ランタイムがプロジェクトのデフォルトとして設定され、選択されていることを確認してください。また、このリモートランタイムに関連付けられたパッケージマネージャーがプロジェクトのデフォルトとして設定されていることも確認してください。詳細については、Docker で Node.js ランタイムを構成するおよび npm、pnpm、yarn と Docker を参照してください。

2. package.json を開き、ESLint が devDependencies セクションにリストされていることを確認します。

   { "name": "node-express", "version": "0.0.0", "private": true, "dependencies": { "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "morgan": "~1.9.1", "pug": "^3.0.2" }, "devDependencies": { "eslint": "^8.1.0" } }

3. エディターの任意の場所を右クリックして、コンテキストメニューから実行 '<package manager> install' を選択します。

4. その後、ESLint はローカルでコードを操作するときと同じように機能します。検出された不一致の説明をエディターまたは問題ツールウィンドウで直接表示し、提案されたクイックフィックスを適用します。詳細については、「JavaScript リンターおよび ESLint」を参照してください。