VS Code でコンテナーを検査する

2019年10月31日 Bowden Kelly 著、@bowdenk7

コンテナー化されたアプリケーションを開発する際、ビルド時および実行時の問題をデバッグするために、実行中のコンテナーに docker exec --it {containerID} /bin/sh を使用してシェルをアタッチすることはよく行われます。

この手法を使うと、コマンドライン経由でコンテナー環境を検査できますが、問題を診断するための豊富なツールセットは提供されません。

この記事では、Visual Studio Code をコンテナーにアタッチして、デバッグを含む VS Code の全機能を使用してコンテナーを検査し、何が問題なのかを特定して修正する方法を見ていきます。

今年5月にリリースされた Dev Containers 拡張機能を使用すると、ローカルの VS Code をコンテナーホストに接続しながら、すべての個人設定、テーマ、キーバインディングを維持できます。

前提条件

このブログ記事では、Docker Desktop と Visual Studio Code がインストールされていることを前提としています。また、Dev Containers 拡張機能も必要です。Dev Containers 拡張機能をインストールするには、拡張機能ビュー (⇧⌘X (Windows, Linux Ctrl+Shift+X)) を開き、「Dev Containers」を検索し、インストールを選択し、指示された場合は VS Code を再起動してください。

アプリケーション

まず必要なのは、コンテナー内で実行できるアプリケーションです。すでにお持ちであれば、それで大丈夫です！この手順はスキップできます。そうでなければ、このシンプルな Node.js Express アプリケーションをクローンしてください。

注意: Node.js をローカルにインストールする必要はありません。このアプリケーションはコンテナー内で実行します！

git clone https://github.com/microsoft/vscode-express-sample.git

このアプリケーションには、Node 10 イメージをベースにしたシンプルな Dockerfile と、イメージを実行し、適切なポートを公開し、ローカルファイルシステムをマッピングするために使用する docker-compose.yml ファイルが含まれています。ローカルで実行する場合と同じようにアプリをデバッグできるように、Node を –inspect フラグ付きで実行しています。実際のアプリケーションでは、本番デプロイ用に別の Docker Compose ファイルを用意したいと考えるでしょう。

注意: Docker Compose ファイルは必須ではありません。単一の Dockerfile で作成されたコンテナーにもアタッチできます。

ビルドと実行

アプリケーションをビルドして実行するには、まず依存関係をインストールし、次にターミナル/コマンドプロンプトから docker-compose up を実行します。これにより、Node ベースイメージがダウンロードされ、依存関係がコピーされ、コンテナーが起動します。

docker-compose up

すべてうまくいけば、次のような出力が表示されるはずです。

そして、https://:3000 にアクセスすると、次の画面が表示されるはずです。

コンテナーにアタッチする

これで、Dev Containers 拡張機能を使用して、実行中のコンテナーにアタッチし、環境を検査し、アプリケーションをデバッグできます。

アクティビティバーの「リモートエクスプローラー」を選択すると、Other Containers セクションにアタッチできる実行中のコンテナーのリストが表示されます。先ほど起動したコンテナー（名前は 'express_server_1'）を見つけて、Connect to Container ボタンを使用してアタッチします。そのコンテナーがリモートエクスプローラーのAttached Containers セクションに表示されるはずです。

これにより、右下に次の通知が表示された新しい VS Code ウィンドウ（インスタンス）が起動します。

この間、VS Code は、アプリケーションが実行されているコンテナー内に VS Code Server のインスタンスをインストールしています。このインストール手順の詳細と進捗を確認するには、通知に表示されている詳細リンクを選択できます。VS Code サーバーがインストールされると、ローカルの VS Code クライアントがリモート VS Code サーバーに接続します。これにより、すべての設定、テーマ、キーバインディングが適用されたローカルの VS Code インスタンスが、アプリケーションと共にコンテナー内で実行されている「バックエンド」に接続されます。

接続が完了すると、左下に緑色のインジケーターが表示された新しい VS Code ウィンドウが開きます。これは、この VS Code インスタンスがリモートコンテキストで実行されていることを示しています。インジケーターをクリックすると、現在のリモートコンテキストに関連するコマンドのドロップダウンが表示されます。

さっそくフォルダーを開くボタンを選択し、/usr/src/app に移動してアプリケーションを開きましょう。「フォルダーを開く」ダイアログには、実行中のコンテナー内のファイルシステムが表示され、ローカルファイルシステムではないことに注意してください。

