VS Codeのエージェントモードを拡張するには、を試してください！

コンテナー内の Node.js

このガイドでは、以下の方法を学びます

  • Express Node.js サービス コンテナー用の Dockerfile ファイルを作成する
  • サービスのビルド、実行、および機能の検証
  • コンテナー内で実行されているサービスをデバッグする

前提条件

  • Docker と VS Code のコンテナー ツール拡張機能の両方を、概要で説明されているとおりにインストールする必要があります
  • Node.js バージョン 10 以降

Express Node.js アプリケーションを作成する

  1. プロジェクト用のフォルダーを作成します。

  2. プロジェクト フォルダーで開発コマンド プロンプトを開き、プロジェクトを作成します

    npx express-generator
npm install

プロジェクトにDockerファイルを追加する

  1. VS Codeでプロジェクトフォルダを開きます。

  2. コマンド パレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) を開き、[Containers: Add Docker Files to Workspace...] コマンドを使用します

    Add Dockerfile to a Node.js project

  3. アプリケーション プラットフォームの入力を求められたら、[Node.js] を選択します。

  4. 既定の package.json ファイルを選択します。

  5. アプリケーション ポートの入力を求められたら、3000 を入力します。

  6. Docker Compose ファイルを含めるかどうかを確認するメッセージが表示されたら、[はい] または [いいえ] を選択します。Compose は通常、複数のコンテナーを一度に実行する場合に使用されます。

拡張機能によって、Dockerfile と .dockerignore ファイルが作成されます。Docker Compose ファイルを含めることを選択した場合は、docker-compose.yml と docker-compose.debug.yml も生成されます。最後に、拡張機能はコンテナーのビルドと実行 (デバッグとリリースの両方の構成で) のための VS Code タスクのセットを .vscode/tasks.json に作成し、コンテナー内のサービスをデバッグするための起動デバッグ構成を .vscode/launch.json に作成します。

イメージに環境変数を追加する

コンテナー ツール拡張機能は、IntelliSense を使用して自動補完とコンテキスト ヘルプを提供することで、Dockerfile の作成を支援します。この機能の動作を確認するには、次の手順に従ってサービス イメージに環境変数を追加します

  1. Dockerfile ファイルを開きます。

  2. ENV 命令を使用して、サービス コンテナー イメージに環境変数を追加します。

    Add an environment variable to Docker image

    コンテナー ツール拡張機能が利用可能なすべての Dockerfile 命令を一覧表示し、構文を説明する方法に注目してください。

    コンテナー ツール拡張機能は、Dockerfile の base ステージを使用して、サービスのコンテナー イメージのデバッグ バージョンを作成します。コンテナー イメージのデバッグ バージョンとリリース バージョンの両方でこの変数が利用できるように、環境変数定義を base ステージに配置します。

  3. Dockerfile ファイルを保存します。

サービスをローカルで実行する

  1. ターミナルを開きます (⌃` (Windows、Linux Ctrl+`))。

  2. npm run start を入力してアプリケーションを開始します

    > express-app@0.0.0 start /Users/user/code/scratch/express-app
> node ./bin/www

  3. Web ブラウザーを開き、https://:3000 に移動します。次のようなページが表示されるはずです

    Application page in browser

  4. テストが完了したら、ターミナルで Ctrl+C を入力します。

サービス イメージをビルドする

  1. コマンド パレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) を開き、[Container Images: Build Image...] コマンドを選択します。

  2. コンテナー エクスプローラーを開き、新しいイメージが [Images] ビューに表示されていることを確認します

    Verify Docker image exists

サービス コンテナーを実行する

  1. 前のセクションでビルドしたイメージを右クリックし、[Run] または [Run Interactive] を選択します。コンテナーが起動し、[Containers] ビューで確認できるはずです

    Running service container

  2. Web ブラウザーを開き、https://:3000 に移動します。次のようなページが表示されるはずです

    Application page in browser

  3. テストが完了したら、[Containers] ビューでコンテナーを右クリックし、[Stop] を選択します。

サービス コンテナーでデバッグする

コンテナー ツール拡張機能がアプリケーションにファイルを追加すると、コンテナー内で実行中のサービスをデバッグするための VS Code デバッガー構成も .vscode/launch.json に追加されます。拡張機能は、サービスが使用するプロトコルとポートを検出し、ブラウザーをそのサービスにポイントします。

  1. routes/index.js の '/' ルートに対する get() ハンドラーにブレークポイントを設定します。

  2. [Containers: Node.js Launch] デバッガー構成が選択されていることを確認します。

    Selected debug configuration

  3. デバッグを開始します (F5 キーを使用)。

    • サービスのイメージがビルドされます。
    • サービスのコンテナーが実行されます。
    • サービス コンテナーにマップされた (ランダムな) ポートでブラウザーが開きます。
    • デバッガーが index.js のブレークポイントで停止します。

    デバッガーはアプリケーションの起動後にアタッチされるため、初回はブレークポイントが見過ごされる可能性があることに注意してください。デバッガーが 2 回目の試行で中断されるのを確認するには、ブラウザーを更新する必要がある場合があります。

    tasks.json の node オブジェクトの下にある docker-run: debug タスクで、inspectMode プロパティを break に設定することで、デバッガーがアタッチされるまで実行を開始しないようにアプリケーションを構成できます。

アプリケーション ログを表示する

コンテナーで [View Logs] コマンドを使用して、VS Code でログを表示できます

  1. コンテナー エクスプローラーに移動します。

  2. [Containers] ビューで、コンテナーを右クリックし、[View Logs] を選択します。

    Screenshot of logs in the terminal

  3. 出力がターミナルに表示されます。

次のステップ

完了しました！コンテナの準備ができたので、次のことを行いたいかもしれません。

12/13/2022