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 権限で動作するように設定することで対応できます。

手順

1. ソースコードが格納されている対象のフォルダの権限がrootになっている場合、一般ユーザ権限に変更しておきます（VSCode から操作したい対象フォルダそのもののみで OK です）。sampleというフォルダの権限を変更する場合、sudo chown username:username sampleのような形で変更できます。
2. VSCode を起動しRemote Developmentというエクステンションパックをインストールする。
3. VSCode のスタータスバーの左下にある緑のアイテムをクリックし、Open Folder in WSLを選択し、WSL 内の対象のプロジェクトフォルダを選択する。（WSL 側（Linux 側）からファイルを開きます）
4. VSCode のスタータスバーの左下にある緑のアイテムをクリックし、ReOpen in Containerを選択する。
5. 下に追加の選択メニューが表示されるので、From a predefined container configuration definitionを選択する。
6. 下に追加の選択メニューが表示されどのコンテナを使用するか聞かれるので、任意のものを選択する。（root ユーザで接続したいだけなので、どれでも問題ないと思われれる。軽量の alpine を選択してみました）
7. vscode のプロジェクト直下に.devcontainerというディレクトリがつくられ、devcontainer.jsonとDockerfileが作成されるので、devcontainer.jsonを開いて、user設定がデフォルトはvscodeとなっているので、rootに変更する。
8. VSCode のスタータスバーの左下にある緑のアイテムからRebuild Containerを選択して設定を反映させる。

以降は VSCode で、次のいずれかの方法で接続することで、コンテナに接続できます。

パターン 1

1. WSL 側コンソールから対象フォルダでコマンドcode .で VSCode を起動する。
2. VSCode のスタータスバーの左下にある緑のアイテムをクリックし、ReOpen in Containerを選択してコンテナに接続する。

パターン 2

1. VSCode を Windows 側から起動した状態で、Open Folder in WSLで対象フォルダに接続する。
2. VSCode のスタータスバーの左下にある緑のアイテムをクリックし、ReOpen in Containerを選択してコンテナに接続する

VSCode を Windows 側から起動した状態で、Open Folder in ContainerやReOpen in Containerを直接しようとすると、エラーになります。
コンテナ接続する際には、VSCode が WSL に接続されている状態で、接続する必要があります。
現時点としては、Windows→WSL→コンテナの順で接続する必要があるようです。

ReOpenというのは今開いているフォルダを、WSL やコンテナに接続してから再度開きなおす。という意味になります。

VPN を接続している状態で、WSL 上でcode .を実行すると、初期セットアップ処理がうまく動かない場合があるようです。VPN を切断して実行するとうまくいきます。

VSCode の Docker プラグイン（Lint 等が動く）が WSL 上だと、エクステンションのインストール方法によってうまく有効化されていない場合があるようです。VSCode エクステンションの Docker 設定から WSL に関する機能を導入すると動くようになります。

git 運用の場合、.devcontainerフォルダを.gitignoreに追加しておきます。

所感

• WSL2 はまだまだ発展途上（過渡期）のように思います。随時アップデートされていくと思いますので、徐々に利便性が上がっていくのではないかと思います。
• WSL2 を使用するときは、各操作を Windows と Linux のどちら側から実行しているのかをよく意識しないと、問題にぶつかったときに解消に時間を要してしまいそうですので気をつけたいところです。