wsl2に入門してみた(導入からdocker-compose upまで)

## 5月が待ちきれずWSL2を導入してしまいました。

もともと、windowsPCにubuntuをデュアルブートして使っていました。

しかし、デュアルブートしているとwindows側に不具合が生じたり、起動の手間が増えることから若干不便を感じていた矢先、ubuntuちゃんがまさかのクラッシュ！

設定も全部飛んでしまったので、wslに入門してみようと思いました。

## WSL2とは
WSLとはＷindows Ｓubsystem for Ｌinuxの略で、windowsの内部でlinuxが動くというまさに夢のシステムです！

そして、WSLには、ふつうのWSLとWSL2と呼ばれる二種類があります。

linuxが使えるという点では両者ともに、変わりません。
しかし、WSL2はHyper-Vという高速な仮想環境を用いており、WSLではできなかったことがいくつかできるようになっています。

その中の一つにDockerが使えるという点があげられます(これで僕はwsl2の方を導入しようと決めました。もともとwindows10 proなら使えたのですが、homeの場合、virtualboxとか使わないといけないです。)

ということで、少し前置きが長くなりましたが、今回はWSL2を導入し、docker-compose upをするまでの流れと、詰まった点をご紹介します‼

### 注意
先ほども申し上げましたが、WSL2ではhyper-Vという仮想環境を用いているため、virtual-boxの様な仮想環境と<b>共存できなくなる</b>ということにご注意ください！

## 今回の環境
OS:windows10 64bit home
CPU:AMD Ryzen 5

## 大まかな手順
1. windowsのバージョンアップ
2. wsl1(もともとのwsl)を導入
3. windows10 Preview Buildのインストールと諸々の設定
4. 4. wsl1をwsl2に変換
5. xserverの導入(任意)
6. エディタの設定(VScode)
7. dockerとdocker-comopseの導入
8. docker-compose up!

## 1.windowsのバージョンアップ
僕のwindowsはバージョンが1700番台だったので、まず、バージョンを手動で上げる必要がありました。~~(これ知らずに1時間ぐらい消えました涙)~~

