🎉

windows + wsl2 + dockerでgit + vscode devcontainerの仮想開発環境を整える

2023/02/28に公開

Docker

要約

windows + wsl2 + dockerを導入すると、vscodeでdevcontainerが使えるよ
windowsのフォルダにあるファイルは変更の通知をdocker側で取得できないので、Hot reloadなどが効かないよ
wsl2上にあるファイルならファイル変更の通知をdockerで受け取れるようになるよ
wsl2でgit cloneしたレポジトリをdevcontainerで立ち上げ直せば快適！

導入

windows + wsl2 + dockerの準備

この資料などを参考に、準備してください。

インストールするディストリビューションは、一応 Ubuntu 22.04 LTSを想定していますが、好きなものを使用してください。

wsl2上でのvscode, gitの導入

この資料などを参考に導入してください。

これにより、ubuntu上でcode .と入力することでvscodeが立ち上がるようになるはずです。

devcontainerの導入

ここまでで環境はほとんど整いました。あとはdevcontainer拡張機能を入れれば動作します。

この資料などを参考に導入してください。

git(とgithub)が使えるようにする

この資料などを参考に、使えるように設定してください。

作業はwsl2で起動したlinuxの中で行います。

githubを使うことを想定しているので、他を使いたい場合は適宜そちらで必要な作業を確認してください。

また、ここで、ディストリビューション上で以下の設定をしておきます。

git config --global user.email "your email@adress.com"
git config --global user.name "your name"

この設定によりつくられた.gitconfigは、devcontainer上でも引き継がれます。

keychainの導入

このままだと、起動のたびにssh-agentを立ち上げる必要があり、手間です。

そこで、keychainを導入します。

まず、keychainをディストリビューションにインストールします。

sudo apt-get install keychain

次に、viやnanoなどで~/.bashrcを開き、以下を追記します。

~/.bashrc

# For Loading the SSH key
/usr/bin/keychain -q --nogui $HOME/.ssh/id_ed25519
source $HOME/.keychain/$(hostname)-sh

id_ed25519は自分が作成したssh keyのファイル名を使ってください。（githubの記事のとおりにやっていればこの名前のはずです）

参考：https://zenn.dev/kaityo256/articles/ssh_agent_on_wsl

再起動

ここまで出来たら、WSLとdocker desktopを再起動します。

ＰＣを再起動しても大丈夫ですし、PowerShellでwsl --shutdownするなどしてもよいです。

注意点

ここまででvscode + devcontainerでの開発は実現できるはずですが、注意点があります。

（厳密には、ここまでやらなくても実現可能ですが、後半は注意点の克服のために必要な作業になります）

普通にやると起きる問題

windows上のファイルをそのままdevcontainerで起動するパターンについて、ホットリロードやvscode上のgitの差分検知などが動作しないという問題が起こりえます。

理屈としては以下です。（保証はできません）

dockerは内部的にwsl2を使用しているため、実際にはwsl2を経由してこれらのファイルを参照することになります。

このとき、linuxのファイル変更通知システムであるinotifyがwindows上のファイルから伝搬せず、ファイルを監視して自動で動作するタイプのシステムがうまく機能しなくなるようです。

参考：https://stackoverflow.com/questions/70273307/how-to-turn-on-inotify-in-wsl2

解決

この問題は、wsl2上に配置したファイルからdevcontainerを開くことで解決します。

具体的には、例えば以下のような手順で開発環境を立ち上げることで、うまくいくはずです。

docker desktopのSettings -> Resources -> WSL Integrationから、自分が使用するディストリビューションのtoggleボタンをクリックしてONにする

wsl2のlinuxディストリビューションを立ち上げる
wsl2上でgit cloneする
cloneしたプロジェクトフォルダに入りcode .を実行
起動したvscode上で左下の緑のエリアを押してReopen in Containerを選択

これでホットリロード可能な状態で起動できるはずです。

それ以外の方法

２回目以降はvscodeの履歴からでも立ち上げられます。

以下の記事を参照すればwindows上から直接wsl2のフォルダを見ることもできるので、お好きな方法でどうぞ。

参考：https://bootcamp.fjord.jp/articles/29

重要なのは、ファイルがwsl2上にあることで、立ち上げ方は問わないはずです。

最後に

間違った説明やバージョンの違いなどによるエラーがありましたら、コメントを頂けると幸いです。

外部の参考資料に多々依存しているため、リンク切れなどもご指摘お願いします。

要約

導入