に参加して、VS Code の AI 支援開発について学びましょう。

コンテナ内の 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 ファイルを含めるかどうかを尋ねられたら、はいまたはいいえを選択します。Compose は通常、複数のコンテナを同時に実行する場合に使用されます。

拡張機能は Dockerfile と .dockerignore ファイルを作成します。Docker Compose ファイルを含めることを選択した場合、docker-compose.yml と docker-compose.debug.yml も生成されます。最後に、拡張機能はコンテナのビルドと実行 (デバッグおよびリリース構成の両方) 用に .vscode/tasks.json に一連の VS Code タスクと、コンテナ内のサービスをデバッグするための .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. コンテナエクスプローラーを開き、新しいイメージがイメージビューに表示されていることを確認します

    Verify Docker image exists

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

  1. 前のセクションでビルドしたイメージを右クリックし、実行またはインタラクティブ実行を選択します。コンテナが起動し、コンテナビューに表示されるはずです

    Running service container

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

    Application page in browser

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

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

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 に設定することで、デバッガがアタッチするまで実行を待機するようにアプリケーションを構成できます。

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

VS Code では、コンテナのログ表示コマンドを使用してログを表示できます

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

  2. コンテナビューで、コンテナを右クリックし、ログ表示を選択します。

    Screenshot of logs in the terminal

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

次のステップ

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

12/13/2022