開発環境を構築する（WSL2 + Docker + VSCode - Remote Containers） 2022年1月版

PCを新調したので、開発環境を再構築。
以前も整理しようとした挙句にグチャグチャになってしまったので、ローカルではなくやはりコンテナ環境を使う方式へ。
どうせだったらVSCode Remote Container を使おうと。
環境はWindows11Homeです。VSCodeはインストール済みとします。

## WSL2 のインストール
コントロールパネル->プログラムと機能->Windowsの機能の有効化または無効化から、Linux用Windowsサブシステムをチェックを入れてインストールする（要再起動）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/1c25a38e-7e5a-19aa-1698-79566a0e6371.png)


## Docker Desktop のインストール
[DockerHub](https://hub.docker.com/)よりインストーラーをダウンロードしてインストールします。
これによって、以下のモジュールがインストールされます
* Dcoker Compose
* Notary
* Kubernetes
* Credential Helper

インストールにあたっての選択肢はそれほどなく、そのまま進めてしまっても問題ないかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/f133bfe7-d525-a75d-b771-41d269e57336.png)

一通りインストールが終わるとサインアウトを要求されるので実施します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/5b0b93a2-4368-cce9-934e-a0e267cdb8be.png)

ログインしなおして進めていくと、カーネルアップデートを要求されるので指定リンクから実施します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/01f8cd9d-a14f-d61f-c2b2-d6733a222b46.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/c2e53184-8484-ee5f-d2d2-f7205724d311.png)

インストール後、DockerのRestartを実行後に下記ダイアログが表示されます。
Startをするとチュートリアルが開始されるので不要な人はスキップしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/ce3c5523-06d8-166b-ce30-164ada74fcf1.png)

## Ubuntu のインストール
今回、実行環境としてはUbuntuを使用することにしたのでこちらをインストールします。
インストールはMicrosoftStoreから検索して入手を押すだけ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/13da1f81-671f-9fbb-b83f-55f55b32ac67.png)

Ubuntuを開くとUbuntu用のユーザを作成する処理が動くので、ユーザ・パスワードを設定します

## VSCode の環境構築
### Remote - Containers のインストール
何か忘れてるな、、と思ったら、肝心のRemote-Containersをインストールしていませんでした。
VSCode のプラグインを検索してインストールします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/688d8b99-7e0d-c0ec-8b63-50397c4d0e3e.png)

### Remote - WSL のインストール
WSLと連携するために必要となるプラグインをインストールします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/022d2dbe-c84a-6d4d-be14-c3238d7ccf60.png)

ここまでで準備は完了。

## WSL2上のUbuntuへ VSCodeから接続する

WindowsTerminalを起動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/1bf5aeb7-02fa-2a63-d5a3-03d9b8b1a5a1.png)

通常はPowerShellが起動されるので、横のプルダウンからUbuntuを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/9e31770a-0c7c-d737-ec50-04704d51bfdd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/4ecc62b8-c6b2-cf5e-8e98-980f5772a9e0.png)

適当に今回のプロジェクトフォルダを作成し、docker-compose.ymlを作成してVSCodeを起動させます。

```terminal
$ mkdir /home/<ユーザ>/workspace/sample
$ cd /home/<ユーザ>/workspace/sample
$ touch docker-compose.yml
$ code.
```

起動したVSCode の左下が「WSL:Ubuntu-20.04」となっていて、WSL上で実行されたことが確認できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/c29c44e1-e00d-94fa-5bc4-70a22d023d37.png)

### docker-compose.ymlの設定
起動したVSCodeを使って、docker-compose.ymlを編集。Nodeの環境を定義します。
(コンテナ名がsample-containerの場合)

```yml
version: '3'
services:
  node:
    image: node:lts
    container_name: node-container sample-container
```

## Remote - Containers でコンテナ起動
VSCode左下の緑のマークをクリックすると出てくるプロンプトから「Reopen in Container」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/c2f8005c-e79b-7730-2419-fd49345da3ba.png)

ここで書きエラーが起きることがあります

```terminal
[56613857 ms] Start: Run in Host: docker version --format {{.Server.APIVersion}}
[56613991 ms] 
The command 'docker' could not be found in this WSL 2 distro.
We recommend to activate the WSL integration in Docker Desktop settings.

For details about using Docker Desktop with WSL 2, visit:

https://docs.docker.com/go/wsl2/
```

その場合はDockerDesktopの設定を変更しましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/041ac26f-13e5-d669-0f15-b35c700b050d.png)



続いて「From 'Dcokerfile'」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/043dd040-39d7-e08b-6151-5c1fc9c8e263.png)

しばらくするとDocker上でVSCodeが再度立ち上がります。
VSCode上のTerminalを表示させるとちゃんと作成したプロジェクトフォルダとなっていることがわかります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25184/fdaa8c5a-8f8a-7cf1-81b5-d14248e87c64.png)

# 終わりに
ほぼ初期状態から構築したので、ずいぶんと手がかかってしまった感があるけど、これであとは開発対象によってDockerfileをいじればいいだけになったかな。
docker-composeも試してみたけど、こちらは正直まだうまくいかず。。。どこかでリベンジを。

いや、なんかローカルでしこしこ開発している時代から随分と変わりましたね。
開発環境をきちんと定義して、ポータビリティも持たせられる。いい話だ。

一方で、今動かしているのがWindows上なのかDocker上のものなのか。。。とか、この状態で進めていくと混乱しないのかな？が少し心配。
でもまぁ、次第に慣れていくでしょう。

# 参考

* [さくっとNode.js開発環境構築 (WSL2 + Docker-Compose + VSCode Remote - Containers)](https://takeken1.hatenablog.com/entry/2021/01/02/221510)
* [さくっとWSL2 + Docker + VSCode Remote - Containers でNode.jsが動く開発環境を構築する（devcontainer.jsonは自動生成する）](https://takeken1.hatenablog.com/entry/2021/01/02/195803)
* [WSL2 + Ubuntu + VSCodeでの開発環境構築](https://qiita.com/zaburo/items/27b5b819fae2bde97a3b)
* [Windows ターミナル で WSL 2 の Ubuntu を使ってみる (＋ Docker Desktop 統合)](https://mseeeen.msen.jp/windows-terminal-with-ubuntu/)
* [仮想マシン プラットフォームの有効化と無効化](https://kb.seeck.jp/archives/16953#toc5)