「Windowsマシンしか持っていないしMacを買う金銭的余裕がない…でもちゃんとした環境でWeb開発がしたい」ということで、Windows環境でもLinuxベースの開発環境を構築する方法を備忘録がてら書いておきます。
今回、React本である『りあクト！』という書籍を参照し、環境構築を進めていきます。
なにはともあれWSL2をインストールしよう
「WindowsでWeb開発なんてオワってる」と言われて久しい昨今、そんな状況を打破するためにMicrosoftが本気を出し、Windows上でLinuxを触る際のシステムを大幅アップデートしてくれました。その名もWSL2(Windows Subsystem for Linux 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を作成し、ファイルの中身を適宜書く。
今回はひとまずアクセス権限に関する部分のみを書いておく。
[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内の記述の順番。
PATH="$HOME/.anyenv/bin:$PATH"
eval "$(anyenv init -)"
上記のようにすべきところを上下逆に書いていました。その後、メッセージにあるようにanyenv install --initを実行したらうまくいきました。
anyenvの導入については以下の記事が参考になりました。
（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の設定ファイルも作ります。
今回は以下のように設定しました。
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
やっていることは以下のとおりです。
- バージョン一覧を見て
- 目当てのバージョンをインストールして
- デフォルトのバージョンを設定
まとめ
WindowsでもMac勢みたいに開発をするため、なんとか環境を整える事ができました。
やっとこさスタートラインの一歩手前に立った…という気持ちです。
今回やってみて、UNIX系コマンドの知識が圧倒的に足りていないことを痛感しました。
楽しみつつがんばります。