WSL（Windows Subsystem for Linux）開発環境の自動セットアップ完全ガイド

私は昔からずっとWindowsユーザーです。Linuxもいろいろ触ってみましたが、結局Windowsの方がしっくりくるので、メイン環境として使い続けてきました。どちらのOSにも長所と短所がありますが、Web開発を学び始めた頃、Windowsで一番不便だったのはLinuxのコマンドラインツールが使えないことでした。

そんな悩みを一掃してくれたのが、Windows Subsystem for Linux（WSL）です。

WSLは本当に便利です。Windows上でBashシェルが動かせ、Node.jsアプリも問題なく実行できます。しかもWindows 10 Fall Creators Update以降は、セットアップも格段に簡単になりました。

この記事を書くきっかけは、少し前にノートPCを初期化したことです。nvmとWSLの組み合わせでBash on Windowsに不具合が出て、PCの動作にイライラしていたのですが、今思えば大げさに反応しすぎたなと反省しています。

PCを復旧させた後、開発環境をゼロから再構築する必要がありました。幸い私は、新しいPCへの移行やトラブル発生時に備えて、設定ファイルや構成情報をすべてGitHubリポジトリに保存しています。

この記事では、私がWSLを使って開発環境をどう構築しているのか、その手順を紹介します。あくまで個人的なこだわりを反映したセットアップ方法ですが、「次にWindowsで開発環境をゼロから立ち上げるとき」のためのステップバイステップガイドとしてまとめました。

1. パッケージの更新

Microsoft StoreからWSLをインストールし、デフォルトユーザーを追加したら、まずはすべてのパッケージを更新・アップグレードしましょう。

sudo apt update
sudo apt -y upgrade

Linuxディストリビューションを使ったことがない方のために補足すると、upgradeコマンドの-yオプションは、ターミナルに表示される確認プロンプトに対して自動的に「Yes」と答えるためのものです。更新したくないパッケージがある場合は付けない方が安全ですが、私は常に付けています。

-yフラグを付ければ、以下のような確認メッセージは表示されません。

2. ビルドツールのインストール

npmからネイティブアドオンをコンパイル・インストールするには、ビルドツールが必要になる場合があります。私の場合、Gatsbyの画像処理で使うsharpが内部でnode-gypを利用するため、このインストールが必要でした。

sudo apt install -y build-essential

3. Node.jsのインストール

nodejs.orgの公式手順に従ってNode.jsをインストールすると、パーミッションが正しく設定されないことがあります。その結果、npm installを実行するたびにエラーが発生します。そこで役立つのが、Node.jsのバージョン管理ツールnです。

n-installでNode.jsを導入する

真っ新な状態からのインストールなので、n-installスクリプトをそのまま実行できます。

curl -L https://git.io/n-install | bash

これで最新の安定版Node.jsがインストールされます。

スクリプトの実行が完了したら、次のコマンドでbashを再起動します。

. /home/my_user_name/.bashrc # コピー＆ペースト用に表示されます

Node.jsとnpmのバージョンを確認しておきましょう。

node -v && npm -v

4. fishシェルのインストール

fishは今や私のお気に入りのシェルです。理由はシンプルで、自動補完（インテリセンス）が非常に優秀だから。おしゃれなテーマも豊富に用意されています。

sudo apt -y install fish
sudo apt -y upgrade && sudo apt -y autoremove

Oh My Fish（OMF）のインストール

Oh My Fishは、fish向けのパッケージマネージャーのような存在で、パッケージやテーマを簡単にインストールできます。

curl -L https://get.oh-my.fish | fish

OMFテーマのインストール

omf install clearance

5. GitとSSHの設定

ここまでで、WSLの基本的なセットアップは完了です。次はGitの設定を行いましょう。私はWSL上では、HTTPSではなくSSH経由でGitを使うようにしています。

注意： 執筆時点では、WSLのGitとVSCodeの統合機能がうまく動作しないため、Windows側にも別途Gitをインストールしています。ターミナルだけで完結させたい方はこの手順を省略しても構いませんが、私はVSCodeのGit統合機能がとても気に入っています。

SSHの設定方法については、SSHセットアップガイドを参考にしてください。HTTPSではなくSSHをおすすめする理由は、Git Credential Managerやキーリングマネージャーでさまざまな問題に遭遇したからです。結局、SSHキーを作成してGitHubで認証する方が早く確実でした。先ほどのガイドで手順を詳しく解説しています。

6. dotfilesの移行

dotfilesをGitHubリポジトリにバックアップしているなら、ここでWSLフォルダへ復元する絶好のタイミングです。以前はファイルを移すたびに手動でパーミッションを設定していましたが、rsyncを使えば一括で移行できることを最近知りました。

rsync -avzh /mnt/c/Users/dotfiles/ ~/

このコマンドで、dotfilesフォルダの中身がWSLのホームディレクトリ（~/）にコピーされます。以下のコマンドで確認できます。

ls -la ~/

ここでは.gitconfig、.gitignore、.npmrcをコピーしましたが、画像を見ると分かるように、パーミッションが.bashrcと一致していません。

chmodでパーミッションを変更し、類似ファイルの属性を調べるにはstatを使います。

stat -c "%a %n" ~/.*

ドット（.）で始まるすべてのファイルが一覧表示されます。私の環境ではこのようになりました。

777 /home/scott/.
755 /home/scott/..
600 /home/scott/.bash_history
644 /home/scott/.bash_logout
644 /home/scott/.bashrc
777 /home/scott/.cache
777 /home/scott/.config
777 /home/scott/.gitconfig
777 /home/scott/.gitignore
777 /home/scott/.local
777 /home/scott/.npm
777 /home/scott/.npmrc
644 /home/scott/.profile
644 /home/scott/.sudo_as_admin_successful

今回は.gitconfig、.gitignore、.npmrcだけ変更したいので、次のように実行します。

chmod 644 .gitconfig .gitignore .npmrc

これでファイルのパーミッションは整いました。

まとめ

以上で、最新化したUbuntu、Node.js、fishターミナルを備えたWSL環境が稼働状態になりました。あとは、開発に必要なグローバルnpmパッケージを好きなだけインストールすればOKです。

それでは、快適な開発ライフを！

最後まで読んでいただきありがとうございました

この記事が役に立ったと思ったら、拍手（Clap）を残したり、今後の更新を見逃さないよう購読したり、Twitterで感想をつぶやいていただけると嬉しいです。

書き漏らした点や、もっと良いやり方をご存じの方は、ぜひ教えてください。

Twitterでのご連絡や、GitHubでの質問もお待ちしています。

このような記事は私のブログでも公開しています。