ソースフォルダーを開くと、エディターに express-server.json というファイル名のファイルが開かれていることに気づくでしょう。この名前は、アタッチしたコンテナーイメージ名に由来しています。この例では、docker-compose は、フォルダー名 express と docker-compose.yml ファイルで定義されているサービス名 server から導出されたイメージ名「express_server」を作成します。このファイルは、イメージに関連付けられた設定ファイルであり、このイメージに基づくコンテナーにアタッチする際に設定を記憶します。自動保存がオンになっていない場合は、このファイルを保存する必要があります。今後、このイメージにアタッチすると、VS Code はこのソースフォルダーを再度開きます。

注意: 現在の開発コンテナーのこのファイルは、コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) からコンテナー設定ファイルを開くコマンドを実行して表示できます。

この時点では、VS Code は通常のローカル VS Code ウィンドウと同じように見えます。

通常のローカル VS Code コンテキストで行えることは、すべて行うことができます。

例えば、app.js を開きます。8行目を右クリックし、すべての参照を検索を実行して usersRouter のすべての使用箇所を見つけます。docker-compose ファイルを使用してローカルファイルシステムをコンテナーにマウントしているため、すべての編集はローカルディスクに永続化されます。

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

開発コンテナーがローカル環境とどれほど似ているかをさらに示すために、デバッガーをアタッチしてみましょう。Node アプリケーションを docker-compose.yaml で –inspect パラメーター付きで起動したので、そのプロセスにデバッガーをアタッチするだけです。

コマンドパレット (⇧⌘P (Windows, Linux Ctrl+Shift+P)) で、「デバッグ: Nodeプロセスにアタッチ」を検索して選択します。コンテナー内で複数の Node プロセスが実行されている可能性があります。私たちのアプリケーションを実行しているプロセスを選択したいので、bin/www と表示されているものを選択します。

次に、index.js を開き、行番号6のガターをクリックするか、F9を押してブレークポイントを配置します。

res.render('index', { title: 'Express' });

さあ、ブラウザーで https://:3000 にアクセスし、期待通りにブレークポイントがヒットすることを確認してください！

拡張機能をインストールする

通常の VS Code インスタンスと同様に、開発コンテナーにアタッチしている間でも拡張機能をインストールして使用できます。

拡張機能の種類に応じて、クライアント側で実行されるか、リモート VS Code サーバー上のコンテナー内で実行されます。テーマやスニペットなど、主に UI ベースの拡張機能はクライアント側に残りますが、その他のすべての拡張機能はコンテナーにインストールされます。これにより、各環境で作業する際に必要な拡張機能のみを保持しつつ、すべての環境で一貫した UI を維持することができます。

拡張機能ビュー (⇧⌘X (Windows, Linux Ctrl+Shift+X)) を開くと、ローカルにインストールされている拡張機能と、現在のコンテナーインスタンスにインストールされている拡張機能のリストが表示されます。コンテナーにインストールする必要があるローカルにインストールされた拡張機能（以下の Azure Account 拡張機能など）は、グレー表示されます。

拡張機能ビューで「gitlens」と入力し、アタッチされたコンテナーにインストールを選択して、GitLens 拡張機能をインストールしてみましょう。

これにより、VS Code の再起動が求められ、再起動すると、新しくインストールされた拡張機能とともにコンテナーと VS Code サーバーが再起動される間、Dev Containerをインストール中の通知が短時間表示されます。

また、先ほど見たコンテナー構成ファイルが再び開かれ、このイメージにアタッチするたびにインストールしたい拡張機能をリストする新しいプロパティで更新されていることに気づくでしょう。

{
  "workspace": "/usr/src/app",
  "extensions": ["eamodio.gitlens"]
}

それでは、任意のファイルを開き、コード行を選択すると、GitLens によって提供されるインラインの Git 情報が表示されることに注目してください！

クリーンアップ

作業が完了したら、コマンドパレットからリモート接続を閉じるコマンドを実行するか、単に VS Code ウィンドウを閉じてリモート接続を終了できます。

次に、ターミナル/コマンドプロンプトから docker-compose down を実行して、実行中のコンテナーを停止します。これにより、メモリが解放され、使用されていたポートも解放されます。

docker-compose down

これで、別のコンテナーを起動して別のプロジェクトで作業する準備ができました！

次のステップ

この記事では、Dev Containers 拡張機能を使用して、既存のコンテナー化されたアプリケーションにアタッチする方法について説明しました。

また、作成またはアタッチしたい開発環境を記述し、プロジェクトと共にチームメンバーと共有できる devcontainer.json を作成することもできます。

その他の役立つリソースには、完全な コンテナー内での開発 ドキュメント、高度なコンテナー構成、および Dev Containers 拡張機能を使用した分離された開発環境の構築に関する 入門チュートリアル があります。

リモートコーディングをお楽しみください！

Bowden Kelly, VS Code プログラムマネージャー @bowdenk7