最高の開発環境をDev Containersで目指す！
皆さん、新しいプロジェクトを始めるたびに開発環境の構築で時間を浪費していないでしょうか？ローカル環境にツールやライブラリをインストールするたびに依存関係が競合したり、環境がごちゃごちゃになってしまう経験、それなりにプロジェクトを経験している方だときっとあると思います。
そんな開発環境の悩みを一気に解決してくれるのが Dev Containers です。筆者は出た当初（確か2019年頃）から使っており、もはや開発時には手放せない存在となっています。
これを使えば、ローカル環境を汚さずにプロジェクトごとの独立した開発環境を簡単に構築できます。複数のプロジェクトを同時進行している場合や、チームで環境を統一したいときに特に効果的です。
Dev Containersの使い方は多岐にわたるので、文章だけだと伝えづらいところもあるので、ハンズオンで実際に見たい方は以下動画を見てみてください。
【基本編】
【実践編】
記事では概要を伝えられたらと思います。
Dev Containersとは？
Dev Containers とは、開発環境をコンテナ化するための仕組みです。具体的には、プロジェクトごとに異なる環境設定を簡単に再現することができる、開発者にとって非常に便利な技術です。
Dockerなどのコンテナ技術を利用して、開発者が利用するVS Codeなどのエディタ環境で そのままコンテナに入って作業ができる ようになります。コンテナ内でコードを実行したり、テストを行ったりするため、ローカルマシンに余計な依存関係を持ち込まずに済みます。これにより、ローカルの環境が汚れることなく、プロジェクトごとに必要なツールやライブラリを独立して使用することが可能です。
例えば（極端ですけど）、
- プロジェクトAではNode.jsの開発をPostgreSQL15系でやりつつAWS CDKを使う
- プロジェクトBではC#の開発をPostgreSQL16系でやりつつTerraformを使う
- プロジェクトCではServerless Framework使ってがっつりAWSと連携した開発をする
というようなことがあると、ローカル環境がどんどんわけのわからない状態になっていきます。こういった状況でも、ローカルをクリーンに保ちつつ開発体験を損なわずに快適に開発していけるのがDev Containersの強みです。
よくある開発環境の悩み
- 依存関係の衝突：異なるプロジェクトで必要なライブラリのバージョンが違うために、ローカル環境が混乱。
-
チーム内の環境不一致：メンバーごとに環境が異なり、動作しないコードがなぜか発生。
- 新規メンバーのオンボーディングに時間がかかる：環境構築に手間取り、すぐに開発に取りかかれない。
- 複数プロジェクト進行時の弊害: 同時にプロジェクトを扱う必要があるときに、果たして開発環境が「あるべき姿なのか」ということを気にする必要がある
これらの問題を Dev Containers が解決してくれます！
Dev Containersがもたらすメリット
- ローカル環境をクリーンに保つ：プロジェクトごとに独立したコンテナを使用するため、ローカルに余計なツールやライブラリをインストールする必要がありません。
- チーム全員が同じ環境を共有：設定ファイルを共有するだけで、チーム全体で全く同じ開発環境を再現できます。新しいメンバーもすぐに開発に参加可能！（基本的には私はVSCodeを使うことを前提にしていますが、 IDEA系もサポートしている ので動作はするはずです）
- トラブルシューティングの効率化：環境が壊れてもコンテナを再構築するだけで元通り。「今開発環境ってどういう状態だっけ？」と悩む時間が減ります。
Dev Containersのデメリット
筆者は愛して止まないDev Containersですが、デメリットもあります。最大なのがやはり「コンテナを使う」点です。メリットでありながらデメリットにもなってしまうのは、「学習コストがある」からです。
ただ使うだけであれば誰でも手順通りにやればすぐに開発環境は作れます！そしてdockerコマンドを使うことも滅多にありません（VSCodeが全部自動でやってくれるので）。
がしかし、仮に問題が起きたときに問題を解消するためには基本的なコンテナの知識が必要となります。
何年も使ってきている筆者の印象としては、以下は最低限必要かと思っています。
- コンテナが何なのかざっくりと知っている
- コンテナの起動・停止・削除ができる
- コンテナのボリュームの削除ができる
- Dockerfileの中身がなんとなくわかる
- docker-composeでサービス間がどのように連携しているのかなんとなくわかる
このあたりが全くわかっていない状態だと、問題が起きたときに苦労します 😅
ただし、エンジニアとしてはこのあたりの知識を知っていて損は無いはずなので、これを機に覚えることで一石二鳥のはずです！
Dev Containersを使ってみよう
以下、文字だと体験がわかりづらいので動画での該当箇所を載せつつ、概要だけ記載しておきます。
VSCode拡張機能のインストール
まずはVSCodeにDev Cotainers拡張機能をインストールする必要があります。
Dev Cotainers設定ファイルの追加
VSCodeのコマンドパレットから設定ファイルの追加を選択します。ここで以下のようなことができます。
- ベースとなる開発コンテナのテンプレの選択（Node.jsを使うのか、など）
- featuresの追加。featuresは開発環境を簡単にカスタマイズする方法の一つで、例えば「AWS CLIと入れておく」みたいなことを簡単に追加できます
うまくいけば .devcontainer/devcontainer.json というファイルが作成されます。
ここで、使用するテンプレートの複雑さによっては Dockerfile や docker-compose.yml ファイルも作成されます。
Dockerfile をカスタマイズすることでより柔軟に開発環境をカスタマイズできます（フルコントロールできます）。また、 docker-compose.yml を使うことで、Dev Containers 起動時に自動で他のサービスも立ち上げることができます。
Dev Containerの起動
コマンドパレットから Rebuild and Reopen in Container を選択することでDev Containerを起動できます。
しばらくするとVSCodeが再読み込みされて、Dev Container内での開発が可能になります。
Dev Containerには、ローカルのディレクトリがコンテナ内にマウントされているので、コンテナを削除したからと言って、開発していた内容が消えるわけではありません。ローカルでマウントしていた内容は保持されますので安心してください。
自動でポートフォワード
Dev Containerは、中で実行されるサービスがポートを使用していることを検知すると、自動でホストマシンとのポートフォワードを実施してくれます。これのおかげで例えばコンテナ内の localhost:5173 でサービスを立ち上げた場合でも、ホストマシンのブラウザから localhost:5173 につなげると、ローカルで開発しているのと変わらない体験が実現できます。
Next.js + PostgreSQLの開発を実践！
無駄にNginxも手前に置いた形での開発を実際に実践することも簡単にできます。気になる人は動画でステップバイステップで見ていったり、体験できるので興味あればぜひ！
まとめ
Dev Containersは、開発環境を効率的に管理するための強力なツールです。特に、複数のプロジェクトを同時に進めたり、チームでの開発を行う際にはそのメリットを最大限に活かすことができます。これを機に、皆さんもDev Containersを活用して開発環境の悩みを解消してみてはいかがでしょうか？
さらに詳細な使い方や実際の手順については、ぜひ紹介した動画やドキュメントを参考にしてください！
Discussion