もう迷わない！Windows + Laravel Sail(Docker)で動作が遅くならない開発環境構築 Windows10 Home対応
概要
(2023-02-11更新)
この記事はプログラミング初学者やLaravel + Dockerでの環境構築にお困りの方に向けた環境構築に必要な作業をまとめた記事です。
便利なLaravel Sailですが、WSL(Windows Subsystem for Linux)のHomeの方にLaravel Sailのファイルを置かなかればならないところが分かりづらく、「初めてLaravel Sailで開発環境構築を行う方がアプリの動作が遅いまま構築してしまうのでは？」 と思ったので、その部分も含めて色々とまとめた記事にしようと思いました。
主に公式ドキュメントのリンクを使用し、必要と感じた部分を補足する形で手順の解説を入れます。
前提
GitはGitHubを使用します。また、操作が簡単になるようにSourcetreeを使用します。
2023/02/11 追記
Sourcetreeのインストール、導入手順をまとめました。WSLを利用する上で起こるエラーの対処も書いてあります。Sourcetreeの導入で困ったらぜひ参考にしてみてください😎
2023/02/12 追記
VSCodeのオススメ拡張機能の記事を追加しました。（IT初学者向けの記事です）
絶対に開発が捗りますので、ぜひ参考にしてみてください🍫
1. WSL2の有効化・Ubuntuインストール・Dockerの設定
1.Windows バージョン確認
2.Power Shell 管理者モード
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
3.PC再起動
4.wsl_update_x64.msiパッケージをダウンロードしてセットアップ作業
5.Power Shell 管理者モード
wsl --set-default-version 2
6.Linux(Ubuntu)をインストール
7.Ubuntuアプリケーションを起動して、ユーザー名とパスワードの設定
8.Power Shell でデフォルトの設定
wsl --set-default Ubuntu-20.04
9.Dockerのインストールとセットアップ
10.設定の確認
wsl --list --verbose
概要は以上です。以下の詳細手順に沿って導入してください。
WSLとUbuntuの設定
以下の公式リンクの手順1～手順6までを実施してUbuntuのインストールを行います。
デフォルトの設定
Power Shell
wsl --set-default Ubuntu-20.04
(確認コマンド)
wsl --list --verbose
Ubuntu20.04に*がついていて、VERSIONが2になっていること
Dockerの設定
Docker を使用してリモート開発コンテナーを設定する
の項目まで行えたらOKです。
Dockerの設定の公式リンクの項目3.の項目の補足
[設定][全般] で、[Use the WSL 2 based engine](WSL 2 ベースのエンジンを使用する) がオンになっていることを確認します。
Windows10 Homeの場合チェック部分が非活性になって薄くなっていて見づらいですが、薄くてもチェックONになっていれば問題ありません。
また、Ubuntu 20.04のトグルもONにしておきます。
設定の確認
wsl --list --verbose
Ubuntu-20.04に*がついていて、Ubuntu-20.04, docker-desktop, docker-desktop-dataが全てRunningであることを確認する
2. GitHubでリポジトリの作成
このあたりはお好みですが、今回の解説では、以下のディレクトリ構成でプロジェクトを作ります。
project(root 本解説ではsandbox2というディレクトリ名) /
├─ src /
├─ docs /
├─ README.md
├─ (... その他ディレクトリ) /
リポジトリの作成
3. Sourcetreeでclone
「これくらい分かるよ！」という方も多いかもしれませんが、LaravelをDockerで起動する際の大事な下準備になりますので、要注意です！
クローンするGitリポジトリのURLを貼り付け。
クローン先のディレクトリ（C:\Users\XXXX）の変更をするので、横の参照を押します。
エクスプローラーのアドレス部に\\wsl$と入力してエンターを押すと以下のフォルダ表示になります。
Ubuntu20.04→home→<ユーザー名>とWindowsの標準的な操作で移動し、作成したいフォルダ名でprojectフォルダを作成し、そのフォルダを選択します。以下のような表示になると思います。
「クローン」ボタンを押して、cloneします。
cloneの完了後は以下の表示
\\wsl$で入って辿ったclone先のフォルダ
補足
GitHubからcloneする際のドキュメント。トラブルシューティングも載っています。
4. Sailを利用してLaravelインストール
ここからも大事です。この記事の「3. Sourcetreeでclone」の手順をスキップした方も、以下の手順でLaravel Sailのインストールを進めていただければと思います。
Ubuntuアプリの起動
Windowsの検索で「Ubuntu 20.04 LTS」を検索します。
起動します。
前の手順で作成したprojectのディレクトリにcdコマンドで移動します。(例:cd sandbox2)
(ソースのみをプロジェクトで管理する場合は、上記のcdコマンドは不要です。)
Laravelインストール
あとはLaravel公式ドキュメントに載っているコマンドの一部を変更して進めます。
移動したら以下のコマンドを実行します。/src部分は任意に変えてください。
curl -s https://laravel.build/src | bash
終了間際に以下のようにUbuntu側のユーザーのパスワード入力を求められる。
Please provide your password so we can make some final adjustments to your application's permissions.
[sudo] password for <ユーザー名>:
打った文字は一切表示されないが、パスワードをしっかり入力してエンターキーを押す。
以下のようなメッセージが出たらOKです。
Thank you! We hope you build something incredible. Dive in with: cd src && ./vendor/bin/sail up
.env、docker-compose.ymlの確認
sail upする前に、.envで設定を変えたり、docker-compose.ymlから不要なコンテナを消すなら先に編集しましょう。.envの内容でコンテナが作成されるのでDB設定を変更したい場合は先に編集します。
DB_HOSTはmysqlという値にしておくことをお勧めします。以下はサンプルです。
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=sail
DB_PASSWORD=password
編集が終わったら、Ubuntu 20.04 LTSアプリのターミナル上で
cd src
Docker Desktopが正常に起動している状態で
./vendor/bin/sail up -d
動作確認
ブラウザのURL入力部にlocalhostと打ってエンターキーを押して、Laravelのデフォルトのwelcome画面が出たらOKです！
コミット＆プッシュしておきましょう！
5. sailエイリアスの設定
sailは/vendor/binのフォルダに入っているため、docker-compose upにあたるコマンドを実行するためにイチイチ./vendor/bin/sail upと打たなくてはならず、面倒です。
開発するにあたって、エイリアスを記述しておくと、Sailを使用しないDocker + Laravelと遜色ない（むしろ便利かも？）くらいに開発が捗ります。
設定方法はUbuntuのターミナル上で
vim ~/.bashrc
Iキーを押すとINSERTモードになりますので、最下部など適当な場所に
alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'
を追記。EscキーでINSERTモードを抜けて:wq→エンターキーで保存して終了します。
~/.bashrcに記載したコマンドを反映させます。
source ~/.bashrc
./vendor/bin/sail up -dの代わりに
sail up -d
とコマンドを打ってみましょう。
コマンド自体が無いよ！とエラーにならなければ、エイリアスの設定は完了です。
他にもsail artisan migrate、sail artisan key:generate などartisanコマンドを試しに打ってみましょう!
(Tips) Permission denied系のトラブルシュート
コミットする際に、.git/index.lock: Permission deniedといった内容で権限エラーが発生する場合があるようです。
.gitが存在するディレクトリにcdで移動して、オーナーの変更
sudo chown -R <owner>:<group> .git
<owner>:<group>部分は基本的にはUbuntuのユーザー名になるかと思います。例:natsume3:natsume3
次いでパーミッションの変更
sudo chmod -R 775 .git
また、パッケージをcomposerやnpmなどからイントールした際にも一部のファイルのオーナー、パーミッションが異なってインストールされ、編集できなくなる場合があります。
ディレクトリやファイル名などの指定を変えて、上記の流れで解消していただければと思います。
(Tips) VSCodeのリモート接続
VSCodeの拡張機能Remote - WSLをインストールします。
公式のVisual Studio Code の使用には、Remote Developmentの拡張機能が紹介されていますが、WSLだけであれば、Remote - WSLだけで十分です。
あとはUbuntuアプリのターミナルの開きたいプロジェクト上でcode .と打てばVSCodeが開きます。WSL:UBUNTU-20.04となっていることを確認します。
WSLリモート接続するとXdebugを使用するのがちょっと難しくなります （記事をそのうち書きます） 書きました！🎉
補足
拡張機能はリモートWSL側にも適用が必要です。LOCALとWSL:UBUNTU-20.04側で分かれているということです。
VSCodeがよしなにインストール先の案内をしてくれますので、難しい話ではないと思います。
お試しにLaravel Extention Packを入れてみるといいと思います。
終わりに
開発環境手順まとめは以上になります。
良い記事でしたら、応援コメント・お布施などいただければ今後の励みになりますので、よろしくお願い致します🙏
次回は、「Laravel sailでcloneして共同開発手順まとめ」を書く予定です。 書きました！🎉
良いLaravel開発を！
2022-01-30 追記
共同開発者用の環境構築手順の記事を書きました！
共同開発をする方（環境構築の指示をする方）の環境構築手順の参考になれば幸いです。
より良いLaravel開発を！
おまけ
A5SQL Mk-2におけるDB接続確認方法とトラブルシュートを記事にしました。.envの構成を間違えた方も参考になるかと思います。
Discussion
curl -s https://laravel.build/src | bash
上記コマンドですとLaravel９がインストールされますが、ver.8をインストールする方法はあるのでしょうか？
こんにちは！ anonさん
コメントに気付くのが遅くなってしまい申し訳ありません。
結論としましては、
curl -s https://laravel.build/src | bashだと最新verを落としてくるようなので、 代用として下記の手順でdockerでcomposerを一時的に使用した形のインストール手順が良いのではないかと思います。（Ubuntuに対してcomposerのインストールが不要なのが良い点かなと思います。）手順
（wslでdockerが利用できてステータスが
runningであることを前提としています）cdで移動する補足説明
公式：既存アプリケーションでComposer依存関係のインストール
のような形でcomposerを一時的に使用して、
公式：Composerでのインストール
を組み合わせたものとなります。
実行の様子
Laravelソースがあるディレクトリにcdコマンドで移動して、
sail up -dした後にLaravel Framework 8.83.8と表示されました。細かい調整もある程度効くかと思います。
精査はできておりませんので、お試し頂いて、ご指摘・感想などのご返信ありましたら、とても嬉しいです。
ご返信いただき感謝です。
すでにLaravel9にて作業を進めてしまったので、時間のある時にテストしてみようと思います。
うーんなぜかそのコマンドではうまく走らないです。
こちらはwindowsのbashでやってますが、もしかしてMacでしょうか？
あ、WSLでやらないとダメなのかな
WSLで実行しています
2022/10/28
XDebug適用方法の記事を書きました！
記事内にもリンクを追加しています。