ZOZO Advent Calendar 2023 Series 5、16日目を担当するふっさーです。2023年3月にZOZOにSREとして入社しました。

現在はSREですが、以前は複数プロジェクトのアプリケーション開発やメンテナンスを同時にこなすエンジニアでした。その時の経験から、Dev Containerでの開発やVSCodeの便利な拡張機能を布教したいと思い、今回の記事を作成しました。

TL;DR

VSCodeの拡張機能であるProject Managerを使うと、ディレクトリやワークスペースをProjectとして登録しておくことで、ワンクリックで簡単に切り替えられるようになります。Projectにはローカル環境だけでなく、リモート環境の登録も可能です。リモート環境にはDev Container環境も含みます。

Project ManagerとDev Containerの2つを活用すれば、コンテナにより隔離された開発環境をVSCode上から素早く起動することができるのです。既にDev Container環境で開発している方や、アプリケーションごとに開発環境を完全に分けたいと思っている方におすすめです。

前提

本記事は下記の読者を想定しています。

Dev Containerを使用して開発している方
コンテナ上で動作させるアプリケーションをVSCodeで開発している方
コンテナを使用し、アプリケーションごとに完全に開発環境を分けたい方

はじめに

コンテナ上で動作させるアプリケーションの開発において、Dev Containerを使用すると、本番環境と同じDockerfileから開発環境を構築することができます。これにより本番環境と開発環境の差異をなくし、モジュールや言語のバージョン違いによる「dev環境では動いたのにprd環境だと動かない...」という問題を防ぐことができます。

このように開発において有用なDev Containerですが、下記の場合にはDev Container環境の起動に手間が発生します。

VSCodeを開き直して、再度Dev Container環境に切り替えたい場合
複数のアプリケーションをそれぞれDev Container環境で起動したい場合

どちらの場合も一発でDev Container環境を起動することができず、まずはアプリケーションのディレクトリをVSCodeで開いて、その後「Reopen in Container」を押してDev Container環境に切り替える必要があります。

本記事では、VSCodeの拡張機能であるProject Managerを使用し、Dev Container環境をProjectとして登録しておくことで、ワンクリックで簡単に起動できる方法を紹介します。

Project Managerとは

Project Managerを使うと、ディレクトリやワークスペースをProjectとして登録しておくことで、ワンクリックで簡単に切り替えられるようになります。Projectにはローカル環境だけでなく、リモート環境の登録も可能です。リモート環境にはDev Container環境も含みます。

Dev Containerとは

Dev Containerは、コンテナ内での開発を可能にするVSCodeの拡張機能です。Remote Developmentという拡張機能の一部として提供されています。

Dev Containerでは、指定したDockerfileまたはdocker-compose.yamlを元に、Dev Container環境を起動します。ソースコードはローカル環境からマウントされ、そこにVSCodeがリモート接続されることでコンテナ内での開発が可能になります。

Dev Container環境でのみ必要なツールや設定は.devcontainer/devcontainer.jsonに記述します。例えば、下記のようにextensionsにVSCodeの拡張機能を記述することで、Dev Container環境でのみ必要な拡張機能をインストールしたり、gitやsshなどのパッケージのインストールもできます。¹

{
    "name": "Sample Dev Container",
    "build": {
        "context": "..",
        "dockerfile": "../Dockerfile"
    },
    "onCreateCommand": "apt-get update && apt-get install -y curl vim",
    "customizations": {
        "vscode": {
		    "extensions": [
		        "streetsidesoftware.code-spell-checker",
				"mhutchie.git-graph"
			]
		}
	}
}

Dev Container環境は、このように既存のDockerfileと.devcontainer/devcontainer.jsonで簡単に構築できるため、コンテナ上で動作させるアプリケーションの開発におすすめです。

Dev Containerにより解決できる課題は、主に下記の3つが挙げられます。

開発環境と同じ環境を共同開発者用にも構築しないといけない...
→ VSCodeとDockerfileと.devcontainer/devcontainer.jsonで自動構築できる
開発環境ではプログラムが正しく動くのに、本番環境では上手く動かない...
→ 本番環境と同じDockerfileから開発環境を構築することで問題発生を防げる
手元のPCで様々なプロジェクトの開発環境が混ざっていて何がどれに必要なのか分からない...
→ 手元のPCには何もインストールせず、プロジェクトごとにコンテナを分離して開発できる

Dev Containerを使用すること自体のデメリットはないと思っています。

Dev Container環境をProject Managerに登録する手順

Project Managerをインストールします。Dev Container環境ではなく、ローカルのVSCodeにインストールしてください。
Project Managerに登録したいDev Container環境をVSCodeで起動します。
VSCodeの左側にあるアイコンをクリックし、Project Managerを開きます。
Dev Container環境をProjectとして登録します。

Dev Container環境を登録すると、下記画像のようにリモート環境のアイコンで登録されます。

これでDev Container環境をProject Managerに登録することができました。Dev Container環境を起動していない状態からProject Managerを開き、登録したProjectをクリックすると、一発でDev Container環境が起動するはずです。

1つのアプリケーションしか開発していない場合、あまり恩恵を感じないかもしれませんが、複数のアプリケーションをそれぞれDev Container環境で起動したい場合には、かなり楽になるはずです。

おわりに

今回は、VSCodeの拡張機能であるProject Managerを使用して、Dev Container環境を素早く起動する方法を紹介しました。

Qiitaの記事を書くのが初めてなので、至らない点があるかもしれませんが、最後まで読んでいただきありがとうございました。

自分の開発環境については、ローカル環境に何が入ってるか分からなくなるのが嫌で（開発にも影響があるし）、git, ssh, docker以外はローカルにインストールせず、全てDev Container内で完結するようにしていました。次回はその辺りの話を書きたいと思います（そのうち）。

sshの鍵情報については、VSCodeによりssh-agentがコンテナ内に転送され、ssh接続やgit pushが可能になります。もしsshの鍵情報が使用できない場合はkeychainなどを使用し、ホストマシン側でssh-agentを起動しておく必要があります。 ↩

【VSCode】Project ManagerによりDev Container開発環境を素早く起動する