WSL2でWeb開発環境の構築メモ (zsh, node, dockerなど)
はじめに
Web開発といえばUNIXターミナルが使えるMacが便利だったが、ついに今年WSL2が正式リリースされた。これでようやくWindowsでまともなWeb開発環境を構築することが可能になって喜びもひとしお。
それどころか、WSL2, Windows Terminal, VS Codeと便利なツールがどんどんリリースされていてMacよりも便利といえる環境になってきたため、本格的にWindowsに乗り換えることにした。
環境構築をメモしていく。
WSL2とUbuntuのインストール
公式ドキュメント通り。
ディストリはUbuntuを選んだ。
Windows Terminal
マイクロソフト純正。とても使いやすく、アップデートも精力的で今後も楽しみ。
Microsoft StoreからWindows Terminalをインストール
設定ファイルがJSONなのはエモいですね。
この辺で好きなカラースキームを見つける。
フォントも好きなやつを入れよう。
個人的には DejaVu Sans Mono が好き。一応Powerline版を入れている。
パッケージ更新
とりあえず最初にUbuntuのパッケージを更新。
sudo apt update
sudo apt upgrade
zshとpreztoの導入
デフォルトはbashなので、zshに変更する。
昔はoh my zshを使っていたが、カスタマイズが多すぎて使いこなせないと感じて、最近はpreztoというフレームワークを使っている。
とりあえず最近のターミナルに求めるモダンな機能はだいたい実現できるのでおすすめ。
sudo apt install zsh
zsh # 設定ファイルはこのあとpreztoで作るので(q)でそのまま何もしない
# preztoをインストール
git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"
# preztoのセットアップ
setopt EXTENDED_GLOB
for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done
# デフォルトシェルをzshに変更
chsh -s /bin/zsh
# ターミナルを再起動
preztoの設定
主にテーマとモジュールを設定する。
テーマ
preztoのいいところは prompt -p でテーマがプレビューできるところで、好きなものを見つければ良い。
prompt <テーマ名> で適用。ただ、デフォルトのやつが個人的には好き。
モジュール
~/.zpreztorc を編集
コメントがかなり見やすく、好きな項目を編集すれば良い。
特に重要なのはモジュールのロードで、好きなモジュールを書き足す。
一覧や機能はここに全部書いてある。
自分は以下のような感じ。
# Set the Prezto modules to load (browse modules).
# The order matters.
zstyle ':prezto:load' pmodule \
'environment' \
'terminal' \
'editor' \
'history' \
'directory' \
'spectrum' \
'utility' \
'completion' \
'prompt' \
'archive' \ # 圧縮ファイル操作
'autosuggestions' \ # コマンド入力補完
'git' \ # Git操作
'syntax-highlighting' # コマンド入力シンタックスハイライト
他にも各モジュールのコンフィグが下部にあるので、好きに編集する。
# Auto set the tab and window titles.
zstyle ':prezto:module:terminal' auto-title 'yes'
これとか、ターミナルのタブ名が自動で設定されるので複数タブ開くときとか便利。
Node.js
aptで入れるとバージョンが古かったり、バージョン管理が面倒だったりするので、 n を使ってインストールする。
ただ n をインストールするのに npm が必要なので、一時的にaptで入れる。
簡単にインストールする方法が出来ていた。
# n をダウンロード
curl -L https://raw.githubusercontent.com/tj/n/master/bin/n -o n
# LTSバージョンをインストール
bash n lts
# n をグローバルにインストール
npm install -g n
ちょっと面倒だが n は使いやすいのでおすすめ。
Docker
普通にインストーラを落としてインストールする。
設定で「General > Use the WSL2 based engine」がオンになっていることを確認。
「Settings > Resources > WSL Integration」で「Ubuntu」をオンにする。
詳しくはここに全部書いてある。
最後に、sudoなしでもdockerコマンドを実行できるように権限を追加。
sudo usermod -aG docker $USER
これでDockerが利用可能になる。
簡単～
VS Code - Remote WSL
VS Code - Remote WSLがマジで便利。
code . と打てばカレントディレクトリがVS Codeで開かれる。
あとはDockerで開発すればいい。
ほんと便利な世の中になりましたね。
Windowsのフォルダカラー修正
Ubuntuから /mnt/c を見ると、Windowsのフォルダがマウントされている。
フォルダ名がそのままだと見づらいので修正する。
LS_COLORS設定を出力
dircolors -p > ~/.dircolors
これの OTHER_WRITABLE という項目がそれなので、「34;42」から「01;34」 とかに編集。
OTHER_WRITABLE 01;34 # dir that is other-writable (o+w) and not sticky
最後に .zshrc に以下を追記してターミナル再起動。
eval $(dircolors -b ~/.dircolors)
ただしWSL上からのWindowsファイルシステムの操作は遅いので、開発プロジェクトを置かないように注意すること。
おわり
ちょうどRyzenやGeForceなどの新型ハードが盛り上がる中、その恩恵を受けられないMacにはどうしてもパワー不足を感じてしまっていた。
あとはフォントレンダリングがMacのほうがキレイくらいの理由だったが、それもヒラギノをWinに入れ、4KモニターでスケーリングしてRetinaっぽく運用すると問題ではなくなった。フォントレンダリングではなくフォントに問題があるだけっぽい。
M.2 SSDは高速だしメモリも好きなだけ積めるし、ついにWeb屋も強いマシンで開発ができるようになって嬉しい… しばらくMacはiOSアプリのビルドくらいしか使わなくなりそう。
Discussion
本論とズレますが、ヒラギノのライセンスを用意するのがちょっとしんどいなと思っています。Amazonとかでダウンロード販売のを買うしかないですよね？
ヒラギノ、いいお値段なんですよね。いまのところ、お安く手に入れる方法はないようです。
サブスクリプションもありますが、買い切りが結果的にはお得かと。
個人的にはMacには最初からヒラギノの代金が入っていると考えて納得してますが、最終的にはどこまでフォントを気にするかという、こだわりの領域ですね…
普段はVagrantでしょぼしょぼとbash使ってましたが、wsl2環境構築に合わせて、この記事のzshとprezto入れたらシェルが一気に近代化しました！とてもありがたい🙏