【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 の比較

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

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

WSLも動きますが、今後は特に理由がない限りWSL2を使用する流れになりそうです。
WSLを使用するケース：例外的にWSL2ではなくWSL1を使用する場合

WSL2のインストール方法

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

Windows 10 用 Windows Subsystem for Linux のインストール ガイド

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

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

WSLの設定を調整する

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

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とインストール済みのパッケージを更新する。

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とか知らなかった…。

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環境構築

（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の設定ファイルも作ります。
今回は以下のように設定しました。

default-packages

yarn
typescript
ts-node
typesync

Node.jsのインストール

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

nodenv install -l
nodenv install 14.4.0
nodenv global 14.4.0

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

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

まとめ

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

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