🚀 VS Code で

コンテナー内の Node.js

このガイドでは、次の方法について説明します。

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

前提条件

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

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

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

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

    npx express-generator
npm install

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

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

  2. コマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) を開き、[Docker: Docker ファイルをワークスペースに追加...] コマンドを使用します

    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 内) を作成します。

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

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

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

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

    Add an environment variable to Docker image

    Docker 拡張機能が、利用可能なすべての Dockerfile 命令をリストし、構文を説明する方法に注目してください。

    Docker 拡張機能は、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. ウェブブラウザを開き、http://localhost:3000 に移動します。次のようなページが表示されるはずです。

    Application page in browser

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

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

  1. コマンドパレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) を開き、[Docker イメージ: イメージのビルド...] コマンドを選択します。

  2. Docker エクスプローラーを開き、新しいイメージが [イメージ] ツリーに表示されていることを確認します

    Verify Docker image exists

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

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

    Running service container

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

    Application page in browser

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

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

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

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

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

    Selected Docker debug configuration

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

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

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

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

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

コンテナーの [ログを表示] コマンドを使用すると、VS Code でログを表示できます

  1. Docker エクスプローラーに移動します。

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

    Screenshot of logs in the terminal

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

次のステップ

これで完了です。コンテナーの準備ができたので、次のことを行うことができます。

12/13/2022