VS CodeのRemote Containersが良かったのでまとめてみた

僕はエディタはVisual Stadio Code(VS Code)を使用しています。 Dockerの学習も終え、ある程度は理解して使えるようになったので開発環境としても使いたいと思うようになりました。

そこでいろいろ調べてみたところ、VS Codeの拡張機能であるRemote Containersが良いらしい。 ※ちなみにPreviewです。

ということで自分で試したところ使いやすかったですし、さらに評判も良いらしいので自分なりにこの拡張機能についてまとめてみました。

(ちなみに公式ドキュメントに詳しく丁寧に書かれてあるので、英語読むのが苦でない方、ボリューミーな記事が苦でない方はこちらを読むのが確実かと思います。)

Remote Containersとは

まず、Remote Containersとは、簡単にいうとコンテナを立ち上げ、その内部での作業をVS Code上で行えるというものです。 つまりはコンテナ内でVS Codeの他の拡張機能を使用できるようになります。(ただし一部の拡張機能は対応していないものもあります)

これによってローカルの環境を汚すことなく様々なバージョン、環境を用意できる上にVSCodeの機能を使用した開発を行うことができます。

言語のバージョン変更をしたいときは、異なるバージョンのイメージ使って他のコンテナを立ててしまえば簡単にできます。

使ってみる

Docker Desktop、VSCodeがインストールされている状態、拡張機能に Remote Containersをインストールした状態を前提に進めていきます。

以下、 1. Dockerfileを用意・利用した場合 2. docker-compose.ymlを用意、利用した場合 3. どちらも利用しない場合 の3つに分けて操作上の動作に視点を置いて書いていきます。

1.Dockerfileを利用した場合

1.Dockerfileが含まれているフォルダをVSCodeで開きます。 2.↑VS Codeの左下にある「><」が重なりかけたようなマークを押す。 3.Reopen in Containersを選択 4.From Dockerfileを選択 5.buildが開始され、終了後、.devconteiner/devcontainer.jsonファイルが作成されて無事コンテナ立ち上げです。

2.docker-compose.ymlを利用した場合

操作上はDockerfileを利用した場合とあまり変わりありません。

.devcontainers/devcontainer.jsonを用意していなかった場合(そしてdevcontainer.jsonのプロパティのseviceを指定していなかった場合)には、ReOpen ContainerのときにDockerfileを使用するのか、docker-compose.ymlを使用するのか問われ、またdocker-comopseの場合どのserviceに接続するのか聞かれます。

3.どちらも用意しない場合

もしくはこれらのファイルを用意していないフォルダを開き、Reopen inContainersを押すと、alpineやubuntu、node、Goなど任意の環境を選べるのでここから選択することでコンテナ作成することもできます。

...

以上、こんな感じです。 ローカルに戻るときはもう一度左下のマークを押し、「Reopen locally」または「リモート接続を終了する」を選択するだけです。

また、開発環境の設定変更を行った場合、左下のマーク押下、Rebuild Containerを押下、で反映完了です。

拡張機能とdevcontainer.json

コンテナ内で拡張機能を使用する方法は2つあります。 ちなみに、これら拡張機能はローカルとは別でリモート環境に追加することが可能です。

1つめは、コンテナ立ち上げ後、コンテナに接続した状態で拡張機能のボタンをクリック、使いたいものをインストールする方法です。

2つめはdevcontainer.jsonに予め使う拡張機能を定義する方法です。 devcontainer.jsonには拡張機能のほか、様々なプロパティ、設定値を定義できます。 ・name: コンテナ名を指定します ・dockerFile: 使用するDockerfileを相対パスで指定します ・dockerComposeFile: 使用するymlファイルを相対パスで使用します。デフォルトでは.envファイルをルートからとってきますが、docker-composeファイルでenv_fileを指定するとそちらのファイルをとってくるよう指示できます ・service: docker-composeの場合どのサービスに接続するか指定します ・settings: VSCodeのsetting.jsonの設定を書きます ・extensions: リモート環境にインストールしたい拡張機能を記入します ・forwardPorts: フォワードするときのポート指定を行います ・ ...

その他設定値などはこちらのリファレンスで参照できます。

まとめ

ということでこちらの機能今後も使って行こうかなと思います。

使っていくうちにまた疑問点や、不具合が出てくると思うのでその場合はまたまとめます。 公式ドキュメントもしっかり全ては読み込んでいないことですし...使っていくうちに必要に応じて読み込んで、詳しくなっていこうと思います。

参考: ・https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers ・https://www.keisuke69.net/entry/2020/06/04/145719 ・https://bufferings.hatenablog.com/entry/2020/06/11/233201 ・https://qiita.com/yoskeoka/items/01c52c069123e0298660