開発環境構築を便利にするDev Container の使い方

はじめに

この記事をご覧の皆さんはプログラミング開始時のローカル環境構築において環境構築手順書に従って構築したものの動かなかったり、開発メンバーの利用している PC 環境によって動作が異なったりした経験はないでしょうか？この記事では Docker 上で環境構築することでそれをより簡単にし、開発メンバーの開発環境の違いをなくすことのできる Visual Studio Code の拡張機能 Dev Container について解説します。

Visual Studio Code とは

Visual Studio Code (以降、 VS Code) とは、Microsoft 社が開発しているソースコードエディタです。非常に多くのプログラミング言語に対応しており、デバッグや Git のコントロール、シンタックスハイライト、コード補完、コードリファクタリングのサポートなどが含まれます。また、カスタマイズ性が高く、テーマやキーボードショートカット、環境設定を変更できたり、拡張機能をインストールできたりします。VS Code は MIT ライセンスでオープンソースとして公開されています。

Dev Container とは

Dev Containerとは、Visual Studio CodeでDockerコンテナを使用して統一された開発環境を構築し、管理するための機能です。Dev Container に詳しく解説する前に Docker について解説します。

Docker とは

Dockerは、OSに依存せず、アプリケーションを簡単に実行・管理 できるプラットフォームです。Linux のカーネルをそのまま利用し、プロセスやユーザーを隔離することでアプリケーションやミドルウェアが別のマシンで動いているかのように動かすことができます。

ハイパーバイザとは

ハイパーバイザとは、Docker とは異なり、物理的なマシンの中に仮想的なマシンを作り、その中でゲスト OS とアプリケーションを動かします。ハイパーバイザの上で動くため、物理的なマシン上で直接 OS とアプリケーションを実行するより実行速度が低下します。

Dockerを使用するメリット

ハイパーバイザを用いた従来の仮想化技術よりも軽快に動作することが期待できます。

また、Docker はミドルウェアのインストールや各種環境設定をコード化して管理します。これは IaC (Infrastracture as Code) と呼ばれ、そのコードを再利用することで手軽にどこでも同じ環境が構築できる、スクラップ＆ビルドが容易に行えるなどのメリットがあります。

Dev Container のしくみ

画像引用元：https://code.visualstudio.com/docs/devcontainers/containers

Dev Containerは一言で言うと開発環境のコンテナです。Dev Container では Docker のこれらの特性を利用し、同じ開発環境を簡単に再現することができます。

Dev Container を立ち上げると Docker コンテナに対してホストマシンからソースコードをマウントし、VS Code の拡張機能はコンテナ内にインストールされます。また、VS Code の設定や拡張機能、インストールするライブラリや起動するサービスは devcontainer.json 、Dockerfile 、docker-compose.yml ファイルに定義することができ、これらの設定は Dev Container の起動時に自動で行われます。

Dev Container の３つのメリット

開発環境の一貫性とセットアップの迅速化

Dev Container ではプロジェクトに必要なライブラリやツール、設定がコード化されます。この働きにより、全ての開発者が利用しているハードウェアや OS の違いによらず同じ開発環境で作業を行う事ができます。また、プロジェクトに新しく参加するときのセットアップが迅速化されます。

開発環境と本番環境の整合性

開発環境と本番環境で共通のコンテナイメージを利用することで OS やソフトウェアのバージョンや設定が一致させやすくなります。また、構築やテスト、実行が容易に行えるようになるため、本番環境でのトラブルも低減させることができます。

開発環境の隔離

Dev Container はローカル環境から隔離された形で実行されるため、異なる開発環境を素早く切り替えたり、ローカルマシンへの影響なく何度でも同じ環境が構築できたりします。

よりわかりやすく言えば、開発者が複数のプロジェクトを同時に作業している場合、それぞれのプロジェクトで同じバージョンのライブラリやツールをインストールする必要がある、開発環境を構築する際に、OS やソフトウェアのバージョン、設定などのミスが発生する可能性がある、といった状況で役立ちます。

VSCode で Dev Container の環境構築

Dev Container の導入には、Windows や macOS の場合は Docker Desktop、 Linux の場合 Docker CE/EE 及び Docker Compose のインストールが必要となります。それぞれの環境でDockerを導入してください。手順は以下のとおりです。

1. Docker Desktop のインストールページにアクセスします。
2. 使用している OS に合わせて、ダウンロードボタンをクリックします。
3. ダウンロードしたインストーラーを実行します。
4. インストールウィザードに従って、インストールを完了します。

https://docs.docker.com/engine/install/

Dev Container の環境構築

VS Code の Dev Container 拡張機能を用いて Docker 上の開発環境を作成する方法を解説します。

1. Docker Desktop アプリケーションを実行する

   コンテナを立ち上げるには Docker を起動しておく必要があります。

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

   VS Code を起動し、Dev Container 拡張機能を検索し、インストールします。インストールされるとウィンドウの左下の隅にリモートステータスバーが表示されます。

3. コンテナのサンプルを入手する

   Dev Container を導入したいプロジェクトを VS Code で開きリモートステータスバーをクリックします。その後、コンテナイメージのリストから自分が構築したい開発環境のものを選択し、実行します。

4. 新しい開発コンテナー...を選択します。

5. 使いたいプログラミング言語の Docker イメージを選択します。

6. その他のオプションを選択します。

7. プログラミング言語のバージョンを選択します。

8. 使用する CLI ツールがある場合は選択します。

9. コンテナが構築されるまで待つ

   その後 VS Code のウィンドウが再読み込みされ、コンテナの作成が行われます。コンテナが構築されると、VS Code が自動的にコンテナに接続し、プロジェクトのディレクトリがコンテナにマウントされます。コンテナの立ち上げは次回以降はコンテナが存在するため、プロジェクトを開いた時点で自動で行われます。

Dev Container の設定ファイル

環境構築の際に作成された devcontainer.json ファイルを詳しく見ていきます。

name キー

立ち上げるコンテナの名前です。

image キー

使用する Dockerfile または docker-compose.yml ファイルです。

feature キー

使用する Docker Image に含まれないツールをインストールすることができます。

forwardPorts キー

コンテナからローカルマシンに転送されるポートを指定できます。

postCreateCommand キー

コンテナが作成されたあとに実行されるコマンドを指定できます。

customizations キー

VS Code などのエディタの設定を記述することでその設定をコンテナを開く度に再現できます。

remoteUser キー

接続するアカウントの設定を上書きします。

まとめ

ローカルでの開発環境の構築は開発者ごとの環境の違いや本番環境との違い、ローカルにインストールされているライブラリによって様々なトラブルが起きます。Dev Container を利用することでそういった環境の差異を吸収し、開発環境のセットアップを迅速に行うことができます。

開発環境の構築にトラブルを抱えている場合は、 Dev Container で簡単に解決できるので、利用を検討してみてはいかがでしょうか？

参考文献

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