VS Code に Docker を統合する方法

前提条件

重要: 以下を事前に準備してください。

• Docker Desktop または Docker Engine がインストールされ、動作していること。
• Visual Studio Code（最新の安定版推奨）がインストールされていること。
• ネットワークやファイアウォールが Docker Hub やリモートレジストリへのアクセスを妨げていないこと。

補足: WSL2 を使う場合は、WSL2 と Docker Desktop の統合が有効になっていることを確認してください。

Docker 拡張機能のインストール

Visual Studio Code のサイドバーから拡張機能ビューを開き（拡張機能アイコン）、”Docker” を検索して Microsoft の公式拡張をインストールします。インストール完了後、エディタ左下に Docker アイコンが表示され、Docker Explorer を開けます。

注: 拡張はエディタの操作性を高めますが、Docker 本体が正しく動作していないと機能しません。

Docker Desktop と VS Code の接続確認

Docker Desktop を起動した状態で VS Code を開くと、拡張機能が自動的に接続を試みます。接続を確認するには Docker アイコンをクリックして Docker Explorer を開き、CONTAINERS、IMAGES、VOLUMES、NETWORKS、REGISTRIES などが表示されるか確認します。

注記: リモート Docker デーモン（SSH や TCP）を使う場合、Docker コンテキストを切り替える必要があります。拡張からコンテキストの切り替えも可能です。

VS Code でのコンテナ・イメージ・ボリューム管理

Docker Explorer から、実行中／停止中のコンテナを確認したり、イメージのプル、ビルド、削除、ボリュームの検査が可能です。各項目を右クリックすると、Start、Stop、Restart、Remove、Inspect、Open in Browser などのアクションが利用できます。

例: 不要なイメージを削除するには、イメージを右クリックして Remove を選択します。

ボリュームの内容を確認したい場合も同様に右クリックで Inspect を選べます。

メモ: Docker Contexts、Registries、Networks も同じ Explorer 内で確認・管理できます。

サンプル: VS Code でコンテナ化したアプリを構築して実行する

ここでは簡単な Node.js（Express）アプリを使って、Dockerfile の生成、イメージビルド、コンテナ起動までを行います。

プロジェクトディレクトリに 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 で動作します。

Dockerfile の自動生成

VS Code のコマンドパレット（Mac: ⇧⌘P、Windows/Linux: Ctrl+Shift+P）を開き、Add Docker files to Workspace を実行します。アプリケーションプラットフォームとして Node.js を選び、package.json の場所（プロジェクト直下）を指定し、ポートを 4000 に設定します。Compose を含めるか選べます。

拡張機能は Dockerfile、.dockerignore、（選択した場合は）docker-compose.yaml を生成します。

イメージのビルドと実行

Dockerfile を右クリックして Build Image を選ぶか、コマンドパレットで Docker Images: Build Image を実行します。ビルドが完了すると Images セクションに追加されます。

ビルド後、Images から Run（またはコンテキストメニューの Run）を選ぶとコンテナが起動します。

起動したコンテナは CONTAINERS セクションで確認できます。右クリックで Open in Browser を選ぶと、指定したポートでアプリにアクセスできます。

ビルドおよび実行時のログはターミナルまたはコンテナのログビューで確認できます。

VS Code 内でのデバッグとログ確認

Docker 拡張は「コンテナ内でのデバッグ」の入り口を提供します。Node.js アプリをコンテナでデバッグする場合、Dockerfile でデバッグポートを開け、launch.json を適切に設定することで、ローカルの VS Code からブレークポイントを使ってデバッグできます。

ヒューリスティック: デバッグを簡素化するために、開発用イメージは本番イメージより軽量で、ソースマウント（ボリューム）によるライブリロードを利用します。

トラブルシューティングのチェックリスト

• Docker Desktop が起動しているか確認する。
• docker ps がホストで動作するか確認する（権限エラーは sudo または Docker グループを確認）。
• VS Code の Docker 拡張が最新か確認する。
• WSL2 を使っている場合は WSL のディストリビューションが起動しているか確認する。
• ポート競合がないか（ホスト側で 4000 が既に使用されていないか）を確認する。
• イメージビルドでエラーが出る場合は、出力のログ（Build output）を確認し、キャッシュをクリアして再ビルドする（–no-cache）。

