Node.js と Docker

1. 設定 | プラグイン ページの インストール済み タブで、 JavaScript and TypeScriptおよび Dockerに必要なプラグインが有効になっていることを確認します。 詳細は、 プラグインの管理を参照してください。

2. JetBrains Marketplaceからプラグインをインストールするの説明に従って、 設定 | プラグイン ページ、タブ Marketplace で Node.js、 Node.js Remote Interpreter、 JavaScript Debuggerプラグインをインストールします。 プラグインは IntelliJ IDEA Ultimate でのみ利用できます。

3. Docker の説明に従って Dockerをダウンロード、インストール、および構成します。

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

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

2. Node runtime フィールドの横にある をクリックします。

   

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

   

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

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

   

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

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

   

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

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

   

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

   

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

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

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

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

   

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

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

   

   または、 Node runtime フィールドの横にある をクリックし、 上記のようにリモート 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. エディターの任意の場所を右クリックして、コンテキストメニューから '<パッケージマネージャー> のインストール' の実行 を選択します。

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

5. ユニットテストが保存されているフォルダーをテストソースフォルダーとしてマークします（コンテンツルート を参照）。

6. 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. エディターの任意の場所を右クリックして、コンテキストメニューから '<パッケージマネージャー> のインストール' の実行 を選択します。

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