WSL2でWeb開発環境の構築メモ (zsh, node, dockerなど)

公開:2020/12/08
更新:2020/12/10
4 min読了の目安(約4300字TECH技術記事 3

はじめに

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 でテーマがプレビューできるところで、好きなものを見つければ良い。
prezto themes

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で入れる。

# とりあえずaptでnodeをインストール
sudo apt install nodejs npm

# n をグローバルにインストール
sudo npm install -g n

# LTSバージョンをインストール
sudo n lts

# aptで入れたnodeを削除
sudo apt purge nodejs npm

ちょっと面倒だが n は使いやすいのでおすすめ。

Docker

普通にインストーラを落としてインストールする。

設定で「General > Use the WSL2 based engine」がオンになっていることを確認。
「Settings > Resources > WSL Integration」で「Ubuntu」をオンにする。

詳しくはここに全部書いてある。

最後に、sudoなしでもdockerコマンドを実行できるように権限を追加。

sudo usermod -aG docker $USER

これでDockerが利用可能になる。

docker

簡単~

VS Code - Remote WSL

VS Code - Remote WSLがマジで便利。

code . と打てばカレントディレクトリがVS Codeで開かれる。
VS Code
あとはDockerで開発すればいい。
ほんと便利な世の中になりましたね。

Windowsのフォルダカラー修正

Ubuntuから /mnt/c を見ると、Windowsのフォルダがマウントされている。
LS Colors
フォルダ名がそのままだと見づらいので修正する。

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)

LS colors

ただしWSL上からのWindowsファイルシステムの操作は遅いので、開発プロジェクトを置かないように注意すること。

おわり

ちょうどRyzenやGeForceなどの新型ハードが盛り上がる中、その恩恵を受けられないMacにはどうしてもパワー不足を感じてしまっていた。

あとはフォントレンダリングがMacのほうがキレイくらいの理由だったが、それもヒラギノをWinに入れ、4KモニターでスケーリングしてRetinaっぽく運用すると問題ではなくなった。フォントレンダリングではなくフォントに問題があるだけっぽい。

M.2 SSDは高速だしメモリも好きなだけ積めるし、ついにWeb屋も強いマシンで開発ができるようになって嬉しい… しばらくMacはiOSアプリのビルドくらいしか使わなくなりそう。