はじめに

こんにちは！エンジニアへの転職を目指している伊藤です！
今回学習でLaravelを使用するにあたり、Laravel Sailで開発環境を構築したので、備忘録も兼ねて構築手順を記事にまとめます。

前提環境

OSはWindows11
「WSL2(Ubuntu)」と「Dockerデスクトップ」のインストール・各種設定済み
テキストエディタは「Visual Studio Code」を使用

Laravel Sailとは

Laravel Sail（ララベルセイル）は、Dockerを使った開発環境です。
本番環境と同様、Unix系で開発環境を構築できます。

Laravel Sailで環境構築するとLaravelを使うために必要なものを一気に用意できるのがメリットです。

Laravel公式マニュアルのインストールの章でも、Laravel Sailが紹介されています。

ただし、トラブルが起こった場合には、Dockerの知識が必要になるため注意が必要です。

開発環境の構築手順

Laravel Sailでプロジェクト作成

1. 「Dockerデスクトップ」を起動します

2. Ubuntuを起動し、下記コマンドを実行します
※[プロジェクト名] には作成するプロジェクトの名前を入力してください

curl -s https://laravel.build/[プロジェクト名] | bash

3. プロジェクト作成が完了したら、画面の指示に従って、下記コマンドを実行します
※[プロジェクト名] には作成したプロジェクトの名前を入力してください

cd [プロジェクト名]
./vendor/bin/sail up -d

4. ブラウザに http://localhost/ を表示させます
Laravelのトップ画面が表示されればプロジェクトの作成は成功です

5. 作業をやめる場合は、下記コマンドを実行します

./vendor/bin/sail stop

phpMyAdminとの連携

Laravel Sailは、デフォルトでMySQLが使えるようになっています。
ただし、そのままでは視覚的にテーブルを見られないので、phpMyAdminと連携して、ブラウザ上でデータベースを確認できるようにします。

1. Ubuntu上で下記コマンドを実行し、起動しているLaravel Sailを止めておきます

./vendor/bin/sail stop

2. プロジェクトの中の「docker-compose.yml」ファイルを開きます

3. mysqlの設定の後に、phpMyAdmin用の設定を追記します
※インデントの位置や追記する場所によってはエラーになるので、注意してください。

下記コードを「docker-compose.yml」ファイル内に追記します

    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        links:
            - mysql:mysql
        ports:
            - 8080:80
        environment:
            MYSQL_USERNAME: '${DB_USERNAME}'
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            PMA_HOST: mysql
        networks:
            - sail

追記後のイメージです

4. 「.env」ファイルを開き、データベースの設定を確認します

5. Ubuntuに戻り、Laravel Sailを再度起動します

./vendor/bin/sail up -d

6. ブラウザに http://localhost:8080/ を表示させます
phpMyAdminのログイン画面が表示されれば連携は成功です

認証機能のインストール（適宜）

Laravel Sailでは、Laravel Breezeパッケージをインストールして、手軽にユーザー登録・ログイン画面を搭載できます。

1. Laravel Sailを起動します

./vendor/bin/sail up -d

2. プロジェクトの場所で下記コマンドを実行し、Breezeパッケージをインストールします

sail composer require laravel/breeze --dev
sail artisan breeze:install

3. 設定のための質問が3つ順番に出てくるので、ご自身の希望に応じてそれぞれ選択します

4. 最後に下記メッセージが表示されれば、インストールは成功です

5. マイグレートを行って、データベースにテーブルを追加します

sail artisan migrate

6. ブラウザに http://localhost/ を表示させます
Breezeがインストールされると、右上に「Log in」「Register」メニューが表示されます

7. 「Register」をクリックすると、登録画面が表示されます

初期設定

最後に、「タイムゾーン」「言語」「警告メッセージ」の日本語化を行います。
今回は、askdkc/breezejpパッケージをインストールして、上記3つの設定を自動で行います。

1. askdkc/breezejp パッケージをインストールするために、下記コマンドを実行します

composer require askdkc/breezejp --dev
php artisan breezejp

2. 「config/app.php」ファイルを開き、タイムゾーンが「Asia/Tokyo」、言語が「ja」にそれぞれ変更されていることを確認します

3. ブラウザに http://localhost/ を表示させ、右上の「Register」をクリックします
登録画面が日本語化されていることを確認します

おわりに

今回は、Laravel Sail と Laravel Breeze を使用して開発環境を構築する手順をまとめました。今後、より便利なパッケージ等があれば追記していこうと思います。
ここまでお読みいただきありがとうございました。