はじめに

Dev Container とは？

VS Code の機能拡張である Remote-Containers を利用して、プロジェクトごとに最適化された、隔離された開発環境を Docker コンテナーとして定義し、その中で開発作業を行うための仕組みです。

簡単に言うと、「プロジェクトに必要な開発ツールなどを、ローカルマシンではなく Dockerコンテナーの中に閉じ込めてしまう技術」

開発環境の情報もソースコードと一緒に git 等で管理する感じです。

例えば、「環境構築で時間を無駄にしたくない」「チームで開発環境を統一したい」「プロジェクトごとに独立した環境が欲しい」といったことが叶います。

本ページでは「Dev Container」を最低限の設定で試してみます。

前提

既存のPJがあること（今回はReactとTypeScriptを用いたPJを用意）

準備

Docker Desktopをインストール　https://www.docker.com/ja-jp/get-started/
VSCodeをインストール　https://code.visualstudio.com/download
VSCode拡張機能 Dev Containers をインストール

導入手順

開発コンテナー構成ファイルを追加する

まず、VS Code で開発したいプロジェクトのルートディレクトリを開きます。
次に、以下の手順で開発コンテナーの構成ファイルを追加します。

VS Code のコマンドパレットを開く（VSCode左下の「> <」ボタンからでも開ける）
「開発コンテナー構成ファイルを追加...」を選択する
「ワークスペースに構成を追加する」を選択する

4.　PJに合うテンプレートを選択する（今回は Node.js & JavaScript を選択）

5. バージョンや追加機能を選択するよう促されるので適切なオプションを選択する
　-> 追加機能は不要な場合は選択せず「OK」で問題なし
6. 設定が完了すると、プロジェクトのルートディレクトリに .devcontainer というフォルダが作成され、その中に devcontainer.json ファイルと、選択したプリセットによっては Dockerfile などの関連ファイルが生成される

生成された devcontainer.json ファイルを編集して、プロジェクトの要件に合わせて開発環境をカスタマイズします。（最低限で問題ない場合デフォルトのままで問題ありません）

{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
  "features": {}
  "postCreateCommand": {
      "npm": "npm install"
  }
}

name: 開発コンテナーの名前
image: 使用する Docker イメージを指定する。上記の例では、Node.js がプリインストールされた公式イメージを使用（デフォルトで指定される）
features: 開発に必要な追加ツールやランタイムを導入したい場合に指定する
postCreateCommand: devcontainerを利用する直前に実行されて欲しいコマンドを設定する

上記の例の場合、devcontainerを利用する直前に npm install が実行される（以下）

（npm install が実行されると node_modulesディレクトリが生成されるがこれはローカルで管理されるべきなので .gitignoreに書いておく）

.gitignore

.DS_Store
node_modules/

使い方

まず、VS Code で開発したいプロジェクトのルートディレクトリを開きます。
次に、以下の手順でコンテナーを起動します。

Dev Container のメリット

環境構築の容易さと時間の節約
- 一度設定すればリポジトリをクローンしてくるだけで環境構築が完了できる
チーム開発における環境の統一
- 開発環境もソースコードと一緒に管理することによる恩恵
プロジェクトごとの環境分離による依存関係の衝突回避
- プロジェクトごとの開発環境の切り替えの面倒もない
クリーンな開発環境の維持
- ローカル環境が汚れない

おまけ　トラブルシューティング

コンテナー内から git pushができない

git pushをしようとするとコンテナ内で Git のユーザー名とメールアドレスの設定を求められる。

Author identity unknown
*** Please tell me who you are.
Run
  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

ユーザー名またはメールアドレスをローカルマシンに設定していない場合に、設定を求めるメッセージが表示される。
これは、リポジトリ内で以下を実行することで設定できます。

$ git config --local user.email "you@example.com"  // 自身のメールアドレス
$ git config --local user.name "Your Name"  // 自身のユーザーネーム

上記を実施してリポジトリ内の .git/comfig の[User]情報が登録されていれば問題ありません。

// 確認方法  
// 以下を実施して 自身のユーザー情報が表示されればokです  
$ git config user.email  
$ git config user.name

これで git 操作ができるようになりました。

git 情報は Configに保存されるため「コンテナーのリビルド」を実施しても消えません。

まとめ

VSCode の DevContainer を利用して開発環境をGit管理する方法を学びました。

これで環境構築をローカル環境に邪魔されず！メンバー間の差異なく！簡単に！できるようになりました。