【初心者向け】DevContainerとは？導入方法・メリット・設定方法などまとめて解説！

DevContainerとは？

• DevContainer(Development Container)は、VS CodeとDockerを組み合わせて開発環境構築をコンテナで構築する仕組み
• VS CodeにはRemote - Containers（現在はDev Containers）という拡張機能があり、これと連携することでローカル環境に環境構築する必要がなくなる

Dev Containerを使うメリット

• 環境をコード化できる
  • .devcontainerフォルダ内に設定ファイルを書くだけで再現性のある環境が作れる
• チーム開発に最適
  • 「動かない」問題などが激減し、環境構築の時間短縮
• テスト環境として利用できる
  • 新しいライブラリやフレームワークの検証もコンテナで安全に行える
• ローカルが汚れない
  • NodeやPythonのバージョンの違いによる汚染がない

devContainerの構成ファイル

.devcontainerディレクトリを作成し、以下のような設定ファイルを準備する

devcontainer.json

{
    "name": "My Dev Cntainer",
    "build": {
        "dockerfile": "Dockerfile",
        "context": "."
    },
    "setting": {
        "terminal.integerated.shell.linux": "/bin/bash"
    },
    "extensions": [
        "ms-python.python",
        "dbaeumer.vscode-eslint"
    ],
    "forwardPorts": [3000, 8000],
    "postCreateCommand": "npm install"
}

• name：コンテナの名前
• build.dockerfile：使用するDockerfileのパス
• extensions：自動で入れてくれるVS Codeの拡張機能
• postCreateCommand：初期化で実行したいコマンド

Dockerfile

FROM node:20

# 作業ディレクトリ作成
WOEKDIR /workspace

# 必要に応じてPythonや他のツールを追加
RUN apt-get update && \
    apt-get install -y python3-pip && \
    pip3 install --upgrade pip

# グローバルnpmパッケージなどをここで追加
RUN npm install -g yarn

※ここではNode.jsベースの例ですが、Pythonなども同様にカスタマイズ可能。

DockerContainerを立ち上げる

前提条件

• Docker Desktopがインストール済み
• VS Codeと拡張機能（こちらこちらをインストールすると、Windowsで構築する際に必要なものがまとめてインストールできる）がインストール済み

立ち上げ手順

1. .devcontainerディレクトリとファイルを作成
2. Docker Desktopを起動
3. VS Codeでコマンドパレット（Ctrl + Shift + p）より、Dev Containers: Open folder in Conntainer...を押下
4. Dev Containerの起動を待つ

最後に

いかがだったでしょうか。DevContainerは環境を簡単に構築出来て多くのメリットがあります。
色々な現場で利用されているかと思いますので、これを機に覚えていってくださいね！