windows vscode の Dev Container で PlantUML を使う

やりたいこと

windowsでPlantUMLの環境構築

やること

1. wsl環境をつくる
2. docker環境をつくる
3. vscodeのDev Container環境をつくる

手順

wsl環境をつくる

wsl用のubuntuイメージをとってくる

wsl --import ubuntu_env %HOMEDRIVE%\wsl\env\ubuntu_env %HOMEDRIVE%\wsl\ubuntu-noble-wsl-amd64-24.04lts.rootfs.tar.gz

インポートできているか確認

wsl -l -v
# -l [--list] -> インストール済みのディストリビューション一覧を表示
# -v [--verbose] -> ディストリビューションの詳細情報を表示

起動

wsl -d ubuntu_env
# -d [--distribution] -> 指定したディストリビューションを起動

ユーザ追加

useradd -m -s $SHELL env_user
passwd env_user
usermod -G sudo env_user
# -m [--create-home] -> ユーザのホームディレクトリを作成
# -s [--shell] -> ログインシェルの指定
# -G [--groups] -> 所属グループを変更

デフォルトユーザの登録

cat << EOF > /etc/wsl.conf
[user]
default=env_user
[interop]
appendWindowsPath=false
EOF

仮想環境再起動

exit
wsl -t ubuntu_env
wsl -d ubuntu_env
# -t [--terminate] -> 指定したディストリビューションを終了

wslから使いたいwindows側のpathを追加

echo 'cd ~' >> ~/.bashrc

USERNAME=$(/mnt/c/Windows/system32/cmd.exe /c echo %USERNAME% | tr -d '\r')
echo export PATH=\$PATH:/mnt/c/Windows/ >> ~/.bashrc
echo export PATH=\$PATH:\"/mnt/c/Users/$USERNAME/AppData/Local/Programs/Microsoft VS Code/bin\" >> ~/.bashrc

シェルを再起動

exec $SHELL -l

docker環境をつくる

sudo apt update && sudo apt upgrade -y

dockerのインストール手順のコマンドをひたすらコピペ実行

for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done

# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "${UBUNTU_CODENAME:-$VERSION_CODENAME}") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

hello world確認

sudo docker run hello-world

sudoなしでdocker実行できるように権限をつける

sudo usermod -aG docker env_user
# -aG [--append] -> 既存のグループを維持しながら新しいグループを追加

vscodeのDev Container環境をつくる

シンボリックリンクを作成（PlantUMLのソースコードはwindows側に置きたい）

ln -s /mnt/c/workspace/ workspace

リンク確認

ls -al

workspaceフォルダに移動してPlantUML作業用フォルダを作成

cd workspace
mkdir plantuml
cd plantuml

PlantUML作業用フォルダでvscode起動

code .

拡張機能をインストール

Remote Developmentだったら上の2つとも入っているのかも

This Remote Development extension pack includes four extensions:

Remote - SSH - Work with source code in any location by opening folders on a remote machine/VM using SSH. Supports x86_64, ARMv7l (AArch32), and ARMv8l (AArch64) glibc-based Linux, Windows 10/Server (1803+), and macOS 10.14+ (Mojave) SSH hosts.
Remote - Tunnels - Work with source code in any location by opening folders on a remote machine/VM using a VS Code Tunnel (rather than SSH).
Dev Containers - Work with a separate toolchain or container based application by opening any folder mounted into or inside a container.
WSL - Get a Linux-powered development experience from the comfort of Windows by opening any folder in the Windows Subsystem for Linux.

[ctrl] + [shift] + [p] でコマンドパレットを開く

1. Reopen in Container
2. Plantuml DevContainer
3. 設定のこだわりがなければ [OK] 表示されるまでenter連打
4. ビルドが終われば環境構築終了

参考