VS Code でのコンテナーの検査

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

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

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

この記事では、デバッグを含む VS Code のすべての機能を活用してコンテナーを検査し、何が問題なのかを把握して修正できるように、Visual Studio 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 ファイルがあります。ローカルで実行する場合と同様にアプリをデバッグできるように、–inspect フラグを指定して Node を実行しています。実際のアプリケーションでは、おそらく本番環境のデプロイメント用に別の Docker Compose ファイルが必要になります。

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

ビルドと実行

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

docker-compose up

すべてが正常に動作した場合、次のような出力が表示されるはずです。

また、http://localhost:3000 に移動して、次の内容を確認できるはずです。

コンテナーへのアタッチ

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

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

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

この間、VS Code は、アプリが実行されているコンテナー内に VS Code サーバー のインスタンスをインストールしています。このインストール ステップの詳細と進行状況を確認するには、通知に表示される [詳細] リンクを選択します。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 ファイルを使用してローカル ファイル システムをコンテナーにマウントしたため、編集内容はローカル ディスクに永続化されます。

コンテナー内でのデバッグ

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

コマンド パレット (⇧⌘P (Windows、Linux Ctrl+Shift+P)) で、[デバッグ: Node プロセスにアタッチ] を検索して選択します。コンテナー内で実行されている Node プロセスがいくつかある可能性があります。アプリケーションを実行しているプロセスが必要です。したがって、bin/www を表示するプロセスを選択します。

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

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

次に、ブラウザーで http://localhost:3000 に移動すると、ブレークポイントが期待どおりにトリガーされるのがわかります!

拡張機能のインストール

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

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

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

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

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

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

{
  "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