バージョンアップの方法は[この記事](https://fujidenki.org/blog/windows-10-manual-version-up/)が詳しいので参考にしつつ、最新版にアップデートしてください。
<b>結構時間がかかりますので、ご注意を</b>

## 2.wsl1を導入
まず最初にwsl1を導入します。
すでに導入済みの人はこの工程はスキップしていただいてかまいません。

wsl1の導入方法は以下の通りです。
0.「プログラムと機能」からWindowsの機能の有効化または無効化のところに行き、「Windows Subsystem for Linux」を✓
1.Microsoft storeというアプリ(windows10標準装備)でwslと検索
2.Linux on Windows? 本当です。をクリックして、自分の入れたいディストリビューションを選択してインストール

かんた～ん

## 3.Windows10 preview Buildのインストールと諸々の設定

以下の手順でWindows10 Preview Buildをインストールします。
(WSL2の正式リリースは今年5月といわれているので、現在は先行の不安定なバージョンのみです)

1.デスクトップ画面の左下検索欄に設定と打って、設定アプリを開き、更新とセキュリティ→「Windows Insider Program」と行きます。
2.あとは基本推奨通りに進めればいいのですが、一つ注意！insiderは<b>ファースト</b>を選択しましょう
3.再起動とwindows updateの繰り返し(ひたすら待つ)
4.戻ったら、また、検索欄でwinverと検索し、ヒットしたアプリを立ち上げる→OSのビルドが18917以上であればおっけ！
5.検索欄にpowershellと入力して、powershell(管理者権限)を起動。以下コピペして実行
`Enable-WindowsOptionalFeature -Online -FeatureName VirtualMachinePlatform`
6.再起動して、powershell(管理者権限)で次のコマンドでwsl1をwsl2に変換
`wsl --set-version Ubuntu 2 `
(これ結構時間かかります。僕はだいたい1時間ほどかかりました！)

以上でwsl2の導入は完了です。

## 4.Xserverの導入
ここは、web開発の人は飛ばしていただいて大丈夫です。

僕の場合、WSL2でGUIの開発がお仕事であったので、そういう場合にはXserver必要です。
[この記事](https://qiita.com/samunohito/items/d167aed2552620e4dfae#%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AE%E5%B0%8E%E5%85%A5)がめっちゃわかりやすいです

ただ、上の記事では当たり前すぎて省略されていますが、DisplayPORTの環境変数設定で`bashrc`や`zshrc`をいじった後は、再起動するか
`$ source ~/.bashrc`
するなどして、設定を読み込んであげないといけません。

## 5.エディタの設定(今回はVScodeを使用)
wsl2から
`$code .`
でVScodeを起動できるようにしたかったのですが、ここでも詰まってしまいました。

<b>手順</b>
1.[Vscode公式ページ](https://code.visualstudio.com/Download)からVscodeをダウンロード
2. ダウンロードしたインストーラーを起動して、エンター押しまくって普通にインストール(途中PATHを自動的に追加する項目のチェックボックスがあるのでそこだけは必ず✓しておきましょう)
3. 拡張機能から[Remote development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)を入手。
4. wsl2に入って適当なディレクトリで、`code .`で起動(もしもうまくいかない場合はインストールでPATHが通っていないので、自力でPATHを通すか、WSL上にVScodeを手動でインストールする必要があります(後述))

これでうまくいく人もいます。
僕はうまくいきませんでした。

### うまくいかなかった(wsl上で`code`コマンドが使えない)時は

wslとvscodeを使うにはPATHがちゃんと通っていることが必要です。

普通にやっていれば、
WindowsにWSLを導入した時点でクリアしてます

ですがもしもうまくいかなければ以下の対処法をお試しください。
<b>PATHが通っていないとき</b>
1. 「Windowsボタン」でスタートメニューを開き、Vscodeを探す。
2. Vscodeが見つかったら`右クリック`→`その他`→`ファイルの場所を開く`
3. エクスプローラーが開くのでアドレスバーを右クリックして「アドレスをテキストとしてコピー」を選択
4.あとは(このページ)[https://www.atmarkit.co.jp/ait/articles/1805/11/news035.html]を参考にPathの追加を行う。先ほどコピペしたアドレスを追加する。

## Remote Developmentが使えない(未解決)
上でご紹介した拡張機能Remote Developmentですが、ぼくは使えなかったです。
具体的には、wsl2上でshellから`code .`を実行したのですが、以下の様なエラーが出てしまい開けませんでした。
`VS code Server for WSL closed unexpectedly.`

この問題を解決しようといろいろ調べて、公式のgithubのissueでも未解決っぽかったので、別の解決策を試しました。

### VScodeのダウングレード
どうやら最新版のVScodeだとRemote Developmentが必ず有効になってしまい、上のエラーが出てしまうようなので、ダウングレードして回避します。

#####1.現在入ってるVScodeのsettings.jsonに以下2行を適当に追加
`"update.channel":"none",`
`"update.mode": "none",`

#####2.現在入っているVScodeをアンインストール
コントロールパネルからアンインストールしてください。

#####3.旧バージョンのVScode(1.33) のダウンロードとインストール
[公式ページ](https://code.visualstudio.com/updates/v1_33)からダウンロードして下さい。

あとは先ほどのVScodeのインストールと手順は同じです！

## 7.dockerとdocker-compose up
今回は参考としてこちらのリポジトリをdockerで環境構築していきたいと思います。

1.gitの導入
普通に入ります。[参考ページ](https://spangled-shalalala.hatenablog.com/entry/2017/09/05/060106)

2.dockerとdocker-composeの導入
<b>インストール以下コピペ</b>

```
$sudo apt update
$sudo apt upgrade -y
$sudo apt install apt-transport-https ca-certificates gnupg-agent $software-properties-common curl -y
$curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
$sudo add-apt-repository "deb [arch=amd64] $https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
$sudo apt update
$sudo apt install docker-ce docker-ce-cli containerd.io docker-compose -y
```

では早速docker-compose upしていきましょう！

```
$ git clone git@github.com:Dragon-taro/calender-app.git
$ #sshでやりましたが、特に今回はpushもpullもしないので、httpsでも大丈夫です。
$ cd calender-app
$ make
$ sudo docker-copose up
```
上で立ち上がるはずです。
ちなみにですが、毎回sudoつけて実行するのが面倒で、dockerをuserグループに入れたのですが、なぜか知らないですが、docker起動時に以下の様なエラーが出てしまいます。

```
ERROR: Couldn't connect to Docker daemon at http+docker://localhost - is it running?

If it's at a non-standard location, specify the URL with the DOCKER_HOST environment variable.
```
sudoつけたら一応回避できます。どなたかご存じの人いたら教えて下さい。

以上になります！
それでは素晴らしいWSL2ライフを送ってください！
コメント等々ご指摘いただけると、当記事の改善にもつながりますので、不備不足ありましたらコメントしていただけると嬉しいです。