初心者向けDev Containers導入ガイド：VSCodeで効率化

やりたいこと
Dev Containersとは？
Dev Containersの導入方法
1. VSCodeの拡張機能「Remote Development」をインストール
  1. インストール手順
2. .devcontainer/devcontainer.jsonファイルを作成
  1. 設定項目の説明
vscodeでコンテナに入る方法
1. 手順1: VSCodeの左下のボタンをクリック
2. 手順2: コンテナ内でフォルダを開く
サンプル: Python環境にDevContainerを導入
1. サンプル構成
実行結果
まとめと感想

やりたいこと

毎回コンテナに入ってコマンド操作を行うのが面倒なので、効率的に開発を進めるためにDev Containersを導入したいと思います。Dev Containersを使うことで、VSCodeを使って簡単にコンテナ内での開発ができるようになります。

Dockerでの開発は非常に便利ですが、コンテナに入るためのコマンドや設定は手間がかかることが多いです。特にプロジェクトが大きくなればなるほど、環境構築に時間がかかってしまいます。そこで、Dev Containersを導入してVSCodeから直接コンテナ内にアクセスし、効率的に作業を進める方法を紹介します。

Dev Containersとは？

Dev Containersは、VSCodeの拡張機能で、コンテナ化された開発環境を簡単に構築・管理できるツールです。これを使うことで、開発者はDockerコンテナ内でソースコードの編集、デバッグ、実行などをシームレスに行うことができます。

たとえば、複数のプロジェクトがそれぞれ異なる依存関係を持っている場合でも、Dev Containersを使うことで、それぞれのプロジェクトで使うDockerイメージに合った環境を簡単に再現できます。また、チームで同じ環境を共有することができ、開発の効率化にもつながります。

Dev Containersの導入方法

VSCodeの拡張機能「Remote Development」をインストール

まず、VSCodeにRemote Developmentという拡張機能をインストールする必要があります。この拡張機能を使うことで、リモートのコンテナやSSH接続先に直接アクセスして開発ができるようになります。

インストール手順

VSCodeを起動します。
左側の拡張機能アイコン（四角形が4つ重なったアイコン）をクリックします。
検索バーに「Remote Development」と入力し、検索結果からインストールします。

インストールが完了したら、次に進みましょう。

.devcontainer/devcontainer.jsonファイルを作成

次に、プロジェクトのルートディレクトリに.devcontainerというフォルダを作成し、その中にdevcontainer.jsonファイルを作成します。このファイルでは、Dev Containerの設定を記述します。

以下は、devcontainer.jsonの基本的な記述内容です。

YAML

{
  "name": "好きな名前",
  "dockerComposeFile": "docker-compose.ymlのパス",
  "service": "サービス名(docker-compose.ymlのサービス名に合わせる)",
  "workspaceFolder": "コンテナ内のワークスペースフォルダ設定",
  "customizations": {
    "vscode": {
      "extensions": ["ms-python.python"]  // 使用したいVSCode拡張機能をリスト化
    }
  }
}

設定項目の説明

name: コンテナの名前を設定します。任意の名前を付けられます。
dockerComposeFile: 使用するdocker-compose.ymlのパスを指定します。
service: docker-compose.ymlで定義されたサービス名と一致させる必要があります。
workspaceFolder: コンテナ内での作業フォルダを指定します。たとえば、/appなど。
customizations: VSCodeに追加する拡張機能を指定します。ここでは、Python開発用にms-python.pythonをインストールしています。

詳しくは公式リファレンスを参照してください。

vscodeでコンテナに入る方法

手順1: VSCodeの左下のボタンをクリック

VSCodeの画面左下にある青いボタン（「><」のアイコン）をクリックします。

手順2: コンテナ内でフォルダを開く

「コンテナで再度開く」というオプションが表示されますので、それをクリックします。

これで、VSCode上でコンテナ内に入ることができ、そこで開発を行えるようになります。コンテナに入るたびにコマンドを打つ必要がなく、非常に便利です。

サンプル: Python環境にDevContainerを導入

次に、具体的な例として、既存のPython環境にDev Containerを導入する手順を紹介します。Docker Composeを使ったPythonプロジェクトに対して、DevContainerを適用します。

サンプル構成

ファイル構成

my-project/
├── .devcontainer/
│   └── devcontainer.json
├── docker-compose.yml
├── Dockerfile
└── requirements.txt

docker-compose.yml

YAML

version: '3'
services:
  app:
    build: .
    container_name: sns-survey
    volumes:
      - .:/app
    tty: true

Dockerfile

FROM python:3.6
RUN pip install --upgrade pip
RUN mkdir /app
WORKDIR /app
COPY . .
RUN pip3 install -r requirements.txt

.devcontainer/devcontainer.json

JSON

{
  "name": "python-container",
  "dockerComposeFile": "../docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/app",
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python"
      ]
    }
  }
}

requirements.txt

Plaintext

Flask
requests
pandas
numpy

この設定では、Python 3.6を使ったコンテナで開発を行い、VSCodeでPythonの開発拡張機能が自動的にインストールされるようになっています。VSCodeでコンテナに接続すれば、Pythonのコード補完やデバッグがすぐに使える状態になります。

実行結果

上記の設定を行った後、VSCode上でコンテナが起動し、正常に動作していることを確認しました。

このように、Docker ComposeやDev Containersを使うことで、毎回コンテナに手動で入る必要がなくなり、開発効率が大幅に向上しました。

まとめと感想

Dev Containersを使うことで、Dockerコンテナの中で直接開発できる環境が整いました。コンテナに入る手間が省けるだけでなく、設定も一度書けば再利用可能で、チーム開発でも同じ環境を共有できるのが大きなメリットです。

今回の導入により、効率的に作業を進めることができましたが、まだまだ基本的な部分に触れただけです。これからさらにリファレンスを活用し、どのようにDev Containersを最大限に活用できるか探っていきたいと思います。

初心者でも手軽に始められるので、ぜひ試してみてください！

Dev Containersを使って開発環境を効率化する方法