重要: エラーメッセージをそのまま検索すると、同様の問題を解決したコミュニティ投稿や公式ドキュメントが見つかる場合があります。

セキュリティと運用上のベストプラクティス

• 本番イメージには開発ツールや不要なパッケージを含めない。
• シークレットはイメージにハードコードせず、環境変数やシークレット管理（例: Docker Secrets や外部シークレットストア）を使う。
• イメージをパブリックに公開する場合は不要なデバッグ情報を除去する。
• レジストリアクセスは TLS を強制し、アクセス権限を最小権限にする。

セキュリティのヒューリスティック: 変更があるたびに自動スキャンを CI に組み込む（脆弱性スキャン）ことでリスクを早期検知します。

ロール別チェックリスト

開発者:

• Dockerfile の基本を理解している。
• VS Code でコンテナをビルドし、コンテナ内で動作確認ができる。
• ローカルでログとターミナルにアクセスできる。

DevOps / プラットフォーム:

• Docker contexts とレジストリの運用ポリシーを管理する。
• CI/CD パイプラインでイメージのビルド、テスト、スキャンを自動化する。
• 本番環境へのデプロイ戦略（Rolling, Blue/Green）を定義する。

テスター / QA:

• コンテナ起動後のエンドポイントで基本的な受け入れテストを実行する。
• ボリュームやネットワーク関連の問題を検証する。

テストケースと受け入れ基準

• イメージが正常にビルドされる（ビルドログにエラーがない）。
• コンテナが起動し、指定ポートでアプリが応答する（http 200 を返す）。
• コンテナのログに例外やスタックトレースがないこと。
• 不要なファイル（.env、個人情報）がイメージに含まれていないこと。

Критерии приёмки:

• コンテナを起動してアプリのルートパスにアクセスし、期待する応答が返ること。
• CI ビルドでイメージの脆弱性スキャンに重要な警告がないこと（可能な限り）。

代替アプローチといつ失敗するか

代替: Dockerfile を手動で作成し、Docker CLI（ターミナル）で管理する方法。利点は細かい制御が可能な点。拡張機能は便利だが、複雑なビルドや特殊なベースイメージが必要な場合は手作業の方が柔軟です。

失敗しやすい場面:

• リモートの Docker デーモンに接続する特殊なネットワーク構成。
• カスタムビルドステップやマルチステージビルドで VS Code の自動生成が意図した通りに働かない場合。

ミニ手順書: ローカル開発から CI への流れ

1. VS Code で Dockerfile と docker-compose を生成する。
2. ローカルでイメージをビルドし、コンテナで動作確認する。
3. Dockerfile をリポジトリにコミットし、CI で同じ Dockerfile を使ってイメージをビルドする設定を追加する。
4. CI 側で脆弱性スキャン、ユニット/統合テストを実行する。
5. レジストリにプッシュし、ステージング→本番へデプロイする。

まとめ

Visual Studio Code の Docker 拡張は、コンテナ化されたワークフローを迅速に始めるための強力なツールです。拡張を使えば Dockerfile の生成、イメージのビルド、コンテナの操作がエディタ内で完結し、開発速度が向上します。一方で、複雑な環境や本番運用では手動の設定や CI の整備が不可欠です。まずはローカルで小さなサンプルを動かし、CI/CD とセキュリティを徐々に組み込んでください。

要点:

• 事前に Docker 本体と VS Code を準備する。
• 公式 Docker 拡張をインストールして Docker Explorer を使う。
• 自動生成された Dockerfile からイメージをビルドして実行確認する。
• セキュリティや CI を考慮した運用を行う。

参考画像: 以下は VS Code と Docker の統合操作の実際のスクリーンショットです。

まとめの一言: 小さく始めて、段階的に自動化とセキュリティを強化しましょう。