VSCode のリモートコンテナ機能を用いて、あるリポジトリ専用の環境を開発者間で統一する

概要

VSCode のリモートコンテナ機能を用いると、開発環境を dockerfile の形でコード管理することができます。これにより、開発者が開発に用いる環境をリポジトリごとに統一できます。

VSCodeのリモートコンテナ機能とは

コンテナの中に開発環境を押し込んで、その中にディレクトリをマウントして開発するVSCodeの機能です。

リモートコンテナ機能を用いて開発するメリット

リモートコンテナ機能を用いて開発することには以下のようなメリットがあります。

local環境を汚さない

複数のプロジェクトで開発するにつれて、local マシンにはそのための様々なアプリ・設定が導入されていきます。この状態には以下のような欠点があります。

• 導入されたアプリや設定が膨大になって管理しきれなくなり、何のために導入されたか、変更してよい設定なのかが分からなくなる
• 異なるプロジェクトで必要な設定・アプリ同士が衝突し、開発に支障をきたす

コンテナ機能を用いてプロジェクトごとに異なるコンテナ内で開発することで、以上の問題は解消されます。

開発環境構築が容易で、再現性が高い

開発に必要なアプリ・設定がコンテナの形でまとめられているので、少ない労力で何度でも開発環境を再現できます。たとえばローカル上で直接開発している場合、以前の開発環境で作成したビルドを再現したいのに、現在の開発環境だと差分が発生してしまってうまくいかないことがあります。開発環境をコード管理・バージョン管理することで、開発環境の再現が容易になります。

開発者間での開発環境の差異が生まれにくい

開発者間で開発環境が異なっているとチームでの開発や運用に支障をきたすことがあります。
例えば以下のようなケースが想定されます。

• 開発者Ａと開発者Ｂでビルド生成物に差異が出る
• 開発者Ａの環境で通ったテストが開発者Ｂの環境で通らない
• CI環境と開発者の手元環境でテストが通るかどうかが異なる

開発環境をコンテナ化することで、複数の開発者が同じ開発環境で開発でき、なおかつ開発環境の変更を明示的にコード履歴に含めることができます。

VSCode リモートコンテナ機能の便利機能

git管理されたコンテナイメージ内で開発する一般的な利点に加えて、VSCode のリモートコンテナ機能は以下の便利機能を備えています。

ホストの .gitconfig 設定をコンテナ内に引き継ぐ

ホストの .gitconfig の設定を引き継ぎつつ、新しい .gitconfig がコンテナ内に作成されます。これにより、コンテナ内でもホストと同じ名前とemail設定を用いて commit を作成することができます。
（この機能は設定で off にすることができます。）

ssh key がコンテナ内でも使える

ホストの ssh key がコンテナ内でも有効になります。これにより、ホストと同じキーでgithub などに push することができます。

dotfiles が展開される

ホスト側の settings.json で指定した自分用 dotfiles リポジトリを用いて、dotfiles をコンテナ内に展開することができます。これによりコンテナ外でのシェル設定などがコンテナ内でも引き継げます。
例として、こちらが自分が現在使っているdotfiles リポジトリです。

コンテナ内で使える設定・VSCode 拡張を指定できる

コンテナ内で使うVSCode の設定や拡張機能を、レポジトリごと、もしくは開発者ごとに指定することができます。

開発者間で共通の設定・拡張を導入したいとき

リポジトリ内の devcontainer.json に指定することで、そのリポジトリでリモートコンテナ機能を使ったときに有効になる VSCode 拡張を指定できます。
この機能は複数の開発者に同じ VSCode 拡張を導入してもらいたいときに便利です。たとえば、解析ツールとその拡張などを共有するときに便利かと思われます。

自分独自の設定・拡張を導入したいとき

ホストの個人用 settings.json に指定することで、リモートコンテナ機能を使ったときにリポジトリによらず有効になるvscode拡張を指定することもできます。キーバインドや見え方の拡張など、自分独自の設定を導入するのに便利です。

設定手順

前提条件

• docker が起動している。
• VSCode がインストールされている。

最低限の設定

ホスト側の VSCode に remote development 拡張を入れる

VSCode の拡張機能一覧から Remote Development を探し、導入します。

たとえば、https://github.com/yuchiki/poll を gh repo fork してきて code コマンドで開くと、右下に pop up されるボタンから remote container として開きなおせることが確認できます。
この時用いられる Dockerfile と設定は リポジトリ内の .devcontainer ディレクトリ以下にあります。

便利な設定

以下の設定がうまくいかないときは、 F1キーを押してコマンドパレットを開き remote-container > rebuild and reopen the container を試してコンテナを逐一再構築してみるとよさそうです。

remote > containers: copy git config

設定画面で remote containers　と検索をかけると見つかる項目です。
これを有効にしておくと localの.gitconfigの値が コンテナ内に受け継がれます。
(記事執筆段階では default で有効？)

remote > containers > default extensions

ここに拡張機能の識別子(ID) (拡張機能のタブで該当の拡張機能を開くと書いてあります) を入力すると、コンテナ内でもその拡張機能が有効になります。
vim キーバインドとか emacs キーバインドとか、インデントとか括弧の表示を変える機能とかを入れている人にとっては便利かもしれません。

dotfiles repository

dotfiles の git repository のURLを入力しておくと、その repository を pull してきてその中の install.sh を実行してくれます。
参考: https://github.com/yuchiki/dotfiles

新しいリポジトリのセットアップの仕方

リポジトリを VSCode で開いた後、 付属のコマンドパレットで Remote-Containers: Open Folder in Container を実行します。
その後は VSCodeの指示に従い、必要な項目を選択していくと、テンプレートが自動的に作成されます。
生成された Dockerfile は編集したのちに rebuild　して、自分の都合の良いように書き換えていくこともできます。

まとめ

リモートコンテナ機能を用いると、開発環境を コードの形でバージョン管理できます。
これにより、リポジトリごとに開発者が開発に用いる環境を統一できます。

参考

• Visual Studio Code の docs - Remote development in Containers