最近の開発環境の代表格といえば,Visual Studio Code(VSCode)といえます.また,ここ数年で広く認知されたDockerも利用されています.この記事では,VSCodeとDockerを組み合わせた開発方法を記載します.
VSCodeとDockerの組み合わせには,MicroSoftが公式でリリースされているプラグイン「Remote – Containers」を使用します.
何も考えずにこのプラグインを使用することで,VSCode+Dockerの開発環境は整えることができますが,ひと手間加えることで,より安全かつ堅牢な開発環境を利用することが出来ます.

VSCode + Dockerで開発します!
>> プログラマーのためのVisual Studio Codeの教科書
はじめに
Dockerでは基本的にrootとして作業を行います.root以外のユーザを使用したい場合,ユーザを作成した後,su - username
で一般ユーザにログインします.しかしながら,毎回su - username
を実行するのは面倒です.
VSCodeにおいては,エクスプローラーを利用してファイルやディレクトリ作成をした場合,所有者がrootとなる問題があります.これは,VSCodeでコンテナを開く際にユーザが,rootとなっているためです.そのため,su - username
で一般ユーザにログインしたとしても,さらにアクセス権限の変更も必要となってきます.これらの作業を毎回行うのはとてつもなく面倒といえます.
また,知識が乏しい開発者が,特権ユーザであるrootとして作業した場合,一般ユーザとは異なる挙動をするバグを引き起こす可能性があります.可能な限り不必要な特権ユーザを一般ユーザに与えないほうが良いでしょう.
VSCodeでコンテナ起動時にrootではなく一般ユーザでアクセスすることが出来れば,上記の問題は解決できます.
この記事では,VSCodeでコンテナを利用する際に任意のユーザで起動・実行する方法を記載します.
Remote – Containers
「Remote – Containers」は,DockerコンテナにVSCodeを介してアクセスすることで,VSCodeの開発環境のほぼフル機能を利用することができます.また,MicroSoftからリリースされているため,VSCodeとの親和性も高いといえます.
下図は公式サイトから引用しました.


なぜVSCode+Dockerを開発環境として選んだのか?…ここに至るまでの個人的な経験について
以前まで,私の開発環境はVMWareなどの仮想マシン上でLinuxを起動し,Linux版のVSCodeで開発していました.(それ以前,リモートで実機にログインしてEmacsで開発してました.)VSCodeの「Remote – Containers」でDockerが使用できること知ってから,徐々に「Windows版VSCode」+「Linuxコンテナ」での開発に移行しました.正直,このプラグインが有能すぎてほとんどの仮想マシンを使用すること激減しました.
VSCode+Docker(root)で開発していましたが,やはりroot特有の挙動を制御するための処理が必要でした.今回の記事で紹介する「VSCode+Docker(一般ユーザ)」を最近知ってからより開発が楽になりました.
「Windows版VSCode」と「Docker」は,WSLが若干不安定というデメリットがあります.VMWareなどの仮想マシンは,仮想マシンにリソースがある程度割かれる問題もありますので,一長一短かと思います.コンテナ技術は非常に有用ですが,マニアックな開発をするときは仮想マシンもしくは実機をおすすめします.大多数の人はコンテナで十分だと思います.仮想マシンでも対応しきれないことも多いので,複雑なシステムの本番テストは実機で行ったほうが良いです.
ざっくり学ぶ、Visual Studio Codeの使い方講座
VSCodeでコンテナを利用するための一般的な方法(Root)
一般的なコンテナの起動方法として,以下のような方法があります.この方法ではDockerをRootで起動します.
Dockerコンテナを起動(Docker Desktop for Windows)
Docker Desktop for Windowsを起動し,コンテナをスタートします.


適当なコンテナ名を設定します.


VSCodeでコンテナを開く
[Ctrl + Shit + P]でコマンドパレットを起動し,「Remote-Containers: Attach to Running Container…」で起動済みのコンテナを指定します.(この場合hogeになります)




下図,赤線部で指定したコンテナがrootとして起動していることを確認できます.


