💬
WSL2+Docker構成でWindowsのVSCodeから直接ファイルを編集操作する
課題とやりたいこと
Dockerコンテナ内で作成されるファイル（例：create-react-appして作成したファイルなど）は、デフォルトではroot権限でファイルが作成されます。（-rw-r--r-- 1 root rootのようになります。）
※プロジェクトフォルダは、WSL側のディレクトリ（例/home/[ユーザ名]/配下）に存在することを前提とします。
一方で通常、WSL2はroot以外の権限のユーザ（ディストリビューションをインストールしたときに設定したユーザ）で動作するため、WSL2上のOSのコンソール上でのユーザはsudoしないと編集・実行権限がない状態になり、Permission deniedになります。
また、Windowsから、VSCode等で編集しようとした場合、上記のroot以外の権限のユーザが使用され、同じく編集権限がない状態Permission deniedになります。
これは、開発作業上問題があり、都度chmodするのもよろしくと思われるため、Windows上のVSCodeなどからコンテナと同様の権限で、直接ファイルを編集できるようにする必要があります。
解決方法
コンテナ内で作成したファイルをエディタで編集する場合、VSCodeプラグインのRemote-Containersを用いて、WSL2→VSCode用のコンテナ→対象フォルダの経路で接続し、root権限で動作するように設定することで対応できます。
手順
- ソースコードが格納されている対象のフォルダの権限が
rootになっている場合、一般ユーザ権限に変更しておきます（VSCodeから操作したい対象フォルダそのもののみでOKです）。sampleというフォルダの権限を変更する場合、sudo chown username:username sampleのような形で変更できます。 - VSCodeを起動し
Remote Developmentというエクステンションパックをインストールする。 - VSCodeのスタータスバーの左下にある緑のアイテムをクリックし、
Open Folder in WSLを選択し、WSL内の対象のプロジェクトフォルダを選択する。（WSL側（Linux側）からファイルを開きます） - VSCodeのスタータスバーの左下にある緑のアイテムをクリックし、
ReOpen in Containerを選択する。 - 下に追加の選択メニューが表示されるので、
From a predefined container configuration definitionを選択する。 - 下に追加の選択メニューが表示されどのコンテナを使用するか聞かれるので、任意のものを選択する。（rootユーザで接続したいだけなので、どれでも問題ないと思われれる。軽量のalpineを選択してみました）
- vscodeのプロジェクト直下に
.devcontainerというディレクトリがつくられ、devcontainer.jsonとDockerfileが作成されるので、devcontainer.jsonを開いて、user設定がデフォルトはvscodeとなっているので、rootに変更する。 - VSCodeのスタータスバーの左下にある緑のアイテムから
Rebuild Containerを選択して設定を反映させる。
以降はVSCodeで、次のいずれかの方法で接続することで、コンテナに接続できます。
パターン1
- WSL側コンソールから対象フォルダでコマンド
code .でVSCodeを起動する。 - VSCodeのスタータスバーの左下にある緑のアイテムをクリックし、
ReOpen in Containerを選択してコンテナに接続する。
パターン2
- VSCodeをWindows側から起動した状態で、
Open Folder in WSLで対象フォルダに接続する。 - VSCodeのスタータスバーの左下にある緑のアイテムをクリックし、
ReOpen in Containerを選択してコンテナに接続する
所感
- WSL2はまだまだ発展途上（過渡期）のように思います。随時アップデートされていくと思いますので、徐々に利便性が上がっていくのではないかと思います。
- WSL2を使用するときは、各操作をWindowsとLinuxのどちら側から実行しているのかをよく意識しないと、問題にぶつかったときに解消に時間を要してしまいそうですので気をつけたいところです。
Discussion