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

2019年10月31日 Bowden Kelly, @bowdenk7

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

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

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

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

前提条件

このブログ記事は、Docker Desktop と Visual Studio Code がインストールされていることを前提としています。また、開発コンテナー 拡張機能も必要です。開発コンテナー拡張機能をインストールするには、拡張機能ビューを開き（⇧⌘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ファイルがあります。ローカルで実行する場合と同様にアプリケーションをデバッグできるように、–inspectフラグを付けてNodeを実行しています。実際のアプリケーションでは、おそらくプロダクションデプロイメント用に別のDocker Composeファイルが必要になるでしょう。

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

ビルドと実行

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

docker-compose up

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

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

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

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

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

これにより、右下に次の通知が表示された新しい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 を開き、ガターをクリックするか、F9 を押して6行目にブレークポイントを設定します。

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

これで、ブラウザでhttps://:3000にアクセスすると、期待通りにブレークポイントがトリガーされることを確認できます！

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

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

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

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

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

これにより、VS Code の再起動が促され、再起動すると、新しくインストールされた拡張機能でコンテナーと VS Code サーバーが再起動される間、一時的に開発コンテナーをインストール中という通知が表示されます。

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

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

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

クリーンアップ

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

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

docker-compose down

これで、別のコンテナーを起動し、別のプロジェクトに取り組む準備が整いました！

次のステップ

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

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

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

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

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