WSL2 で Docker + NestJS + Angular な環境を動かす

## はじめに

ほぼタイトルの通りでが、若干タイトル詐欺なところがあってAngularだけDockerにのってません。

もともとMac OSで構築した環境ですが自宅の環境がWindows 10なので、自宅でも開発できるようにしたくてやりました。せっかくなので今話題のWSL2で構築してみました。

リポジトリは[こちら](https://github.com/tsubasa66739/Angular-Nest)。

## 注意点

あらかじめWSL2の従来版（WSL）のUbuntu 18.04を導入しておく必要があります。[こちら](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)が参考になると思います。

WSL2は現時点（2019/12/21 現在）ではインサイダー版（Windows 10ビルド 18917以降）をインストールする必要があります。
WSL2を試したい人は「Windows 10の発展に協力するぜ！」という方のみお試しいただければと思います。

## WSL2を導入

### Windows Insider Program の有効化と Windows Update 実施

執筆時点では実施済みのため公式任せ。詳細な手順は[こちら](https://insider.windows.com/ja-jp/getting-started/)。

大まかな手順は次の通り。

- Windows Insider Program への登録
- Widnows Update 実施 && OS再起動

### WSL2を有効化

詳細な手順は[こちら](https://docs.microsoft.com/ja-jp/windows/wsl/wsl2-install)。

PowerShellを**管理者として実行**、次のコマンドを実行しWindows Subsystem for Linux と仮想マシンプラットフォームのコンポーネントをインストールします。（たぶん気づくと思いますが、管理者として実行しないと怒られます。）

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

次のコマンドでディストリビューションを設定します。`Ubuntu`は自身の環境に合わせて置き換える必要があります。不安な人は`wsl -l -v`で確認してみましょう。
しばらく時間がかかるので、ビールでも飲みながら待機します。

```bash
wsl --set-version Ubuntu 2
```

Optionalですが、せっかくなのでWSL2をデフォルトにしておきましょう。

```bash
wsl --set-default-version 2
```

`wsl -d Ubuntu`で起動できればOK。

## WSL2（Ubuntu 18.04）に Docker をインストール

WSL2のDocker Desktopは現時点（2019/12/31）でWindows 10 Proでしか利用できないので、普通のUbuntu版のDocker Engineをインストールします。自宅のはWindows 10 Homeなんです。

### Docker Engine インストール

詳細な手順は[こちら](https://docs.docker.com/compose/install/)。

PowerShellからWSL2を起動します。
公式に沿っていろいろやります。

```bash
sudo apt-get update
sudo apt-get install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg-agent \
    software-properties-common
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo apt-key fingerprint 0EBFCD88
sudo add-apt-repository \
   "deb [arch=amd64] https://download.docker.com/linux/ubuntu \
   $(lsb_release -cs) \
   stable"
```

確認。

```bash
$ docker --version
Docker version 19.03.5, build 633a0ea838
```

### Docker Compose インストール

```bash
sudo curl -L "https://github.com/docker/compose/releases/download/1.25.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

# 実行権限付与
sudo chmod +x /usr/local/bin/docker-compose
```

確認。

```bash
$ docker-compose --version
docker-compose version 1.25.0, build 0a186604
```

## git clone && docker-compose up

### git clone

サンプルコードを持ってきます。

```bash
cd ~
mkdir angular-nest
git clone https://github.com/tsubasa66739/Angular-Nest.git angular-nest
cd angular-nest
```

### Docker Compose で起動

ここで`docker-compose build`したら権限で怒られたので、いつも使うユーザを`docker`グループに追加。

```bash
sudo usermod -aG docker $USER
```

今度こそ。

```bash
$ docker-compose build
db uses an image, skipping
Building api
...

$ docker-compose up
13:58:10 - Starting compilation in watch mode...
api_1  |
...
api_1  | [Nest] 29   - 2019-12-31 13:58:15   [RoutesResolver] BlogController {/api/blog}: +1ms
api_1  | [Nest] 29   - 2019-12-31 13:58:15   [RouterExplorer] Mapped {/, POST} route +2ms
api_1  | [Nest] 29   - 2019-12-31 13:58:15   [RouterExplorer] Mapped {/, GET} route +1ms
api_1  | [Nest] 29   - 2019-12-31 13:58:15   [NestApplication] Nest application successfully started +5ms
```

もう1個PowerShell起動して確認。

```bash
$ curl localhost:3000/api/
Hello NestJS with Docker on WSL 2 !!!!!!!!!.
```

できた！

### Angular 起動

AngularはDockerに乗せてないんですすいません。

もう1個PowerShellを起動。

```bash
$ cd ~/angular-nest/web/
$ npm run start

> client@0.0.0 start /home/tsubasa/lab/angular-nest/web
...
Date: 2019-12-31T12:05:16.950Z - Hash: 47f41a71f3ba6629836a - Time: 8465ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.
```

`localhost:4200`にアクセス。

![angular-nest-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457543/3d22ae0c-66eb-aa19-9195-37f866d39ead.png)

できたー！


## おわり

Windows Updateにすごく時間がかかりますね。そりゃそうか。
それが完了すれば意外とすんなり動いてくれました。まだ必要な手順あったかな...ばーっと構築してばーっと記事書いてるのでもう覚えてません。localhostでWSL2の接続に何か設定が必要とか、Docker常時起動設定とかあった気がするけどまあいいか。

まだ導入したばかりなのでこれからいろいろ試してるうちに問題があるかもしれませんが、しばらくはお試し版ということで。（その時はまた書くかもしれませんし、書かないかもしれません。）

## 参考

- 登録、インストール、参加 | Windows Insider Program - https://insider.windows.com/ja-jp/getting-started/
- WSL 2 のインストール | Microsoft Docs - https://docs.microsoft.com/ja-jp/windows/wsl/wsl2-install
- Install Docker Compose | Docker Documentation - https://docs.docker.com/compose/install/
- Get Docker Engine - Community for Ubuntu | Docker Documentation - https://docs.docker.com/install/linux/docker-ce/ubuntu/