【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 - Containers は Remote Development に含まれています。
Remote - Containers だけあれば、問題ないかと思いますが、Remote - Containers での動作は未確認なため、不安な場合は Remote Development の方をインストールしてください。
使い方
テンプレートコードの取得
以下のリポジトリをクローンするか、以下のページの Use this template ボタンなどから新しいリポジトリを作成してください。
テンプレートの構成は以下のような感じです。
セットアップ
主な設定内容は以下の３つです
- ベースイメージの変更
- 表示名の設定
.gitignoreの調整
デフォルトでは python イメージをベースにした設定にしてあります。
変更なしで Dev Container を起動すると Python 開発環境がスタートします。
ベースイメージの変更
docker-compose.yml の image フィールドに、使用したい Docker イメージを指定してください。
2020/06/12 時点では、python 、node 、gcc 、maven イメージでの動作を確認しています。
他のイメージでも、おおよそ問題なく動作すると思います。
未確認ですが、Dockerfile を使ったカスタムイメージでも、たぶん問題ないと思います。
表示名の設定
.devcontainer/devcontainer.json の name フィールドに、適当な名称を設定してください。
各部の表示名が変わります。
特に変更しなくても、動作に影響はないですが、設定しておいた方が気持ちいいかと思います。
.gitignore の調整
使用する Docker イメージに合わせて .gitignore を調整してください。
以下の.gitignoreテンプレート集がオススメです。
こちらも、動作に影響はないので、Git 管理除外したいファイルが出たときに、後追いで調整ということでも問題ないと思います。
「Dev Container」の起動
Visual Studio Code の左下の方にある、
のような部分をクリックするか、コマンドパレットを開いて、Remote-Containers: Open Folder in Container... を検索・選択してください。
フォルダの選択ウィンドウが表示されるので、プロジェクトルートを選択 してください。
※ Remote-Containers: Reopen in Container が表示されていれば、そちらからの起動でもＯＫです。
うまく動かないときは
「docker-compose.extend.yml」の「command」フィールドをチェック
docker-compose.extend.yml の command フィールド の設定で、コンテナが起動したままになるようにしています。
デフォルト設定で問題がある場合は、以下の設定を１つずつ試してみてください。
sleep infinitytail -f /dev/null/bin/bash
※ コンテナを起動したままにできる設定であれば、その他の設定でもＯＫです。
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.ymlのcommandフィールド、Compose ファイルのバージョンをチェック！
