WSL2+VSCode+Docker Desktop

windows10とVSCodeでWindows上のフォルダで作業をしながらDockerを利用したデバッグ開発ができるようになったので設定までの流れを書き留めます。
windowsの環境を開発ツールのインストールで汚すことがなくなりスッキリし、ワークフォルダ毎に開発環境を切り替えることができるようになります。



# WSL2を使用するためWindows10 2004にアップグレード (既にWindows10 2004の場合はスキップ)

https://www.microsoft.com/ja-jp/software-download/windows10

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641711/9f6b78a1-d283-6b50-8faa-ddf1bcf8b0cc.png)


# Linuxカーネルを更新する

https://docs.microsoft.com/ja-jp/windows/wsl/wsl2-kernel



# PowerShellを開いて既存のディストリビューションをWSL2に設定

とりあえず既にインストールされているLinuxのディストリビューションをWSL2に設定します

確認

```shell
wsl --list --verbose
```

変更

```shell
wsl -set-version Ubuntu*** 2
```

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641711/ecfbaf07-42f7-6684-d740-a8ac8f62e85e.png)


# Docker DesktopをWSL2 base engineに設定　(Docker Desktopが入ってなければインストール)

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641711/bdc8f076-87f3-9533-7980-9b0ccbc7ffce.png)


# VSCodeのエクステンションで"Remote Development"をインストールする。(Remote WSL, Remote Containers, Remote SSHのパック)

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641711/794b7639-bc33-1bb4-d508-3e04081755fc.png)


# VSCodeのコンテナの設定ファイル (.devcontainer/devcontainer.json)

デバッグ環境イメージのDockerファイルの指定とコンテナからlocalhostへ通すポートの指定を行う

- "dockerFile"で開発環境のDockerイメージを指定したDockerfile
- "forwardPorts"でローカルへのポートフォワード指定

下の例ではコンテナへlocalhost:80でアクセスできるようになります


```json
	// For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
	// https://github.com/microsoft/vscode-dev-containers/tree/v0.122.1/containers/docker-existing-dockerfile
	{
	    "name": "Existing Dockerfile",
	    // Sets the run context to one level up instead of the .devcontainer folder.
	    "context": "..",
	    // Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
	    "dockerFile": "../remotedev/Dockerfile",
	    // Set *default* container specific settings.json values on container create.
	    "settings": { 
	        "terminal.integrated.shell.linux": null
	    },
	    // 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": [80]
	    // Uncomment the next line to run commands after the container is created - for example installing curl.
	    // "postCreateCommand": "apt-get update && apt-get install -y curl",
	    // Uncomment when using a ptrace-based debugger like C++, Go, and Rust
	    // "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined" ],
	    // 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 to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
	    // "remoteUser": "vscode"
}
```


# VSCode起動設定 (.vscode/launch.json)

```json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "go",
            "request": "launch",
            "mode": "auto",
            "program": "${workspaceRoot}",
            "env": {
            },
            "args": [],
            "buildFlags": "-tags=debug",
            "args": [],
            "showLog": true
        },
        {
            "name": "Remote",
            "type": "go",
            "request": "launch",
            "mode": "remote",
            "remotePath": "/go/src/app", 
            "program": "${workspaceRoot}",
            "env": {
            },
            "args": [],
            "buildFlags": "-tags=debug",
            "showLog": true
        }        
    ]
}

```

ワークフォルダ/remotedev/Dockerfile (下のイメージはプライベートなDockerイメージのため存在しません)

```
FROM golang-aws-alpine:1.13-devel
```

プライベート環境にDockerレジストリがあれば開発環境をライブラリ化していくことができるようになり便利です。


# VSCodeのリモートエクスプローラーでコンテナを起動する

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641711/62483462-16cb-eccf-08bd-07b77d43044f.png)


# コンテナ側のgoエクステンションを有効にする

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641711/468c11ad-b724-51d6-001e-1e4ddf1dabe9.png)