🛠️

もう迷わない!Windows + Laravel Sail(Docker)で動作が遅くならない開発環境構築 Windows10 Home対応

2022/01/30に公開約8,200字6件のコメント

概要

(2022-03-20更新)

この記事はプログラミング初学者やLaravel + Dockerでの環境構築にお困りの方に向けた環境構築に必要な作業をまとめた記事です。

便利なLaravel Sailですが、WSL(Windows Subsystem for Linux)のHomeの方にLaravel Sailのファイルを置かなかればならないところが分かりづらく、「初めてLaravel Sailで開発環境構築を行う方がアプリの動作が遅いまま構築してしまうのでは?」 と思ったので、その部分も含めて色々とまとめた記事にしようと思いました。

主に公式ドキュメントのリンクを使用し、必要と感じた部分を補足する形で手順の解説を入れます。

前提

GitはGitHubを使用します。また、操作が簡単になるようにSourcetreeを使用します。

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のインストールを行います。

https://docs.microsoft.com/ja-jp/windows/wsl/install-manual

デフォルトの設定

Power Shell

wsl --set-default Ubuntu-20.04

(確認コマンド)

wsl --list --verbose

Ubuntu20.04に*がついていて、VERSIONが2になっていること

Dockerの設定

https://docs.microsoft.com/ja-jp/windows/wsl/tutorials/wsl-containers#install-docker-desktop

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
 ├─ (... その他ディレクトリ) /

リポジトリの作成

https://docs.github.com/ja/repositories/creating-and-managing-repositories/creating-a-new-repository

3. Sourcetreeでclone

「これくらい分かるよ!」という方も多いかもしれませんが、LaravelをDockerで起動する際の大事な下準備になりますので、要注意です!

クローンするGitリポジトリのURLを貼り付け。

クローン先のディレクトリ(C:\Users\XXXX)の変更をするので、横の参照を押します。
エクスプローラーのアドレス部に\\wsl$と入力してエンターを押すと以下のフォルダ表示になります。

Ubuntu20.04→home→<ユーザー名>とWindowsの標準的な操作で移動し、作成したいフォルダ名でprojectフォルダを作成し、そのフォルダを選択します。以下のような表示になると思います。

「クローン」ボタンを押して、cloneします。
cloneの完了後は以下の表示

\\wsl$で入って辿ったclone先のフォルダ

補足

GitHubからcloneする際のドキュメント。トラブルシューティングも載っています。

https://docs.github.com/ja/repositories/creating-and-managing-repositories/cloning-a-repository

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設定を変更したい場合は先に編集します。
本解説では設定などを何も編集せず、そのまま進みます。(インストール時のままの環境設定値でも基本的には動きます)

そのまま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 など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 追記

共同開発者用の環境構築手順の記事を書きました!
共同開発をする方(環境構築の指示をする方)の環境構築手順の参考になれば幸いです。

https://zenn.dev/na9/articles/e5d70c156ea141

より良いLaravel開発を!

おまけ

A5SQL Mk-2におけるDB接続確認方法とトラブルシュートを記事にしました。.envの構成を間違えた方も参考になるかと思います。

https://zenn.dev/na9/articles/c7c3d4a91e6538

Discussion

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

上記コマンドですとLaravel9がインストールされますが、ver.8をインストールする方法はあるのでしょうか?

こんにちは! anonさん

コメントに気付くのが遅くなってしまい申し訳ありません。

結論としましては、curl -s https://laravel.build/src | bashだと最新verを落としてくるようなので、 代用として下記の手順でdockerでcomposerを一時的に使用した形のインストール手順が良いのではないかと思います。(Ubuntuに対してcomposerのインストールが不要なのが良い点かなと思います。)

手順

(wslでdockerが利用できてステータスがrunningであることを前提としています)

  1. 空のディレクトリを作成しておく(git initなどによるgitリポジトリとの連携はlaravelのインストール後に行ってください)
  2. 空のディレクトリにcdで移動する
  3. 下記のコマンドを実行
docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v "$(pwd)":/var/www/html \
    -w /var/www/html \
    laravelsail/php81-composer:latest \
    bash -c "composer create-project laravel/laravel:^8.0 src && cd src && composer require laravel/sail && php ./artisan sail:install --with=mysql,redis,meilisearch,mailhog,selenium "

補足説明

公式:既存アプリケーションでComposer依存関係のインストール
のような形でcomposerを一時的に使用して、
公式:Composerでのインストール
を組み合わせたものとなります。

実行の様子

Laravelソースがあるディレクトリにcdコマンドで移動して、sail up -dした後に

$ sail artisan --version
Laravel Framework 8.83.8

Laravel Framework 8.83.8 と表示されました。

細かい調整もある程度効くかと思います。
精査はできておりませんので、お試し頂いて、ご指摘・感想などのご返信ありましたら、とても嬉しいです。

ご返信いただき感謝です。
すでにLaravel9にて作業を進めてしまったので、時間のある時にテストしてみようと思います。

うーんなぜかそのコマンドではうまく走らないです。
こちらはwindowsのbashでやってますが、もしかしてMacでしょうか?

あ、WSLでやらないとダメなのかな

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