はじめに

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

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

リポジトリはこちら。

注意点

あらかじめWSL2の従来版（WSL）のUbuntu 18.04を導入しておく必要があります。こちらが参考になると思います。

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

WSL2を導入

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

執筆時点では実施済みのため公式任せ。詳細な手順はこちら。

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

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

WSL2を有効化

詳細な手順はこちら。

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

> 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で確認してみましょう。
しばらく時間がかかるので、ビールでも飲みながら待機します。

wsl --set-version Ubuntu 2

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

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 インストール

詳細な手順はこちら。

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

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"

確認。

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

Docker Compose インストール

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

確認。

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

git clone && docker-compose up

git clone

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

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

Docker Compose で起動

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

sudo usermod -aG docker $USER

今度こそ。

$ 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起動して確認。

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

できた！

Angular 起動

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

もう1個PowerShellを起動。

$ 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にアクセス。

できたー！

おわり

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/