前置き
この記事はQiita Advent Calendar 2025 / ひとりアドベントカレンダー 分野における ふぐおの配信関係多めひとり Advent Calendar 2025 の19日目記事となります。
はじめに
こんにちは! プログラミング配信をしているふぐおです。
Dockerコンテナ内で何かする際に、今あるDockerfileにGUIとVNCを入れるコードを書くのは地味に面倒な作業です。
この手間をかけずに簡単にGUI環境を構築する方法を書きます。
やり方
GUI環境を作る前の状態
docker-compose.ymlだけの状態とします。
今回のdocker-compose.ymlは以下の状態です。
services:
minimum_devcontainer:
image: ubuntu:latest
わかりやすくするために、最小の状態にしましたが、本来ならmountするディレクトリとかを指定すると思います。
.devcontainerディレクトリにdocker-compose.ymlを移動させる
.devcontainerディレクトリ以下にdocker-compose.ymlを移動させます。
Dockerfileがある場合も同様に.devcontainer以下に入れると良いと思います。
devcontainer.jsonを書く
.devcontainer以下にdevcontainer.jsonを書きます。
{
"name": "minimum_devcontainer",
"dockerComposeFile": "docker-compose.yml",
"service": "minimum_devcontainer",
"features": {
"ghcr.io/devcontainers/features/desktop-lite:1": {
"webPort": "6080"
}
}
}
docker-compose.ymlを編集する
docker-compose.ymlも編集します。
services:
minimum_devcontainer:
image: ubuntu:latest
tty: true
ports:
- "6080:6080"
volumes:
- ..:/workspace
portsを指定します。
tty:trueにすることで、コンテナが起動後に落ちないようにします。
volumesに現在のディレクトリを/workspaceにマウントしています。
devcontainerを使用する際は/workspaceというディレクトリをコンテナ内に作成する必要があります。(何も指定しない場合は)
コンテナを開く
VSCodeがインストールされている場合.devcontainerディレクトリの一つ上のディレクトリでVSCodeを開くと、自動で設定ファイルが認識され、次のようなポップアップが出現します。
ここでコンテナで再度開くをクリックするだけです。
VSCodeがない環境の場合
もし、VSCodeがない環境の場合はdevcontainer-cliをインストールする必要があります。
https://github.com/devcontainers/cli
インストール後、以下のコマンドを入力します。
devcontainer up --workspace-folder ./
指定したポートにブラウザからアクセス
先程指定したポートにWebブラウザでアクセスします。
今回の例だと6080なので、localhost:6080にアクセスします。
VNC経由でデスクトップにアクセスできました。
devcontainerの仕組み
devcontainer.jsonの以下の部分が今回のミソです。
"features": {
"ghcr.io/devcontainers/features/desktop-lite:1": {
"webPort": "6080"
}
}
これは拡張機能的なもので、desktop環境とVNCをあとから入れられるものです。
内部でシェルスクリプトが走っています。このシェルスクリプトをDockerfileとかにコピペしてもいいんですが、環境による差分を吸収できるようにdevcontainerが様々な環境変数を提供しています。
よって、普通にDockerfileを書くより調整がいらないというわけです。