虎の穴ラボ技術ブログ

虎の穴ラボ株式会社所属のエンジニアが書く技術ブログです

MENU

VS Code の拡張機能「Dev Containers」を使いこなす！おすすめ設定10選

技術エントリ VSCode

こんにちは。虎の穴ラボのサカガミです。

今回は Visual Studio Code (以下 VS Code) で利用できる 拡張機能「Dev Containers」のおすすめ設定を紹介します。

Dev Containers とは？

Dev Containers は、VS Code の拡張機能で、開発環境をコンテナ化することで、 開発者が統一された環境で作業できるようにするものです。 これにより、異なるマシンでの環境設定のばらつきを防ぎ、 プロジェクトの依存関係を一元管理できます。 Dev Containers を使用することで、開発者は簡単に環境を共有し、 プロジェクトに必要なツールやライブラリを容易に設定できます。

marketplace.visualstudio.com

Dev Containers のメリット

Dev Containers を利用することで得られる主なメリットは以下の通りです。

  1. 一貫した開発環境: 開発環境をコンテナ化することで、全ての開発者が同じ環境で作業できるため、環境の違いによる問題を減少させます。
  2. 簡単なセットアップ: プロジェクトに必要なツールやライブラリを自動でインストールし、開発環境のセットアップを簡素化します。
  3. 依存関係の管理: プロジェクトごとに異なる依存関係を管理しやすくなり、複数プロジェクトの同時進行が容易になります。
  4. 移植性の向上: コンテナ化された環境は、異なるプラットフォーム間で移植性が高く、設定をそのまま他の開発者に共有できます。

開発コンテナーの作成

まだ開発コンテナーを利用されていない場合、以下の手順で作成が可能です。

  1. PC へ Docker をインストール
  2. VS Code へ Dev Containers をインストール
  3. コマンドパレットで dev open などを入力し「開発コンテナー: コンテナーでフォルダーを開く...」を選択
  4. 開発コンテナーで使用したいフォルダーを選択
  5. テンプレートの一覧が表示されたらいずれかを選択 (例: Python 3)
  6. バージョンの一覧が表示されたらいずれかを選択 (例: 3.12-bookworm)
  7. 追加機能の一覧が表示されたら必要に応じて選択
  8. オプションのファイル/ディレクトリが表示されたら必要に応じて選択
  9. .devcontainer/devcontainer.json が作成され、開発コンテナーが起動する

VS Code でフォルダーを開いておき 「開発コンテナー: 開発コンテナー構成ファイルを追加...」でも作成が可能です。

おすすめ設定の紹介

開発コンテナーを作成したら、次はプロジェクトに合った設定を導入して、 より効率的な開発環境を構築しましょう。 .devcontainer/devcontainer.json を編集することで様々な環境の構築が可能です。 以下では、Dev Containers を最大限に活用するための設定を紹介します。

1. 拡張機能をインストールする

開発コンテナーはホストとは隔離された環境となります。 開発コンテナー内で使い慣れた拡張機能を利用したい場合、 改めて開発コンテナーへインストールする必要があります。

ただし、手動でインストールすると開発コンテナーのリビルド時に消えてしまいます。 以下のように拡張機能 ID を devcontainer.json へ記載しておけば、 コンテナ作成時に自動でインストールされます。

拡張機能の歯車アイコン⚙から「devcontainer.json に追加」を選ぶと簡単に追加が可能です。

EditorConfig for VS Code と Python 関連の拡張機能をインストールする例

// .devcontainer/devcontainer.json
    "customizations": {
        "vscode": {
            "extensions": [
                "editorconfig.editorconfig",
                "ms-python.python",
                "ms-python.vscode-pylance",
                "ms-python.black-formatter",
                "ms-python.isort"
            ]
        }
    }

2. プログラミング言語のパッケージをインストールする

postCreateCommand を使用すれば、 プログラミング言語のパッケージをインストールできます。

requirements.txt に記載された Python のパッケージをインストールする例

// .devcontainer/devcontainer.json
    "postCreateCommand": "pip3 install --user -r requirements.txt"

3. OS のパッケージをインストールする

postCreateCommand を使用して、OS のパッケージもインストールできます。

Dev Containers でのパッケージのインストール方法を調べると Dockerfile を書く方法を紹介されていることが多いですが、 Dockerfile を書かなくてもインストール可能です。

