Zenn
🎃

VSCode devcontainer の紹介

2024/12/08に公開
VS Code
devcontainer
tech

この記事は、tacoms Advent Calendar 2024の8日目です!
他メンバーのAdvent Calendarはこちらからご覧ください！👇

https://qiita.com/advent-calendar/2024/tacoms

Devcontainerとは？

Devcontainer は、コンテナ内で効率的に開発環境を構築・管理するための Visual Studio Code (VSCode) の機能です。
公式ドキュメント: https://code.visualstudio.com/docs/devcontainers/containers

具体的には、リモート編集機能と環境構築のための定義ファイルが組み合わさった仕組みで、ホストOS上のVSCodeを活用しつつ、開発環境を分離・再現できます。
環境構築には、主にDockerfileを使用します。

主なメリット

  1. ローカル環境を汚さない
    仮想環境を利用することで、ローカルPCの環境を保護できます。
  2. 環境の再現性が高い
    Windows、Mac、Linuxなど異なるOS間でも、同一の環境を簡単に再現できます。
  3. 開発に必要なCLIツールも含められる
    Devcontainerの「features」を使えば、実行環境だけでなく、開発に必要なツールも内包できます。
    - ちょっとしたコマンドラインの開発ツールを容易に追加できます
  4. GitHub Codespacesとの連携
    ブラウザ上で開発環境を再現可能。プライベートな環境変数はGitHubのOrganization設定に隠蔽できます。

デメリット

  1. Git秘密鍵の同期がやや煩雑
    ローカル環境との同期方法はありますが、ローカル環境構築に比べると手間がかかります。
    詳細: Sharing Git Credentials
  2. Monorepoの設定が複雑
    Monorepoで複数のコンテナを扱う場合、追加の設定が必要です。
    詳細: Connect Multiple Containers

実際に作ってみる

今回は　tacoms でメインで使っている Go言語 を使った開発環境を構築します。

ステップ1: 必要なフォルダとファイルを準備

リポジトリ直下に .devcontainer フォルダを作成し、その中に devcontainer.json を配置します。以下のコマンドで設定を始めましょう。

devcontainer はリポジトリ直下に .devcontainer フォルダを配置して、そのフォルダ内に必要なファイルを配置することで使用することができます

その中で特に重要な設定ファイルは .devcontainer.json です

devcontainer.json に書いてある内容に従って環境が構築されます

まずは適当にフォルダを掘って devcontainer.json を設定しようと思います

$ mkdir project
$ cd project
$ mkdir .devcontainer
$ touch .devcontainer/devcontainer.json
$ code .devcontainer/devcontainer.json

ステップ2: devcontainer.jsonの設定

以下は、Go 1.23の環境を構築するための設定例です。

{

    "name": "Go",
    // https://mcr.microsoft.com/en-us/artifact/mar/devcontainers/go/tags
    "image": "mcr.microsoft.com/devcontainers/go:1.23",
    "customizations": {
        "vscode": {
            "extensions": [
                "golang.go"
            ]
        }
    }
}

devcontainer では Microsoft提供のコンテナレジストリを利用するのが一般的です。
詳細: https://mcr.microsoft.com/en-us/

ステップ3: Devcontainerを起動

  1. コマンドパレット (Ctrl + Shift + P) から「DevContainers: Open Folder in Container」を選択
  2. プロジェクトフォルダを指定すると、VSCodeが再起動し、Go環境が構築されます。

サンプルコード

package main

import "fmt"

func main() {
	fmt.Println("Hello, World")
}

簡単な動作確認を行います

Webサーバーのサンプル

以下のリポジトリで、簡単なGo言語のWebアプリケーションを構築するサンプルを用意しました。
リポジトリ: https://github.com/ozw-sei/devcontainer-example

このサンプルには以下が含まれます。

  • Go言語のnet.http を使ったシンプルなサーバー
  • MySQLへの接続
  • ステップ実行やデバッガ機能の活用例
  • devcontainer features を使用して mysql CLI の導入

まとめ

特に自分が観測する限りは最近は開発者の開発PCが分散する傾向が増えています
Mac、Windows, LinuxなどOSだけでなく、CPUのアーキテクチャが異なる事も多いと思います
開発環境を簡単に再現できるDevcontainerは非常に有用です。

全員がDevcontainerを使う必要はありませんが、チーム全体で共有できる「最低限の環境」を簡単に構築できるツールとして、ぜひ活用を検討してみてください。

Discussion