【VSCode】WSL2を利用したコンテナ開発での権限問題を解決する【Remote Containers】

dockerで開発するときにwsl2上にあるファイルをmountしている場合、コンテナ内で作成したファイルをwsl2側で編集しようとすると「Permission denied」になります。大体の場合コンテナ内では``root``ユーザーで操作され、wsl側では``root``以外のユーザーで操作されているはずなので、コンテナ内で作成されたファイルに対しては``root``以外のユーザーには書き込みの権限がありません。

```bash
// wsl側で見た場合
$ ls -l test.txt
-rw-r--r-- 1 root root 0 May  2 13:37 test.txt

// コンテナ側から見た場合
# ls -l test.txt
-rw-r--r-- 1 root root 0 May  2 04:37 test.txt
```

コンテナ内で作成したファイルをwsl側で編集できるように毎回権限を変えるのもあれなので、この問題を解決するために、VSCodeの[Remote - Containers](https://code.visualstudio.com/docs/remote/remote-overview)を使います。wsl側のファイルをコンテナに取り込み、vscodeで``root``ユーザーで編集できるようにします。

## 拡張機能をインストール

Remote Containersを単独でインストールしてもいいですが、[Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)というエクステンションパックがおすすめです。これには、Remote - ContainersだけでなくRemote - SSHとRemote - WSLが追加で含まれておりvscodeでのリモート開発を便利にしてくれます。

## セットアップ

拡張機能がインストールできたら、vscodeのスタータスバーの左下にある緑のアイテムをクリックします。
![スクリーンショット 2021-05-02 140659.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/53e54e94-fca1-54bb-e141-bca704163634.png)
[**Remote-Containers: ReOpen in Container...**]を選択します。
![スクリーンショット 2021-05-02 141209.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/3f3d9355-c2ca-d36c-6170-c1da5a2f6655.png)
[**From a predefined container configuration definition..**]を選択します。
![スクリーンショット 2021-05-02 141151.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/5c77a9a0-46a7-f6bc-84bb-7e23e9743779.png)
すると、どのコンテナで起動するかを選べるのでお好みのコンテナを選択します。
![スクリーンショット 2021-05-02 141819.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/dd63ebef-b25e-0edb-d2ea-4b669083d1ce.png)
コンテナを選択すると、vscodeのプロジェクト直下に``.devcontainer``というディレクトリがつくられ、``devcontainer.json``と``Dockerfile``が作成されています。``devcontainer.json``にはコンテナの設定が記述されています。デフォルトだとuserが``vscode``になっているので、こちらをコメントアウトするか``root``に書き換えます。

```json-doc:devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.166.1/containers/debian
{
	"name": "Debian",
	"build": {
		"dockerfile": "Dockerfile",
		// Update 'VARIANT' to pick an Debian version: buster, stretch
		"args": { "VARIANT": "buster" }
	},

	// Set *default* container specific settings.json values on container create.
	"settings": { 
		"terminal.integrated.shell.linux": "/bin/bash"
	},

	// Add the IDs of extensions you want installed when the container is created.
	"extensions": [],

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Uncomment to use the Docker CLI from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker.
	// "mounts": [ "source=/var/run/docker.sock,target=/var/run/docker.sock,type=bind" ],

	// Uncomment when using a ptrace-based debugger like C++, Go, and Rust
	// "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ],

	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
	"remoteUser": "root"
}
```
設定はこれだけなので、コンテナをrebuildして設定を反映させます。rebuildするにはステータスバーの左下の緑のアイテムをクリックし[**Remote-Containers: Rebuild Container**]を選択します。
``ctrl + shift + @``でターミナルを起動すると、このコンテナのシェルに接続できます。``whoami``と入力すると``root``ユーザーで実行できていることが分かります。
![スクリーンショット 2021-05-02 143614.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/687a1b27-63e0-bbb7-ba80-f905212128f6.png)
これでwslのファイルをマウントさせたコンテナ内で作成したファイルに対して、vscodeで編集できるようになりました。