Node.js と Docker

1. JavaScript and TypeScript、 JavaScript デバッガー、 Node.js、 Node.js リモートインタープリター、 Docker の必須プラグインが 設定 | プラグイン ページ、 インストール済み タブで有効化されていることを確認してください。 詳細については、 プラグインの管理 を参照してください。

2. 設定 | プラグイン ページの Marketplace タブで Node.js および Node.js リモートインタープリター プラグインを、 JetBrains Marketplace からプラグインをインストールする方法に従ってインストールします。

3. 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 ランタイム ダイアログに戻ります。

   

   CLion は、 ノードランタイム リストから プロジェクト エイリアスを選択するたびに、このインタープリターを自動的に使用します。たとえば、実行／デバッグ構成の作成時などです。

   新しいランタイムに関連付けられたパッケージマネージャーをプロジェクトの依存関係の管理に使用するには、このパッケージマネージャーをプロジェクトのデフォルトとして設定します。 そのためには、 パッケージマネージャー フィールドにパッケージマネージャーの場所を指定します。 詳しくは デフォルトのプロジェクト 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. • 「コンテナーポート 」フィールドに、アプリケーションで指定されているポートを入力します。

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

   • 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. パッケージ.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. パッケージ.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 を参照してください。