m's blog

備忘録とかメモとか

【VS Code】Remote Development テンプレートを作ってみました!

VS CodeのRemote Developmentテンプレートを作ってみました!

「Visual Studio Code」の「Remote Development」用のテンプレート を作ってみたので、簡単に紹介したいと思います。

主にテンプレートの使い方について解説していきます。

目次

はじめに

「docker-compose.yml」を含むテンプレートとなるため、「Docker」と「Docker Compose」環境が必要になります。

準備

「Visual Studio Code」のインストール

「Visual Studio Code」をインストールしていない場合は、以下のページからダウンロードして、インストールしてください。

「Dev Container」用の拡張機能のインストール

Visual Studio Code をインストールしたら、以下の拡張機能のどちらかをインストールしてください。

Remote - ContainersRemote Development に含まれています。

Remote - Containers だけあれば、問題ないかと思いますが、Remote - Containers での動作は未確認なため、不安な場合は Remote Development の方をインストールしてください。

使い方

テンプレートコードの取得

以下のリポジトリをクローンするか、以下のページの Use this template ボタンなどから新しいリポジトリを作成してください。

テンプレートの構成は以下のような感じです。

VS CodeのRemote Developmentテンプレートを作ってみました!

セットアップ

主な設定内容は以下の3つです

  • ベースイメージの変更
  • 表示名の設定
  • .gitignoreの調整

デフォルトでは python イメージをベースにした設定にしてあります。

変更なしで Dev Container を起動すると Python 開発環境がスタートします。

ベースイメージの変更

docker-compose.ymlimage フィールドに、使用したい Docker イメージを指定してください。

2020/06/12 時点では、pythonnodegccmaven イメージでの動作を確認しています。

他のイメージでも、おおよそ問題なく動作すると思います。

未確認ですが、Dockerfile を使ったカスタムイメージでも、たぶん問題ないと思います。

表示名の設定

.devcontainer/devcontainer.jsonname フィールドに、適当な名称を設定してください。

各部の表示名が変わります。

特に変更しなくても、動作に影響はないですが、設定しておいた方が気持ちいいかと思います。

.gitignore の調整

使用する Docker イメージに合わせて .gitignore を調整してください。

以下の.gitignoreテンプレート集がオススメです。

こちらも、動作に影響はないので、Git 管理除外したいファイルが出たときに、後追いで調整ということでも問題ないと思います。

「Dev Container」の起動

Visual Studio Code の左下の方にある、VS CodeのRemote Developmentテンプレートを作ってみました! のような部分をクリックするか、コマンドパレットを開いて、Remote-Containers: Open Folder in Container... を検索・選択してください。

フォルダの選択ウィンドウが表示されるので、プロジェクトルートを選択 してください。

Remote-Containers: Reopen in Container が表示されていれば、そちらからの起動でもOKです。

うまく動かないときは

「docker-compose.extend.yml」の「command」フィールドをチェック

docker-compose.extend.ymlcommand フィールド の設定で、コンテナが起動したままになるようにしています。

デフォルト設定で問題がある場合は、以下の設定を1つずつ試してみてください。

  • sleep infinity
  • tail -f /dev/null
  • /bin/bash

※ コンテナを起動したままにできる設定であれば、その他の設定でもOKです。

Compose ファイルのバージョンをチェック

Compose ファイルのバージョンは 2020/06/12 時点で最新のものに設定しています。

使用している Docker のバージョンによっては、対応していない場合があります。

以下のページのバージョン対応表を参考に、docker-compose.yml.devcontainer/docker-compose.extend.yml のバージョンを調整してみてください

その他のテンプレート

今回紹介した python イメージをベースにしたテンプレートのほかに、 node イメージをベースにしたテンプレートと gcc をベースにしたテンプレートを公開しています。

python、node、gcc のいずれかを利用する場合は、以下のテンプレートを使用してください。

※ その他のイメージに変更して使用する場合は、今回紹介したmm0202-template/vscode-remote-dev-container を使用してください。

Python 開発環境

Node.js 開発環境

C 言語開発環境

まとめ

今回は、作成した「Remote Development」テンプレートを、簡単に紹介してみました。

最後に、今回の内容について、簡単にまとめてみたいと思います。

  • 大事な設定はベースイメージの設定だけ!
  • 動かないときは docker-compose.extend.ymlcommand フィールド、Compose ファイルのバージョンをチェック!