More than 1 year has passed since last update.

【All In One】DevContainers+WSL2で開発環境整備

Last updated at 2023-09-15Posted at 2023-09-13

この記事の目的

Dev Containersを利用した記事は多いが環境切り替えを前提としているものが多い。また特にディスク周りのパフォーマンスが気になり一部退避するなどの設定が煩わしい。
以前からWSL2+Ubuntu内でコンテナ開発を行っていた際にはパフォーマンスは問題ないと感じていた。
そこでDev Containersに同様のパターンを適用したところ想定通りの環境構築に成功した。

今回のパターンの記事は見かけないため、その手順を記載させていただきました。

など、非常に魅力的な機能が満載です。
その一方でDocker DesktopやRancher Desktopなどを利用する記事が多いため、そのまま適用するとDockerのバインドマウントでのパフォーマンスの悪さが気になってしまうのではないかと思いました。

WSL2+Ubuntu上でDev Containersを構築することで、バインドマウント先をWSL2のUbuntu上のファイルシステムとすることでパフォーマンス問題を回避させる。
そのため、個別に特定フォルダをvolumeに退避する必要がなく実行できる。
また、その場合には拡張機能でWSLへ接続後にDev Containersに接続するという2段階の手順が必要になるが、その手間も回避できる。

というものです。

PowerShell

wsl --install Ubuntu-22.04

また、Ubuntuのデフォルトユーザはrootとした。
- 賛否両論あるかと思うが、dockerコンテナ内でファイルを作成すると、ホスト側のユーザはrootとなってしまうため、最初からホスト側もrootとした。
- 共有PCとかだと厳しい設定かもしれないが、開発者が扱うPCであれば問題ないと判断した。
- また、エクスプローラーからアクセスする際のユーザもrootとなるため、コンテナ内で編集したファイルも直接扱える。

PowerShell

ubuntu2204 config --default-user root

ubuntu

mkdir ~/workspaces
cd ~/workspaces

作業フォルダの中に.devcontainerフォルダを作成する。
- このフォルダ内にdevcontainer.jsonを作成することで、VSCodeの拡張機能であるDev Containersが認識する。

ubuntu

mkdir .devcontainer

devcontainer.json

{
  "name": "dev",
  "image": "debian:latest"
}

ubuntu

code .

VSCodeが起動し、Dev Containersの拡張機能がインストールされていれば、右下にReopen in Containerというボタンが表示されるので、そのボタンを押下する。
- コマンドパレットからDev Containers: Reopen in Containerでも可。
すると、VSCodeが再起動し、devcontainer.jsonの内容に従って（初回は時間がかかるが）コンテナが起動する。
なお、Windows上のVSCodeのアイコンを右クリックすると、フォルダの履歴が表示されてピン止めできるので、次回からはそこから起動すると一発でDev Containersまで接続できて便利。

Dev Containersではfeaturesなどで必要な機能を追加することができるが、こちらのベースイメージを利用することで、その手間を省くことができる。
- 最終的にはfeaturesに書けるように分離したいとは思っているが、利便性とのトレードオフかと思う。
- とにかく細かいプロジェクトを同時並行的に扱うため、VSCodeでの環境の切り替えではなく必要なものを一つのコンテナにまとめている。
- そのため、ベースイメージには多くの開発ツールが入っている。
一旦、こちらにはdevcontainer.jsonに拡張機能まで設定したものもありますので、参考までにどうぞ。

パフォーマンスについては測定しておりません。（申し訳ございません。）
- ですがファイルをWindowsまで持っていくよりも段違いで速いです。
- また、個別のvolumeを作成するとpnpmを利用している場合には、ボリュームが違うと怒られてしまってpnpmの本来のメリットが活かせない事情もあります。
なお、紹介しているdevenvironのベースイメージはオープンソースで開発を行っております。
- そのため、不具合や改善点などありましたら、IssueやPRなどお気軽にお願いします。
- また、この記事の内容についても、不明点や改善点などありましたら、コメントなどお気軽にお願いします。