VSCodeを使ってDockerコンテナ内で開発を行う方法

はじめに

最近実務で環境構築をする機会があり、面白いものを触れたので、備忘録として残しておこうと思います。
題材はタイトルの通りですが、恥ずかしながら、実務で触れるまではこんなことができるとは思っていませんでした。。。
なかなか使えると思ったので、早速紹介していきます！

なぜやるのか

まず、なんでわざわざVSCodeを使ってDockerコンテナ内に入り、開発を行うのかというところからお話しします。
結論、私が採用した一番大きな理由は、開発者全員のVSCode環境を統一できるからです。
VSCodeの設定や拡張機能を揃えておくことで、開発者は実装に専念することができます。

実践

早速ですが、まずは動かてみましょう！！
githubにも載せていますが、一応手順の説明からやっていきます！
とりあえず動くものを用意したので、下記手順から設定をお願いします。

プロジェクトのクローン

# ホームディレクトリに移動
cd

# プロジェクトをクローン
git clone https://github.com/75ks/next-dev.git

# プロジェクトディレクトリに移動
cd next-dev

# クローンしたプロジェクトをVSCodeで開く
code .

VSCodeからコンテナに接続

左サイドバーの拡張機能で「Dev Containers」を検索し、インストール

※以下の画像だとインストール済みのため、「無効にする」と表示されていますが、初めてであれば「インストール」と表示されていると思うので、そちらからインストールをお願いします。「Dev Containers」が含まれている「Remote Development」でも問題ありません。

左下「><」アイコンをクリックして、「コンテナを再度開く」を選択

※ホストのVSCodeを日本語化していない場合は、「コンテナを再度開く」ではなく「Reopen in Container」となっていると思うので、そちらをクリックしてください。

画像のようにVSCodeの表示が変わっていて、localhost:3000に接続できれば接続完了です！

解説

devcontainer.json

まず今回のメイン、VSCodeの設定を行っているdevcontainer.jsonについてです。
devcontainer.jsonは必ず.devcontainerディレクトリを作成し、その中に配置する必要があります。
一般的にはプロジェクトのルートに.devcontainerディレクトリ作成することが多いようなので、今回だとプロジェクトのディレクトリがnext-devになるため、next-dev配下に.devcontainerを作成し、その中にdevcontainer.jsonを配置する必要があります。

ディレクトリ構成

next-dev(プロジェクトのルート)
├── .devcontainer
    ├── devcontainer.json

devcontainer.json

// コンテナ上のVSCodeの設定
{
  // VSCode上で表示される名前
  "name": "Next.js App",
  // docker-composeファイルのパス
  "dockerComposeFile": "../docker-compose.yml",
  // docker-composeのサービス
  "service": "app",
  // VSCodeのルートディレクトリ
  "workspaceFolder": "/app",
  // コンテナからホストに転送するポートリスト
  "forwardPorts": [3000],
  // VSCodeの設定等
  "customizations": {
    "vscode": {
      // 拡張機能リスト(拡張機能IDを指定)
      "extensions": ["MS-CEINTL.vscode-language-pack-ja"]
    }
  }
}

name

VSCode上で表示される名前を設定します。
先ほどの画像赤枠部分の「Next.js App」が表示されている部分に該当します。

dockerComposeFile

dockerComposeFileのパスを指定します。
docker-compose.ymlはプロジェクトのルートに作成しているため、相対パスだと../docker-compose.ymlとなります。

service

docker-composeのサービス名を指定します。
docker-compose.ymlのservices配下の名前と一致させる必要があります。

docker-compose.yml

version: '3'
services:
  app: ←これ

workspaceFolder

ホストで開いているワークスペースをコンテナ内のどこに配置するかを指定します。
今回はホストでnext-devディレクトリを開いていると思うので、コンテナのappディレクトリにnext-devを配置するという意味になります。

forwardPorts

コンテナからホストに転送するポートリストを設定します。リストなので複数設定も可能です。
今回は3000のみを指定しているため、コンテナで起動しているポート3000をホストの3000に転送します。
こうすることで、サーバーはコンテナで起動していますが、ブラウザからのアクセスなどがホストからも可能となります。

customizations.vscode.extensions

VSCodeの拡張機能を設定します。
キーには拡張機能IDというものがあり、これを指定する必要があります。
拡張機能IDは、拡張機能の歯車マークからコピーすることができます。
リストなので、複製設定が可能です。

customizations.vscode.settings

VSCodeの本体設定を設定します。
今回のdevcontainer.jsonには記載していませんでしたが、下記のように設定することが可能です。

devcontainer.json

// コンテナ上のVSCodeの設定
{
　　　　(省略)
  "customizations": {
    "vscode": {
      // 拡張機能リスト(拡張機能IDを指定)
      "extensions": ["MS-CEINTL.vscode-language-pack-ja"],
      // 本体設定
      "settings": {
        "workbench.colorTheme": "Default Dark+",
        "workbench.iconTheme": "material-icon-theme",
        "bracket-pair-colorizer-2.depreciation-notice": false,
        "workbench.startupEditor": "none",
      }
    }
  }
}

キーには、設定キーを指定する必要があります。
ホストと同じ設定にするには、歯車マークから「設定」を選択して設定画面を開き、右上のファイルマークを選択してsettings.jsonを開き、中身をdevcontainer.jsonのcustomizations.vscode.settings配下にコピーします。
※設定画面はショートカットMac: command + , Windows: Ctrl + ,でも開けます。



新たに設定を追加する場合は、設定画面の各項目にある「settings.jsonで編集」を選択してsettings.jsonに追加された設定キーを確認し、それをdevcontainer.jsonのcustomizations.vscode.settings配下にコピーします。

devcontainer.json

// コンテナ上のVSCodeの設定
{
　　　　(省略)
  "customizations": {
    "vscode": {
      // 拡張機能リスト(拡張機能IDを指定)
      "extensions": ["MS-CEINTL.vscode-language-pack-ja"],
      // 本体設定
      "settings": {
        "workbench.colorTheme": "Default Dark+",
        "workbench.iconTheme": "material-icon-theme",
        "bracket-pair-colorizer-2.depreciation-notice": false,
        "workbench.startupEditor": "none",
        "editor.fontWeight": "normal", ←追加
      }
    }
  }
}

さいごに

他にもdevcontainer.jsonから設定できる項目がたくさんあるので、興味がある方は調べてみてください！
また面白いものあったら紹介していきます！