はじめに

Webアプリケーション開発プロジェクトに参加する際、最初に取り組むことの一つが開発環境の構築です。

開発環境を設定する過程ではよく、プロジェクトに必要な特定バージョンのPythonやRubyをインストールし、pipenv、poetry、bundlerなどのパッケージ管理ツールを設定し、依存するパッケージをインストールする手順を踏みます。この一連の作業は地味に手間がかかり、特に慣れてない言語やツールを使用する際には、環境構築だけで疲れてしまいます。

また、アプリケーション以外にデータベースなども必要な場合が多く、これらをDocker Composeで管理すると便利です。しかし、この方法ではホストマシンにランタイムやパッケージが存在しないため、ホストで動作するIDEでは自動補完機能が利用できないというデメリットがあります。

このような課題を解決するため、Visual Studio CodeはDev Containerという機能を提供し、コンテナ内での開発を可能にしています。これにより、ローカルOSで開発しているときと同様の快適な開発経験が得られます。

今回は、このDev Containerを導入した事例を紹介します。

Dev Containerとは

2019年5月、Visual Studio Codeは、開発環境としてコンテナを利用するための拡張機能「Dev Containers」を発表しました。^[1] この拡張機能はコンテナの任意のフォルダを開くことができ、またその状況でVisual Studio Codeの全ての機能を利用できます。Visual Studio Codeがどのようにしてコンテナに接続するかは、devcontainer.jsonファイルに記述する必要があります。^[2] 2022年、この devcontainer.json 仕様は、VS Codeに依存しないよう標準化されました。^[3] 2024年5月、現在は、Visual Studio、IntelliJ IDEAなどのエディタがこの仕様に対応しています。^[4]

https://code.visualstudio.com/docs/devcontainers/containers より

Visual Studio Codeを用いた導入方法

Visual Studio Codeの拡張機能 Dev Containersを使用すると、簡単にDev Container環境を構築できます。^[5]

まず、Docker、Visual Studio Code、および Dev Containers拡張機能をインストールします。

続いて、Visual Studio CodeにてCommand Palette (F1 または ⇧⌘P)を開き、Dev Containers: Add Dev Container Configuration Files... を選択します。

他の人にもDev Container環境を共有するため、Add configuration to workspace を選択します。

その次は、プロジェクトの要件に合わせて使用するDockerイメージなどを選択します。選択が終わるとDev Container構成ファイル.devcontainer/devcontainer.jsonが作成されます。

カスタムしたDockerイメージを使用したい場合や、アプリケーションに必要なサービス(DBなど)を構成ためDocker Composeを使用したい場合が多いでしょう。 その際は、Using Images, Dockerfiles, and Docker Composeのガイドに従ってカスタマイズできます。

最後に、.devcontainer/devcontainer.jsonに使用するVisual Studio拡張機能を記述することで、カスタマイズされたDev Container環境の構成が完了します。

この .devcontainer/devcontainer.jsonの構成ファイルと関連するDockerfileやDocker ComposeファイルをGitで管理しておくと、他の人もリポジトリをクローン後、Visual Studio Codeで開いた際に、Reopen in Containerの案内が表示され、一回のクリックだけですぐ構成済みのDev Container環境を立ち上げれます。

事例紹介

ここではPython、Poetry、FastAPIの技術スタックを使ったプロジェクトにDev Containerを導入した事例を紹介します。

本番環境と開発環境のDockerイメージ管理

近年、本番環境でDockerコンテナを利用することが一般的になっていて、本プロジェクトでも本番環境にコンテナを採用しています。 しかし、本番環境と開発環境のDockerイメージには、以下のような要件の違いがありました。

• 本番環境用Dockerイメージは軽量化が求められるのに対し、開発環境用には開発関連のツールやパッケージが必要とされた
• 本番環境と開発環境で異なる値を使いたいPython環境変数があった
• 開発時にGitでソースコードを管理するため、Dockerイメージにソースコードを含める必要はなかった

こうした複数のレイヤーにわたり要件の違いがあったため、本番環境用と開発環境用のDockerfileを分ける必要がありました。 ただし、将来の変更を見据え、それぞれの指示の順序を合わせることで差分が分かりやすくなるよう工夫しました。

Git completionの設定

今回使用したベースイメージ mcr.microsoft.com/devcontainers/python では、ターミナルを開いた時に起動するbashでGit補完が効かなかったため、 .devcontainer/devcontainer.jsonのpostCreateCommand を設定し、.bashrcにてGit補完を実行するように追記しました。

1	// Add git auto-completion via .bashrc
2	"postCreateCommand": "echo \"source /usr/share/bash-completion/completions/git\" >> ~/.bashrc",

最後に

いかがだったでしょうか? 一度Dev Container環境を構築しておけば、様々な点で便利です。
皆様の開発環境構築の参考になれば幸いです。

参考文献

1. https://code.visualstudio.com/blogs/2019/05/02/remote-development ↩︎
2. https://code.visualstudio.com/docs/devcontainers/containers ↩︎
3. https://code.visualstudio.com/blogs/2022/05/18/dev-container-cli ↩︎
4. https://containers.dev/supporting.html ↩︎
5. https://code.visualstudio.com/docs/devcontainers/create-dev-container ↩︎