これはLaravel10の開発環境構築に関する記事です。
2024/03/13にLaravel11がリリースされました。
Laravel11の開発環境構築に関しては次の記事をご覧ください。
この記事のゴール
- Laravel10.xをローカルPCにインストールする。
- http://localhost/ でブラウザアクセスできるようにする。
- Laravel Dusk を使ってブラウザテストが通るようにする。
- Laravel Telescope を使って通信データを確認できるようにする。
前提条件
- インターネット環境：100MB以上のファイルダウンロードに支障がない。
- UbuntuでCLIが使える状態。(ここではWSL2経由でUbuntu22.xを使っています。)
- Dockerが使える状態。（Ubuntu上でdockerのサービスが起動している状態。）
※筆者の環境はWindows10Home、WSL2＋Ubuntu22.x、Docker Desktopです。
※この場合、Docker Desktopを起動するとUbuntu上でdockerサービスが起動します。
※Ubuntuを使っていますが、たぶんLinuxならなんでもいけると思います。
プロジェクトフォルダ構成
Laravelインストール後のプロジェクトフォルダ構成のイメージです。
work/ （開発作業用フォルダ） └webapp/（プロジェクトトップ：この下にLaravelのファイル群が展開されます。） ├app/ ├bootstrap/ ├config/ ├database/ ├public/ ├resources/ ├routes/ ├storage/ ├tests/ ├vendor/ ├artisan ├（以下略）
プロジェクトフォルダを作成する場所へ移動
[webapp] フォルダを作成するための場所へ移動します。
作業場所を作って移動するにはUbuntuのCLIで
次のコマンドで作業フォルダを作って移動してください。
mkdir work
cd workLaravel10.x インストール
次のコマンドでインストールを実行します。
curl -s https://laravel.build/webapp?with=mariadb,mailpit,selenium | bash実行が始まると、ファイルのダウンロードと環境構築に時間がかかります。
ネット環境とローカル環境の性能にもよりますが、数十分は覚悟しましょう。
筆者の環境では５０分掛かりました。
ここでURLの解説をしておきます。待っている間に確認してください。
このサイトはLaravelインストール用のShellスクリプトを提供する専用のサイトです。
この後ろにオプションを指定すると、それに対応したスクリプトを出力してくれます。
試しに、次のURLにブラウザでアクセスしてみると、Shellスクリプトが表示されます。
まずは、作成するプロジェクト（フォルダ）の名称を指定します。
ここでは [webapp] を指定しています。自分の好きな名称を指定できます。
次に、「?」の後ろにインストールするサービスの指定ができます。
URL部分の「?」以降を省くと豪華フルセットでインストールされるので、
ローカル環境のスペックが低いとメモリ等がパンクしてまともに動きません。
筆者のPCはメモリ8GBですが、メモリスワップが発生して止めるのも大変でした。
ここでは筆者のような貧弱環境でも動くように、
mariadb、mailpit、seleniumだけを指定しています。
指定できるサービスは、
mysql, pgsql, mariadb, redis, memcached, meilisearch, minio, selenium, mailpit
です。
インストールの最終段階でsudoのパスワードを求められるので入力しましょう。
次のメッセージが表示されたらインストール完了です。
コンテナ起動
sail というツールを使ってコンテナ群を起動します。
インストール完了時に表示されているように、次のコマンドでコンテナを起動してください。
cd webapp
./vendor/bin/sail up
初回起動時は初期化作業で数分掛かります。
次のような表示になり、文字出力が落ち着いたら起動完了です。
このターミナルは、コンテナを停止させるまでは放置しておきましょう。
※このターミナルで、[Ctrl] + C を入力することでコンテナを停止できます。
※コンテナを停止せずにこのターミナルを閉じた場合、
※Docker Desktopのコンテナ右側の四角い停止ボタン「■」で停止できます。
※間違って削除しないように注意しましょう。
別の作業をする場合は新しいターミナルを開いて作業をしましょう。
正常に起動しているかどうかはDockerで確認すると確実です。
筆者の場合はWindowsのDocker Desktopで確認しています。
ここですべて「Running」になっていれば正常起動しています。
UbuntuのCLI上でコマンドでも確認できます。
docker ps
「STATUS」が「Up」になっていればOKです。
ブラウザで確認
ブラウザのアドレスバーに「localhost」と入力して
次のようなLaravelデフォルトの画面が表示されていれば成功です。
Laravel Dusk インストール
Laravel Dusk をインストールすると、
Seleniumを使ったブラウザ自動テストを行うことができます。
Laravel Dusk はインストール時に設定ファイル等の書き換えをするので
初期段階でインストールしておきましょう。
新しく開いたターミナルのUbuntu CLIで次のコマンドを入力し、sail-shell に接続します。
./vendor/bin/sail shell
この状態で次のコマンドを入力して、開発環境にLaravel Duskをインストールします。
composer require --dev laravel/dusk
10秒程度で完了します。
さらに次のコマンドを入力して、Laravelで使えるようにします。
php artisan dusk:installChromeDriverのダウンロードに数分時間が掛かるので気長に待ちましょう。
次の状態になれば、Laravel Duskのインストール完了です。
Laravel Dusk でデフォルトのブラウザテスト実行
インストールしたLaravel Duskが正常に機能するか、デフォルトのテストを実行して確認します。
sail-shellとはまた別のターミナルを開いて次のコマンドを実行してください。
./vendor/bin/sail dusk次のような画面になればブラウザテスト成功です。気持ちの良い all green の状態です。
Laravel Dusk のブラウザテストでは、ブラウザ上にWEBサイトが表示された状態の
テストを行うことができ、PHPでテストコードを書くことで画面の自動操作を行う
ことができます。また、その際の画面の状態を画像として保存することもできます。
Laravel Telescope インストール
Laravel Telescope は、WEBサイトへのアクセスの内容や結果、DBへのアクセスの内容や結果、
バッチ処理の実行結果などを監視・記録し、ブラウザ上で内容確認できるツールです。
便利な反面、情報が洩れると大変なので、ここでは本番環境用には設置せず、
開発環境用にインストールします。
先程の sail-shell に接続した状態で次のコマンドを入力してください。
composer require --dev laravel/telescope
インストールは20秒程度で終わります。
次のコマンドを入力して、Laravelで使えるようにします。
php artisan telescope:installこれは瞬殺です。
Laravel Telescopeはデータベースを使うので、データベースの初期化をしましょう。
次のコマンドを入力してください。
php artisan migrate
これは数秒で終わります。
Laravel Telescopeのインストールは完了です。
Laravel Telescope をブラウザで確認
ブラウザのアドレスバーに「localhost/telescope」と入力して表示させてみましょう。
Laravel Telescope データ削除の設定
Laravel Telescope は便利な反面、短期間で大量のデータを蓄積するので、
データベースの容量を圧迫しないように定期的にデータを削除する設定が必用です。
webapp/app/Console/Kernel.php
を編集して、「function schedule」の中に次のコードを追記してください。
$schedule->command('telescope:prune')->daily();
fruitcake/laravel-telescope-toolbar インストール
これはサードパーティーのツールですが、
ブラウザの下隅にLaravel Telescopeの情報が表示されるので、
ブラウザのタブ操作が不要となり、使い勝手が良いものです。
sail-shell に接続した状態で次のコマンドを入力してください。
composer require --dev fruitcake/laravel-telescope-toolbar
20秒程度で終わります。
ブラウザで確認
ブラウザのアドレスバーに「localhost」と入力してアクセスしましょう。
ブラウザウィンドウの下隅にLaravel Telescopeのツールバーが表示されていると思います。
自動テスト実行
最後に、一応PHPUnitの自動テストを実行しておきましょう。
次のコマンドを実行してください。
php artisan test
このような画面が表示されます。
自動テスト完了時に、結果が表示されます。
全て「passed」になっていれば、オールグリーン（全てOK）で気持ちよく眠れます。
以上で作業完了です。
開発作業を楽しんでください。
コメント