既存のDocker開発環境をVS CodeのRemote Developmentで開発できるようにしてみた

#VSCode（Visual Studio Code）

#コンテナ

大高大輔

2021.10.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！DA(データアナリティクス)事業本部サービスソリューション部の大高です。

私は普段のローカル開発環境として、Dockerを利用した開発を行っており、このコンテナ環境はsshを利用してVS Codeで接続および開発できるようにしています。

一方で、VS Codeを利用しているので「せっかくVS Codeを利用しているのであれば、Remote Development（のコンテナ機能）を利用して開発したい！」という想いから設定をしてみたので、その設定方法についてまとめておきたいと思います。

前提

まず、元々の環境についてです。

OSなど

OSはMacOSで、DockerについてはDocker Desktop for Macを利用しています。

VS Codeの拡張機能

VS Codeの拡張機能に「Remote Development（ms-vscode-remote.vscode-remote-extensionpack）」を追加済みです。

開発環境

開発環境として、以下のようなプロジェクト構成のものを利用しています。

.
├── README.md
├── docker-compose.yml
├── development_machine
│   ├── Dockerfile
│   ├── id_rsa
│   └── id_rsa.pub
└── share
    └── shared_file

イメージビルド時にSSHの設定も同時に行い、生成したキーを利用してコンテナにSSH接続をして開発をしています。

Remote Developmentを利用してコンテナで開発をする

では、この状態からRemote Developmentを利用してコンテナで開発ができるようにしていきます。VS Code公式のドキュメントでは、以下で解説がされていますので、こちらを参考に開発環境を修正していきます。

devcontainer.jsonファイルの追加

VS Code用のコンテナ設定ファイルとして、devcontainer.jsonファイルを追加します。追加先はフォルダを新規に追加して.devcontainer/devcontainer.jsonとします。

.
├── .devcontainer
│   └── devcontainer.json // ← NEW!!
├── README.md
├── docker-compose.yml
├── development_machine
│   ├── Dockerfile
│   ├── id_rsa
│   └── id_rsa.pub
└── share
    └── shared_file

devcontainer.jsonの内容は以下のようにしました。

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.158.0/containers/docker-existing-docker-compose
// If you want to run as a non-root user in the container, see .devcontainer/docker-compose.yml.
{
	"name": "dev-container", // コンテナ表示名
	"dockerComposeFile": [
		"../docker-compose.yml" // Docker Composeのファイルパス
	],
	"service": "dev", // Docker Composeの接続サービス名
	"remoteUser": "dev-user", // デフォルトユーザをrootから切り替える
	"workspaceFolder": "/home/dev-user", // Workspaceのフォルダを指定
	"extensions": [ // コンテナ内でインストールするVS Codeの拡張機能ID
		"ms-python.python",
		"dbaeumer.vscode-eslint",
		"esbenp.prettier-vscode",
		"kddejong.vscode-cfn-lint"
	],
	"settings": { // コンテナ内に追加するVS Codeの設定
		"python.linting.pylintEnabled": false,
		"python.linting.flake8Enabled": true,
		"editor.formatOnSave": true,
		"python.linting.flake8Args": [
			"--max-line-length=150"
		],
		"eslint.workingDirectories": [
			{ "mode": "auto" }
		],
		"cfnLint.path": "/home/jmc-dev/.pyenv/shims/cfn-lint",
	}
}

個人的に必須だった設定としては、remoteUserとworkspaceFolderです。

Dockerfileで開発用ユーザを追加設定したので、コンテナでのデフォルトのユーザをrootユーザではなくremoteUserで明示的に指定しています。この指定がないと、ターミナルなどがrootユーザで開いてしまうので必須の設定でした。

また、workspaceFolderを指定することで、コンテナに接続した際にVS Codeで開くワークスペースフォルダを指定できます。これも私は開発用ユーザであるdev-userのホームディレクトリにしたかったので、指定をしています。

その他、詳細なオプションについては、以下のドキュメントに記載されています。

コンテナへの接続方法

コンテナへの接続方法はいくつかあるようですが、私は主に以下の2パターンぐらいで行っています。

パターンA
- VS Codeの左側のアイコン「リモートエクスプローラー」を開く
- 「Dev Containers」に追加されたコンテナ名（devcontainer.jsonのnameで指定したもの）のOpen Folder in Containerをクリックして接続
パターンB
- .devcontainerを配置したプロジェクトフォルダをVS Codeで開く
- Folder contains a Dev Container configuration file. Reopen folder to develop in a container.とダイアログ表示されるので「Reopen in Container」をクリックして接続