// .devcontainer/devcontainer.json
    "postCreateCommand": "sudo /bin/sh .devcontainer/install-dependencies.sh"

Debian のコンテナに Selenium で使用する Google Chrome をインストールする例

# .devcontainer/install-dependencies.sh
curl -fsSL https://dl.google.com/linux/linux_signing_key.pub -o /etc/apt/trusted.gpg.d/google-chrome.asc
sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
apt-get update
apt-get install -y --no-install-recommends fonts-noto-cjk fonts-noto-cjk-extra google-chrome-stable
apt-get clean
rm -r /var/lib/apt/lists/*

AWS SAM CLI をインストールする例

# .devcontainer/install-dependencies.sh
curl -OL https://github.com/aws/aws-sam-cli/releases/latest/download/aws-sam-cli-linux-x86_64.zip
unzip aws-sam-cli-linux-x86_64.zip -d sam-installation
./sam-installation/install
rm -rf sam-installation aws-sam-cli-linux-x86_64.zip

4. VS Code や拡張機能の設定

devcontainer.json で .vscode/settings.json と同様の設定が可能です。 .vscode をリポジトリに含めたくないが設定を強制したい場合に利用できます。

Black Formatter と isort を設定する例

// .devcontainer/devcontainer.json
    "customizations": {
        "vscode": {
            "settings": {
                "[python]": {
                    "editor.defaultFormatter": "ms-python.black-formatter",
                    "editor.formatOnSave": true,
                    "editor.codeActionsOnSave": {
                        "source.organizeImports": "explicit"
                    }
                },
                "isort.args": [
                    "--profile",
                    "black"
                ]
            }
        }
    }

5. ポートフォワーディングの設定

forwardPorts でポートフォワーディングが設定できます。 コンテナ内でウェブアプリケーションを開発している場合などに利用できます。

ポート 3000 と 8080 を転送する例

// .devcontainer/devcontainer.json
    "forwardPorts": [3000, 8080]

6. 環境変数を設定する

containerEnv で環境変数を設定できます。

// .devcontainer/devcontainer.json
    "containerEnv": {
        "PYTHONDONTWRITEBYTECODE": "1",
        "PYTHONUNBUFFERED": "1"
    }

7. .env ファイルの環境変数を読み込ませる

runArgs で --env-file を指定すれば、 .env ファイルの環境変数を読み込ませることも可能です。

# .env
YOUR_ENV_VAR_NAME=your-value-goes-here
ANOTHER_ENV_VAR_NAME=your-value-goes-here

// .devcontainer/devcontainer.json
    "runArgs": [
        "--env-file",
        ".env"
    ]

8. コンテナのタイムゾーンをホストに合わせる

開発コンテナーのタイムゾーンは UTC がデフォルトとなっています。 features で match-host-time-zone を追加すると コンテナのタイムゾーンをホストに合わせることができます。 時刻関連の処理が9時間ずれる場合はこれで対応が可能です。

// .devcontainer/devcontainer.json
    "features": {
        "ghcr.io/hwaien/devcontainer-features/match-host-time-zone:0.0.13": {}
    }

9. ワークスペース以外のディレクトリをマウントする

mounts でワークスペース以外のディレクトリをコンテナへマウントできます。

// .devcontainer/devcontainer.json
    "mounts": [
        "source=${localWorkspaceFolder}/../hoge,target=/workspaces/hoge,type=bind,consistency=cached"
    ]

10. ホストの Docker をコンテナ内から操作する

features で docker-outside-of-docker を追加すると コンテナ内からホストの Docker を操作できるようになり便利です。

// .devcontainer/devcontainer.json
    "features": {
        "ghcr.io/devcontainers/features/docker-outside-of-docker:1": {}
    }

まとめ

Dev Containers を利用することで、開発環境を一貫して管理し、開発効率を向上させることができます。 設定次第で様々なカスタマイズが可能であり、プロジェクトのニーズに応じた柔軟な環境構築が可能です。 ぜひ今回紹介した設定を参考に、より快適な開発環境を整えてください！

採用情報

虎の穴ラボでは一緒に働く仲間を募集中です！
この記事を読んで、興味を持っていただけた方はぜひ弊社の採用情報をご覧ください。
toranoana-lab.co.jp