WSL＋Docker for Windows環境を構築する

Windows HomeでWSL2＋Docker for Windows環境を作ってみたいと思います。

※事前にWindowsUpdateで最新の状態にしておきます

# WSL2のインストール

参考：https://docs.microsoft.com/ja-jp/windows/wsl/install-win10

- Powershellを管理者権限で起動し、以下を実行します

```shell
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```

※ここまでで一旦PCの再起動をします

- <font color="red">wsl_update_x64.msiをダウンロードし、インストール</font>
  - これ忘れると後述のUbuntu起動時に`WslRegisterDistribution failed with error: 0x800701bc`エラーが発生します
- 再度Powershellを開き、以下のコマンドを実行

```shell
wsl --set-default-version 2
```

### Ubuntuのインストール

[MicrosoftStore](https://aka.ms/wslstore)からUbuntuをインストールします。
※UbuntuなしでもDocker for Windowsは動かせますが、かなり動作が遅いのでちゃんとLinuxディストリビューションを入れることをおすすめします


※PCによってはBIOSの設定で仮想化を有効にしないといけない場合があります
　自分はHPのPCを使ってますが、BIOSの設定が必要でした。


- ディストリビューションが実行されるWSLバージョンを確認します
  - UbuntuのVERSIONが2になっていればOKです  

```shell
$ wsl --list --verbose
  NAME      STATE           VERSION
* Ubuntu    Running         2
```

もしVERSIONが1となっている場合は以下のコマンドを実行します

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

これでWSL2の準備はOKです！！！！


# Docker for Windowsのインストール

参考：https://docs.docker.jp/docker-for-windows/install-windows-home.html

- [DockerHub](https://hub.docker.com/editions/community/docker-ce-desktop-windows/)からインストーラーをダウンロードし、インストールします
- インストールが完了したらPCを再起動します


# Ubuntuでdockerコマンドが使えるか確認

WSL2とDocker for Windowsが正しく連携できていればUbuntuでdockerおよびdocker-composeコマンドが使えるようになるので、確認します

```shell
$ docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
b8dfde127a29: Pull complete
Digest: sha256:df5f5184104426b65967e016ff2ac0bfcd44ad7899ca3bbcf8e44e4461491a9e
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/
```

このように実行できれば成功です！！！



# 補足

### コードはUbuntu側に置こう

開発する際のコードはUbuntu内に置くようにしましょう。
Windows側にコードを置いてしまうと、WSL2とのファイルの同期に時間がかかりDockerが激重になります。
なので、ubuntuの/mnt/c（Windows側のCドライブと連動しているディレクトリ）以外の場所に置くようにします。

### Windows側からUbuntuのファイルを参照したい場合

エクスプローラーで`\\wsl$`と打つとWSLの各ディストリビュート内のディレクトリを直接参照することができます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/bfb8a5c3-1fa1-78ef-0f2b-943d874c457f.png)

### VS CodeでUbuntu内にあるコードをいじる

- 拡張機能の`Remote - WSL（ms-vscode-remote.remote-wsl）`をインストールします
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/46164f36-bc74-d34c-da4d-566cfc1860b2.png)

- 拡張機能のインストールが完了するとサイドメニューにRemote接続用のメニューが追加されます
- Ubuntuを選択します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/d6087da3-6ec9-157a-3db7-8aafd5f0f5ee.png)


- 以下のように左下に`WSL: Ubuntu`と表示され、接続できたことが分かります。
    - ここから任意のディレクトリを開くことで編集できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/c53c7776-7bb7-3ab1-72c8-21968c4f031c.png)


もう一つの方法として、`code`コマンドを使う方法があります。
Ubuntu内の編集対象のプロジェクトに移動して`code .`を実行すると、そのディレクトリでVS Codeが立ち上がります

```shell
~/todo-nuxt-nest/packages/front$ code .
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/c7fe9a2b-35a4-d1d5-a507-3c5b4e466d1e.png)

最初からWSLに接続した状態でVS Codeが起動していることが分かります

※以前に作成したプロジェクトをGit cloneして動確してます

https://qiita.com/teracy55/items/56829acf7d362725c042