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

コンテナー内のNode.js

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

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

前提条件

  • Docker と VS Code Container Tools 拡張機能の両方が、概要に記載されているとおりにインストールされている必要があります。
  • 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 ファイルを含めるかどうか尋ねられたら、Yes または No を選択します。Compose は通常、複数のコンテナーを一度に実行する場合に使用されます。

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

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

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

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

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

    Add an environment variable to Docker image

    Container Tools 拡張機能が、利用可能なすべての Dockerfile 命令を一覧表示し、構文を説明していることに注意してください。

    Container Tools 拡張機能は、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. Container Explorer を開き、新しいイメージがイメージビューに表示されていることを確認します。

    Verify Docker image exists

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

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

    Running service container

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

    Application page in browser

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

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

Container Tools 拡張機能は、アプリケーションにファイルを追加すると同時に、コンテナー内で実行されているサービスをデバッグするための 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 内の docker-run: debug タスクで、node オブジェクトの下の inspectMode プロパティを break に設定します。

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

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

  1. Container Explorer に移動します。

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

    Screenshot of logs in the terminal

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

次のステップ

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

12/13/2022