ここまで起動すれば,普段通りのVSCodeを使用します.
VSCodeで一般ユーザとしてDockerを利用する
こちらが本題で,DockerをVSCodeで使用する際にRootではなく一般ユーザで使用する方法を説明します.
コンテナの設定ファイル(Dockerfileやdocker-compose.ymlなど)の設定
コンテナの設定ファイルであるDockerfileやdocker-compose.ymlなどの設定を行います.
Dockerfileやdocker-compose.ymlの詳細に関してはここでは説明しません.
シンプルな例として,下記のDockerfileを使用します.
FROM ubuntu:20.04
RUN useradd -m -d /home/dev-user -s /bin/bash dev-user
開発にあたってGit設定が必要となる場合が多いと思いますが,いちいちgit config ...
とGitの設定をするのは面倒です.
下記のようにDockerfileにGit設定を入れておくと,設定の手順を省略できます.
FROM ubuntu:20.04
RUN useradd -m -d /home/dev-user -s /bin/bash dev-user
USER dev-user
RUN git config --global user.email "you@example.com"
RUN git config --global user.name "Your Name"
VSCodeのコンテナ設定ファイルを記述する
一般ユーザとしてコンテナを扱う場合は,.devcontainer/devcontainer.json
というファイルに設定を記述する必要があります.
適当な作業ディレクトリを作成し,その中に.devcontainer/devcontainer.json
を作成します.
{
"name": "dev-container",
"dockerFile": "Dockerfile",
"remoteUser": "dev-user",
"workspaceFolder": "/home/dev-user",
}
name: コンテナ名
dockerfile :使用するコンテナのDockerfile
remoteUser: コンテナにログインするユーザ
workspaceFolder: コンテナ内の作業フォルダ
先ほど作成したDockerfile
も..devcontainer
内に置きます.
この時のフォルダ構成は下記のようになっています.この例では,作業ディレクトリはvscode_workdpace
です.
vscode_workdpace/
`-- .devcontainer/
|-- devcontainer.json
`-- Dockerfile
VSCodeでコンテナを開く


作成した.devcontainer
の親フォルダを選択します.


警告が出る場合がありますが,「Trust Folder & Continue」をクリックして続行します.


VSCodeが開いた後,下図赤線部を確認すると一般ユーザ(dev-user)としてアクセスできていることがわかります.


一般ユーザとしてアクセスできているかを確認
VSCodeのエクスプローラー経由でファイルを作成してみます.


[Ctrl+j]でTerminalを起動します.


ls -la
で新しいファイルfoo
の権限を確認します.


所有者がrootではなく,dev-userとなっていることがわかります.
これにてVSCodeでコンテナを一般ユーザとして起動する設定の完了となります.
コンテナ起動時に拡張機能を自動でインストールする
コンテナ起動時は,拡張機能がインストールされていません.コンテナ起動するたびに,いちいち拡張機能をインストールは面倒です.
.devcontainer.json
に設定を記述することで,コンテナ起動時に自動で拡張機能をインストールすることが出来ます.
C/C++の拡張機能をインストールする設定を例として下記に示します.
{
"name": "dev-container",
"dockerFile": "Dockerfile",
"remoteUser": "dev-user",
"workspaceFolder": "/home/dev-user",
"extensions": [
"ms-vscode.cpptools",
]
}
拡張機能の名前は下図赤枠に記載されているものを使用します.


また,下記のようにGUI上から.devcontainer.json
に設定を追加することも可能です.すでに起動したコンテナはこの方法が簡単です.


ざっくり学ぶ、Visual Studio Codeの使い方講座
まとめ
VSCodeでDockerを使用する際に,rootではなく任意の一般ユーザで利用する方法を説明しました.
より安全な開発を行うためには,root権限なしで開発する方がベターなので,一般ユーザとしてコンテナを使用することを推奨します.
今回の記事では,Dockerfile
を使用しましたがdocker-compose
等でコンテナを設定することも可能です.
また,devcontainer.json
は最低限の設定しか紹介していませんが,運用方法に関してのベストプラクティスは,別記事にまとめたいと思います.