WSL2でWeb開発環境がより快適に(docker-composeも動く)

WSL2でWeb開発環境がより快適に(docker-composeも動く)

今回は、プログラミング環境に関する記事です。

最近正式対応になったWSL2(Windows Subsystem for Linux 2)をWeb開発環境として使うときにおすすめな設定を解説します。

自分は最初に使い方を間違えていたので「思ったよりパフォーマンス上がっていない?」と誤解していましたが、設定を見直すと噂通り「20倍のパフォーマンス」が出るというのを体感しました。

「WSL2にしたけどパフォーマンスが出ていない」と感じる方や「これからWSL2を導入しよう」という方の参考になれば幸いです。

目次


1. WSL2の良いところ

WSL2を一言で表すと「localhostでアクセスできる超早いVM」という表現がしっくりくるんじゃないでしょうか。

ターミナルの起動もコマンドプロンプトを立ち上げる速さで上がってきますし、WSL2上で動かしているDockerのWebサイトにアクセスしても「PCに直接Linuxを入れて使っていたときの速度感」にかなり近いです。

WSL1とWSL2両方に良さがあるのでWSL1の廃止は当面無いそうですが、PHPやNode.jsを使ったWeb開発をする上ではファイルアクセスのパフォーマンス面でもWSL2を使う方が良さそうな感触です。

それくらい速度面でWSL2は良くなっています。

WSL2のインストール手順は「マイクロソフトさん公式(外部リンク)」が一番きれいにまとまってますので、こちらを参考にしていただくのをおすすめします。


2. WSL2を快適に使うために変更した設定

WSL2にバージョンアップしてから以下を変更しました。

  • ソースコードなどはLinux上に保存する
  • DockerはLinux上にインストール

それぞれ解説します。

ソースコードなどはLinux上に保存する

先日「快適にプログラミングをするためのWSLオススメ設定」という記事でWSLについて解説していたときは、「LinuxのホームディレクトリをWindowsと同じにする」という設定をして使っていました。

こちらの方が「エクスプローラーで画像ファイルをドラッグしてソースコードの方に持っていく」などがラクだったりもしたので、Windowsで普通に使うフォルダとLinuxのホームディレクトリが揃えていました。

ただ、この構成だとWSL2の速度が最大限活かせないことがわかったので、今は以下の構成にしています。

【変更前】

Linuxのホームディレクトリ=Windowsのホームディレクトリ
/c/Users/sample

ソースコードをGitHubなどからtest-project取得する場合
/c/Users/sample/src/test-project

【変更後】

Linuxのホームディレクトリ
/home/sample

ソースコードをGitHubなどからtest-project取得する場合
/home/sample/src/test-project

ただ、この場合はLinux側のファイルへWindowsのエクスプローラーからアクセスするのに後述の「小ネタ エクスプローラーでWSL上のディレクトリを直接開く」を使う必要があります。

DockerはLinux上にインストール

WSL1のときはWindows側に「Docker for Windows」をインストールしておいて、Linux側で「export DOCKER_HOST=tcp://localhost:2375」の設定を行い、LinuxからWindowsのDockerへ通信するように設定していました。

WSL2でも同じように設定していたのですが、docker-composeを使おうとすると下記のようなエラーが発生してどうしてもうまく使うことができませんでした。

ERROR: Couldn't connect to Docker daemon at http+docker://localhost - is it running?

If it's at a non-standard location, specify the URL with the DOCKER_HOST environment variable.

そこで「WSL2はVMなんだからLinux上に普通にDockerインストールすれば使えるんじゃね?」と思い立ち、WindowsからDocker for Windowsをアンインストール。

続いてLinuxへDockerさん公式(外部リンク)の手順に則って普通にDockerをインストールすると普通にdocker-composeが動きました。(さすがVM)

Linux上でdocker-composeを使ってApacheなどのコンテナを立ち上げたときに、Windowsから見ると普通に「http://localhost」でアクセスできるので、個人的に実現したかった環境は揃いました。

DockerでLAMP環境の構築をサクッと検証するときは「matatabi3 / docker-php-base(GitHubリンク)」を使ってみてください。

WSL1でLinuxからWindowsのDocker for Windowsと通信していたころよりも、かなりパフォーマンスが上がっているのを実感できます。

ちなみに、WSL2上のDockerを利用する場合は2つ注意点があります。

  • 普段使うユーザーをDockerグループに追加する必要がある。

    $ sudo usermod -aG docker [ユーザー名]
  • Dockerのデーモンが自動で立ち上がらないので、WSL2を利用し始めたときやWindowsを再起動したりしたときは起動する必要がある。

    $ sudo service docker start

3. WSL1を使う方が良い場合

基本的にはパフォーマンス面でWSL2が良い部分が多いのですが、以下の場合はWSL1を使う方が良いようです。

  • 事情があってソースコードをWindows側に置かなければいけない場合
    ※ VSCodeであればリモートWSL機能を使うことで、VSCodeの操作はWindows、ソースコード管理はWSL2という構成で利用できます。
  • WindowsからもWSL2からもコンパイルを行う場合 (Javaなどでしょうか)

その他WSL1と2の詳細な比較が「マイクロソフトさん公式(外部リンク)」に載っていますので、そちらもご確認ください。


4. 小ネタ

最近知ったのですが、WSLを使う上で知っておくと便利なものを2つ紹介します。

  • エクスプローラーでWSL上のディレクトリを直接開く
  • WSLのコマンドラインからエクスプローラーを開く

エクスプローラーでWSL上のディレクトリを直接開く

下記のパスをエクスプローラーのアドレスバーに入力すると、WSL(この場合はUbuntu)の / を開くことができます。

\\wsl$\Ubuntu

Ubuntuを16.04や18.04など複数のバージョンをインストールして使っている場合は、バージョン番号が必要かもしれません。(未検証です。。。)

また「\\wsl$\Ubuntu\home\sample」などでWSL上のホームディレクトリをエクスプローラーで開くことができて、意外と便利です。

WSLのコマンドラインからエクスプローラーを開く

Windows TerminalやPowershellでWSLを開いているときに下記のコマンドで今開いているディレクトリをエクスプローラーで開くことができます。

$ explorer.exe .

どちらもWindowsのアプリでWSL2上のファイルを開きたいときにけっこう使えると思うので、ぜひご活用ください。


以上、WSL2をWeb開発環境として使うときにおすすめな設定についての解説でした。

まだ比較的新しい仕組みなので、今後さらに良くなっていくことが期待できそうで楽しみですね。

「WSL2にしたけどパフォーマンスが出ていない」と感じる方や「これからWSL2を導入しよう」という方の参考になれば幸いです。

この記事もおすすめ