【Windows】WSL2+Ubuntu+Node.jsの環境構築

「Windowsマシンしか持っていないしMacを買う金銭的余裕がない…でもちゃんとした環境でWeb開発がしたい」ということで、Windows環境でもLinuxベースの開発環境を構築する方法を備忘録がてら書いておきます。

今回、React本である『りあクト！』という書籍を参照し、環境構築を進めていきます。

## なにはともあれWSL2をインストールしよう
「WindowsでWeb開発なんてオワってる」と言われて久しい昨今、そんな状況を打破するためにMicrosoftが本気を出し、Windows上でLinuxを触る際のシステムを大幅アップデートしてくれました。その名も**WSL2(Windows Subsystem for Linux 2)**！

[WSL 1 と WSL 2 の比較](https://docs.microsoft.com/ja-jp/windows/wsl/compare-versions)

要約すると、**省メモリかつ高速で、完全なLinuxカーネルがWindows上で動く**ようになったとのこと。

WindowsでUNIX系OSを触りたい場合は、このWSL2を入れておく必要があります。

> WSLも動きますが、今後は特に理由がない限りWSL2を使用する流れになりそうです。
> WSLを使用するケース：[例外的にWSL2ではなくWSL1を使用する場合](https://docs.microsoft.com/ja-jp/windows/wsl/compare-versions#exceptions-for-using-wsl-1-rather-than-wsl-2)

### WSL2のインストール方法
WSL2のインストールは以下の公式ドキュメントの流れに沿っていけば大丈夫でした。
僕の場合はOSビルドが19042.685で、手動インストールを行いました。執筆時点ではOSビルド20262以降ならコマンド`wsl --install`で自動インストールができるようです。助かる。

[Windows 10 用 Windows Subsystem for Linux のインストール ガイド](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)

インストール時の注意事項はざっとこんなところでしょうか。

- PowerShellは管理者権限で実行する
- WindowsのビルドがWSL2の条件を満たしているか確認する
- 一通りインストールし終わったあとに「Windowsターミナル」も入れておくと後々役に立つかも

### WSLの設定を調整する
Linuxを入れたら、最初の設定をしておく。`wsl.conf`というファイルを作り、最初に必要な設定をしておくとあとが楽。

```shell
sudo vi /etc/wsl.conf
```

として`wsl.conf`を作成し、ファイルの中身を適宜書く。
今回はひとまずアクセス権限に関する部分のみを書いておく。

```wsl.conf
[automount]
options = "metadata,umask=22,fmask=11"
```

> 参考：
> https://docs.microsoft.com/ja-jp/windows/wsl/wsl-config#configure-per-distro-launch-settings-with-wslconf
> https://www.atmarkit.co.jp/ait/articles/1807/12/news036.html

### パッケージの更新
APTとインストール済みのパッケージを更新する。

```shell

sudo apt update
sudo apt -y upgrade
```

> ちなみにAPT(Advanced Packaging Tool)は、Linux系によく採用されているパッケージ管理ツール。
> 参考：https://ja.wikipedia.org/wiki/APT

### Gitをインストール
エンジニア必須ツールであるGitもここで入れておく。

```
sudo apt-get install -y git
```

### シェルをZSHにする場合
ZSH(Z Bash)という、Bashを強くしたものが流行っているらしいので入れておく（俺より強いやつに会いに行く）。
Linux界隈に疎すぎてZSHとかfishとか知らなかった…。

```shell
sudo apt-get -y zsh
chsh -s /usr/bin/zsh
```

## Node.jsのインストール
node.jsをインストールする前に、anyenvをインストールします。
anyenvは、複数の**env系を一括で管理できるツール。これを使うことで複数言語の複数のバージョンを管理できるようになるようです。便利！

つまり、anyenv→nodenv→必要なプラグイン→Node.jsの順でインストールしていく感じ。

### anyenvのインストールで詰まる
「パスを通していざnode.jsじゃ」と思っていたら、次のようなメッセージが出てきました。

```
ANYENV_DEFINITION_ROOT(/home/user_name/.config/anyenv/anyenv-install) doesn't exist. You can initialize it by:
> anyenv install --init
```

これを実行してもうまく走らず困り果て、いろいろ調べるとしょぼいミスが原因でした。
それは`.zshrc`内の記述の順番。

```:.zshrc
PATH="$HOME/.anyenv/bin:$PATH"
eval "$(anyenv init -)"
```

上記のようにすべきところを上下逆に書いていました。その後、メッセージにあるように`anyenv install --init`を実行したらうまくいきました。

anyenvの導入については以下の記事が参考になりました。
> [anyenv + macOS環境構築](https://qiita.com/rinpa/items/81766cd6a7b23dea9f3c)


（Windows畑育ちなので、大学の授業で触ったきりのLinuxにとても苦労します…。）

### nodenvのインストール
nodenvはNode.jsのバージョン管理ツールですね。
先程の問題が解決できればnodenvのインストールは一発です。

```
anyenv install nodenv
```

インストールしたら`exec $SHELL -l`でシェルの再起動を忘れずに。

### 必要なプラグインのインストール
このタイミングで、便利なプラグインたちをインストール。
今回は`anyenv-update`と`nodenv-default-packages`を入れます。それぞれルートディレクトリ直下に`plugins`ディレクトリを作ってそこに入れましょう。

> `anyenv-update`は「**env系」をまとめてアップデートしてくれるanyenvのプラグイン。
> `nodenv-default-packages`はnpmのインストール時に一緒にインストールするパッケージを指定できるnodenvのプラグイン。

そして、`nodenv`直下に`nodenv-default-packages`の設定ファイルも作ります。
今回は以下のように設定しました。

```conf:default-packages
yarn
typescript
ts-node
typesync
```

### Node.jsのインストール
Node.jsのインストールは以下。
書籍に倣ってバージョンは`14.4.0`にしました。

```shell
nodenv install -l
nodenv install 14.4.0
nodenv global 14.4.0
```

やっていることは以下のとおりです。

1. バージョン一覧を見て
2. 目当てのバージョンをインストールして
3. デフォルトのバージョンを設定

## まとめ
WindowsでもMac勢みたいに開発をするため、なんとか環境を整える事ができました。
やっとこさスタートラインの一歩手前に立った…という気持ちです。
今回やってみて、UNIX系コマンドの知識が圧倒的に足りていないことを痛感しました。

楽しみつつがんばります。