Dev Container を使ってみる

# はじめに
### 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 で開発したいプロジェクトのルートディレクトリを開きます。
次に、以下の手順で開発コンテナーの構成ファイルを追加します。

1.  VS Code のコマンドパレットを開く（VSCode左下の「> <」ボタンからでも開ける）
    ![スクリーンショット 2025-04-11 15.39.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/5a8622a5-c4fd-4d78-b507-fccd7262433a.png)
2.  「開発コンテナー構成ファイルを追加...」 を選択する
    ![スクリーンショット 2025-04-11 15.36.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/6968dc45-e9e0-4ca4-a68b-ebc6eab8b2ac.png)

3.  「ワークスペースに構成を追加する」 を選択する
    ![スクリーンショット 2025-04-11 13.03.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/2769dd6b-30e2-426a-9c88-1dbaa444b57a.png)

4.　PJに合うテンプレートを選択する（今回は Node.js & JavaScript を選択）
    ![スクリーンショット 2025-04-11 13.03.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/6c7c29a0-63b0-49ba-bde0-77ec2516950d.png)
5.  バージョンや追加機能を選択するよう促されるので 適切なオプションを選択する
    　-> 追加機能は不要な場合は 選択せず「OK」で問題なし
6. 設定が完了すると、プロジェクトのルートディレクトリに `.devcontainer` というフォルダが作成され、その中に `devcontainer.json` ファイルと、選択したプリセットによっては `Dockerfile` などの関連ファイルが生成される
    ![スクリーンショット 2025-04-11 13.05.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/0b01016e-23e4-4413-9e34-53262a2e8c16.png)

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

```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 が実行される（以下）
![スクリーンショット 2025-04-14 14.43.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/4ba92a1a-b6db-4b09-976a-250c51a23dfc.png)

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

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

1.  VS Code のコマンドパレットを開く（VSCode左下の「> <」ボタンからでも開ける）
2.  「コンテナーで再度開く」を選択する
    ![スクリーンショット 2025-04-11 16.14.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/806d8cbf-a505-41d4-83ca-29807eec90ec.png)
    （PJを開くと表示される以下のダイアログからでも可能）
    ![スクリーンショット 2025-04-11 16.27.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/df1ca930-cd76-443f-aa49-7ece478563ee.png)
3. コンテナーに入るとターミナルが以下のようになり、ウィンドウ左下にもコンテナ内にいることが表示される
![スクリーンショット 2025-04-11 16.17.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/728b34a0-3599-40f2-803d-14fa8013805b.png)
![スクリーンショット 2025-04-11 16.18.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/42cdb843-ee5d-4074-a0bf-7eeba908bb04.png)
4. Docker.desktopが立ち上がり、コンテナが起動中になる
    ![スクリーンショット 2025-04-11 15.04.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/db2af172-ba70-4a2d-9f00-97c625cc1f33.png)
5. 設定ファイル内で定義した依存ライブラリがインストールされていることが確認できる
![スクリーンショット 2025-04-11 14.59.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/991c4b93-cc7f-475f-809c-32d4527eb815.png)
6. 実行する
    ローカルサーバを起動し、ブラウザで確認します。
![スクリーンショット 2025-04-11 15.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/9d8e7677-8741-4a11-ad79-aa8985b5111a.png)
    ブラウザが立ち上がり、表示が確認できました。
![スクリーンショット 2025-04-11 15.01.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/ebd51a99-d380-4b97-b1b8-651894eee6ca.png)


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


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

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

```bash
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に保存されるため「コンテナーのリビルド」を実施しても消えません。
![スクリーンショット 2025-04-11 21.47.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3881350/e6fe8f5c-910f-4221-bbdb-7dfb84e95f0f.png)

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

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