🎃

Windows10におけるLaravel Sailの最適な開発環境の作り方(WSL2 on Docker)

2 min read

Windows10でLaravelの開発環境を作るのに色々苦労したのでまとめます。

結論は、WSL2のLinux上にDockerをインストールしてLaravel Sailを使うのがよいです。リロードもnpm run watchも動作快適です。

(述怪しいとこあったらつよつよエンジニアさんコメントで教えて~)

下準備

以下をインストールしましょう。

  • WSL2(参考記事:Windowsのバージョンでインストールの仕方が異なるので、こちらも参照すべし)
  • WSL2にDocker(参考記事:ここの「9. Ubuntu 20.04 をアップデートする」から「12. Docker デーモンを起動」まで)

この記事では、Ubuntu 20.04 LTSをWSL2で動かしている時の話です。(Docker for Windowsは使わない)

Laravel Sail のインストール

WSL2上でdockerが起動している状態にしましょう。

ディレクトリは、WSL2のhomeディレクトリでやりましょう。他のディレクトリだと遅くなるらしい。

Windowsのエクスプローラーのディレクトリは以下です。

\\wsl$\Ubuntu-20.04\home

Sailインストールのコマンド(WSL2のLinux上で)

「sample」は任意のプロジェクト名。

cd \\wsl$\Ubuntu-20.04\home
curl -s https://laravel.build/sample | bash
cd sample
./vendor/bin/sail up -d

これで、http://localhost/ にアクセスできれば成功です。LaravelのTOP画面が表示されます。

もし、パーミッションエラーが出ていれば、

docker ps
↑これで起動中のdockerコンテナ一覧が表示されるので、その中のSailのコンテナIDをコピペ
docker exec -it コンテナID bash
chown -R sail:sail ./

強引ですが、これでパーミッションエラーが外れる。(npm i の時にもパーミッションエラーがでたので、全部いれた。 p.s いい解決方法あったらコメントあると嬉しい)

これでLaravel Sailの環境は完成なり。

あと、sailのエイリアスを通しておこう。

 vim ~/.bashrc

でVimエディタで

# Laravel Sail Command Alias
alias sail="./vendor/bin/sail"

を、一番上か下にでも入れて保存。
最後に再読み込み。

source ~/.bashrc

Vimエディタが分からん人は、それをググろう。

ちなみにLaravel Sailを落とすときは、

sail stop

これでシャットダウン。
他のsailコマンドは以下のリンクで。

https://readouble.com/laravel/8.x/ja/sail.html

自分のPCだと80msぐらいでLaravelのデフォルトのTOPのリロードが完了する

CPU:intel i7 の9世代だったかな?
メモリ:16GB(8GB * 2)
SSD

WSL2上でSailを使う理由:Windows10上でLaravel Sailが動かなかった

自分だけかもしれませんが、Windows10だと

curl -s https://laravel.build/sample | bash

これが通らなかった。色々やったけど無理だったので、WSL2上でやった。
ちなみに、Windows10上でDockerするよりも、WSL2上でDockerした方が動作がかなり早いので、それもWSL2上で使う理由の1つ。

Windows上のDockerでLaravel作った時に、ものすごく重く使い物にならなかった。

感想

Windows10でLaravel環境構築作るのに結構戸惑い、ここの内容を見つけるまで夜が2日潰れた。

  • Windows10 Docker で Laravel → 速度がおそい
  • Laravel Sailで試す → なぜかこける
  • WSL2上で試す → パーミッションエラー sail npm i でも同じエラー
  • 解決して、メモを書く ← いまここ

色々学びは得たが、作りたいものがあったのに作れる足踏みをしてしまったので、この記事が同じことで困ってる人の役に立つことを願います。

あと、Windwos10でのDocker動作が遅くて使い物にならないと思うのは自分だけかな...

Discussion

ログインするとコメントできます