DockerをVisual Studio Code（VS Code）と統合することで、開発エクスペリエンスが大幅に向上します。開発者はDockerファイルを効率的に作成・管理し、コンテナやイメージを視覚的に確認し、ログやターミナルに簡単にアクセスできるようになります。この記事では、Docker拡張機能を使用してVS CodeでDockerを設定するための包括的なガイドを提供します。
VS Code に Docker 拡張機能をインストールする方法
Docker拡張機能をインストールする前に、お使いのマシンでDockerとVisual Studio Codeが正しく構成されていることを確認してください。まず、VS Codeの拡張機能ビューを開き、「Docker」を検索して、Microsoftが提供する公式Docker拡張機能をインストールしてください。
インストールが成功すると、エディターの左下隅にDocker/Containersアイコンが表示され、 Docker Explorer が利用可能になったことが示されます。
Docker Desktop と VS Code 間の接続を確立する
Docker Desktop が実行中の場合、VS Code の Docker 拡張機能はシームレスに接続されます。通常、Docker のセットアップに特別な設定（リモートホストや WSL 統合など）が必要な場合を除き、追加の設定は必要ありません。
接続を確認するには、Docker/ContainersアイコンをクリックしてDocker Explorerを起動します。そこでは、実行中および停止中のコンテナ、イメージ、レジストリ、ボリューム、ネットワークを確認できます。
VS Code からコンテナ、イメージ、ボリュームを直接管理する
DockerがVS Codeに完全に統合されたことで、コンテナタスクの管理がこれまでになく簡単になりました。「CONTAINERS」セクションでは、実行中のコンテナと停止中のコンテナの両方を簡単に確認できます。
さらに、任意のコンテナーを右クリックすると、クリックするだけでコンテナーを開始、停止、再起動、または削除するオプションが表示されます。
新しいイメージをプルしたり、既存のセットアップからイメージをビルドしたり、使用されていないイメージを簡単にクリーンアップしたりすることもできます。例えば、不要になったイメージを削除するには、そのイメージを右クリックして「削除」を選択するだけです。
さらに、コンテナにリンクされたボリュームの管理も簡単です。目的のボリュームを右クリックして検査したり変更したりするだけです。
また、ネットワーク、レジストリ、Docker コンテキストを探索および管理したり、ヘルプとフィードバックのセクションにアクセスしたりして、開発ワークフローをさらに最適化することもできます。
VS Code でコンテナ化されたアプリケーションを作成して実行する
実践例として、Docker拡張機能の機能を説明するために、シンプルなNode.js Expressアプリケーションを構築してみましょう。まず、VS Codeでプロジェクト用の新しいフォルダを作成します。このフォルダ内に「」という名前のファイルを作成しindex.js、以下のコードを入力します。
const express = require("express"); const server = express(()); const PORT = 4000; server.get("/", (req, res) => { res.send("Welcome to our Express app!");}); server.listen(PORT, (() => { console.log(`App running on port ${PORT}`);});
この基本的なコードスニペットは、ポート4000をリッスンする小さなExpressアプリを構築し、ルートURL (/) へのアクセス時に「Welcome to our Express app!」というメッセージで応答します。これは、Dockerfileのテストの基盤となります。
次に、Dockerfileが必要です。Dockerfileを手動で作成して命令を指定する代わりに、Docker拡張機能を使えばこのプロセスを簡素化できます。Macの場合は 、Windowsの場合⇧⌘PはCtrl++を押してコマンドパレットを開き、コマンド を入力します。ShiftPAdd Docker files to Workspace
提供されたオプションから、アプリケーション プラットフォームとして Node.js を選択します。
プロジェクトルートにある「package.json」ファイルを指定します。このファイルはアプリケーションの主要な設定ファイルであり、Docker拡張機能がDocker関連の必須ファイルを生成する際に役立ちます。
次に、Docker が適切に公開できるように、アプリが使用するポート番号を指定します。
Docker Compose ファイルを含めるように求められたら、「はい」を選択します。
Docker 拡張機能は、選択内容に応じて、Dockerfile、「.dockerignore」ファイル、「compose.yaml」ファイルを生成します。
Docker イメージの作成を続行するには、Dockerfile を右クリックして [イメージのビルド]を選択するか、コマンド パレットから[Docker Images: イメージのビルド]を実行します。
ビルド プロセスが完了したら、Docker Explorer の[イメージ]セクションに移動して、新しく作成されたプロジェクトが反映されていることを確認します。
画像を実行するには、コマンド パレットを開いて を実行するcontainer images: runか、画像を右クリックして[実行]を選択します。
表示されたリストから最新の画像を選択します。
最後に、 Docker Explorer のコンテナーセクションを確認して、アプリケーションが実行されていることを検証できます。
アプリにアクセスするには、Docker Explorer で実行中のコンテナを右クリックし、[ブラウザーで開く]を選択します。
その結果、以前に指定したポートを通じてアプリケーションにアクセスでき、コンテナが動作している様子を確認できるようになります。
結論
Visual Studio CodeへのDockerの統合により、開発プロセスが効率化され、開発者はコーディング環境から直接コンテナを効率的に構築、実行、制御できるようになります。セットアップが完了すると、Dockerファイルの作成、コンテナやイメージの参照、ログやターミナル出力の閲覧をワンクリックでシームレスに実行できるようになります。この統合により、アプリケーションの実行とテストが簡素化されるだけでなく、整理された生産性の高いワークフローが維持されます。
コメントを残す