この記事は公開されてから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
の内容は以下のようにしました。
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」をクリックして接続
まとめ
以上、既存のDocker開発環境をVS CodeのRemote Developmentで開発できるようにしてみました。
後付けでコンテナのRemote Developmentを設定する場合に、なにかの参考になれば嬉しいです。
どなたかのお役に立てば幸いです。それでは!