Dev Containers のススメ

Transcript

1. Dev Containers のススメ 2026-01-20 / 第129回社内勉強会 onozaty 1
2. Dev Containers とは？ Visual Studio Code (以下 VS Code) の機能で、コンテナ内で開発できる仕組み 参考: 公式ドキュメント オープンな仕様のため、IntelliJ IDEA などでも対応が進んでいる 開発環境を Docker コンテナ として定義・共有できる .devcontainer/devcontainer.json に環境設定を記述 プロジェクト/ ├── .devcontainer/ │ └── devcontainer.json ← 環境定義 (必須) └── (ソースコード) ※ 必要に応じて Dockerfile や docker-compose.yml も配置 2
3. なぜ Dev Containers を勧めるのか？ よくある開発環境の課題 担当者の環境によって動作が異なる 新メンバーのセットアップに半日かかる 複数バージョンのツールを共存させるのが大変 Windows/Mac で挙動が違う → Dev Containers で解決(or 改善)できる 3
4. Dev Containers のメリット 4
5. メリット 1: 開発環境をコードで管理・共有できる 環境定義をチーム全体で共有 .devcontainer.json や Dockerfile 、 docker-compose.yml で環境を定義 Git で管理 → チーム全体で共有・バージョン管理 環境変更時も再ビルドで全員に反映 セットアップ手順のドキュメント不要 (設定ファイル自体が手順) 個人のスキルや知識に依存しない 新人でもベテランでも、同じ環境を数分で構築できる 5
6. メリット 2: メンバーのPC環境を気にしなくて良い チームメンバーのPCがバラバラでも大丈夫 Windows、Mac、Linux が混在していても問題なし 全員が同じ Linux コンテナ で開発 ホストOSに依存しない OS による違いを意識しない開発 OS 固有のトラブルがなくなる シェルスクリプトも全員同じ動作 担当者間の環境差異による問題が起こりづらくなる 6
7. メリット 3: プロジェクトごとに環境を分離できる 複数プロジェクトの並行作業に便利 プロジェクトごとに異なるバージョンを使い分け可能 例: Node.js 20/22/24、Java 11/17/21、PostgreSQL 16/17 等 プロジェクト切り替えは VS Code を開き直すだけ バージョン管理ツール (nvm, SDKMAN 等) が不要 ホスト環境との分離 ホスト環境はクリーンな状態を保てる VS Code拡張機能もプロジェクトごとに独立 複数プロジェクトの同時進行も問題なし 7
8. メリット 4: 必要なツールを自動セットアップ (1/2) Dockerfile: パッケージのインストール RUN apt-get update && apt-get install -y \ nodejs python3 jq curl make gcc devcontainer.json: Features で便利機能を追加 再利用可能な機能パッケージ (公式・コミュニティ提供) 例: Docker-in-Docker、AWS CLI など 利用可能な Features の一覧は Dev Container Features を参照 "features": { "ghcr.io/devcontainers/features/aws-cli:1": {}, "ghcr.io/devcontainers/features/docker-in-docker:2": {} } 8
9. メリット 4: 必要なツールを自動セットアップ (2/2) devcontainer.json: VS Code 拡張機能を自動インストール "customizations": { "vscode": { "extensions": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"] } } docker-compose.yml: 複数サービスの定義も可能 例: アプリ + PostgreSQL + Redis など 9
10. メリット 5: 環境トラブル時の復旧が簡単 コンテナを作り直すだけ 1. 環境が壊れた 2. コンテナを削除 3. 再ビルド → 完了！ ホスト環境に影響なし 数分で元通り 10
11. セットアップ方法 11
12. セットアップ方法 必要なもの 1. VS Code 2. Docker (Docker Desktop、Rancher Desktop、Docker Engine など) 3. Dev Containers 拡張機能 12
13. セットアップ手順 1: Docker のインストール 代表的な方法 Docker Desktop (Windows/Mac) Rancher Desktop (Windows/Mac/Linux) WSL2 + Docker Engine (Windows) Docker Engine (Linux) ※ Docker Desktop は大規模組織での商用利用時にライセンスが必要な場合あり 13
14. セットアップ手順 2: VS Code 拡張機能のインストール 1. VS Code を開く VS Code が未インストールの場合は 公式サイト からインストール 2. 拡張機能タブ (Ctrl+Shift+X) を開く 3. "Dev Containers" で検索 4. Microsoft 製の拡張機能をインストール 14
15. セットアップ手順 3: Dev Container の設定ファイルの作成 方法 1: テンプレートから作成 1. コマンドパレット (Ctrl+Shift+P) を開く 2. "Dev Containers: Add Dev Container Configuration Files..." を選択 3. 言語・フレームワークを選択 → 自動生成される 方法 2: 手動で作成 .devcontainer/devcontainer.json を作成 { "name": "My Dev Environment", "image": "mcr.microsoft.com/devcontainers/python:3.11" } 15
16. セットアップ手順 4: コンテナで開く 1. VS Code でプロジェクトフォルダを開く 2. 以下のいずれかの方法で "Reopen in Container" を選択 右下に表示されるポップアップから選択 左下のリモート接続アイコンをクリック コマンドパレット (Ctrl+Shift+P) から選択 → コンテナがビルドされ、コンテナ内で VS Code が開く 16
17. Windows (WSL) 利用時の注意点 プロジェクトファイルは WSL 上に配置する Windows のファイルシステム ( C:\ など) にファイルを置くとパフォーマンスが大幅 に低下 WSL のファイルシステム ( /home/ユーザー名/ など) に配置することを推奨 WSL のターミナルからプロジェクトを開く 1. WSL のターミナルを起動 2. プロジェクトディレクトリに移動 3. code . で VS Code を起動 17
18. デモ1 実際にDev Containerをセットアップしてみます。 18
19. 設定ファイルの役割分担 (1/2) devcontainer.json ( .devcontainer/devcontainer.json ) コンテナイメージの指定 ( image , build ) Features の追加 ( features ) VS Code 拡張機能の指定 ( customizations.vscode.extensions ) VS Code 設定 ( customizations.vscode.settings ) .vscode/settings.json でも設定可能 ライフサイクルコマンド ( postCreateCommand , postStartCommand など) Dockerfile ( .devcontainer/Dockerfile ) システムパッケージのインストール 言語ランタイムのセットアップ 19
20. 設定ファイルの役割分担 (2/2) docker-compose.yml ( .devcontainer/docker-compose.yml ) 複数サービスの定義 (アプリ + DB など) ボリュームマウントの設定 ネットワーク設定 settings.json ( .vscode/settings.json ) エディタ設定 (タブ幅、フォーマッタなど) 言語固有の設定 (リンター、インタープリタパスなど) 変更が即座に反映される (リビルド不要) .devcontainer.json の customizations.vscode.settings でも設定可能 どっちで管理するかは決めておく(個人的には .vscode/settings.json 側で管理する派) 20
21. デモ2 Dev Containerが設定されたプロジェクトをいくつか見てみます。 21
22. Dev Containerの設定例 https://github.com/onozaty/fastapi-dynamodb-sample Python + FastAPI + DynamoDB のプロジェクト AWS CLIやSAMもセットアップ済み https://github.com/onozaty/prisma-db-comments-generator Node.js + PostgreSQL + MySQL のプロジェクト 22
23. Tips: ユーザー固有の拡張機能を自動インストール すべての Dev Container で使いたい拡張機能がある場合 VS Code のユーザー設定で dev.containers.defaultExtensions を指定 個人の好みの拡張機能を自動的にインストール可能 例: キーバインド系の拡張機能など { "dev.containers.defaultExtensions": [ "lfs.vscode-emacs-friendly" ] } 23
24. その他の Tips 詳しくは Dev Containers のメモ を参照 パフォーマンス改善方法 プロキシ環境での設定 非rootユーザーの設定 HTMLファイルのブラウザ表示 その他、実用的な設定やトラブルシューティング 24
25. 自分自身の利用状況 業務で積極的にDev Containersを導入 開発開始時に導入したプロジェクト2件、途中から切り替えたプロジェクト2件 実際、開発工数削減に効果を感じている 個人プロジェクトでもDev Containerを利用 Dev Containerを使うことで、様々なプロジェクトをスムーズに切り替え可能 問題報告時の再現プロジェクトとしてもDev Containerだと共有しやすい GitHub Codespacesでも動作させられるので再現性が高い 25
26. おわりに Dev Container に興味を持たれた方は、ぜひお試しください。 導入時に困ったことやわからないことがあれば、お気軽にご相談ください。 26