Laravel（Laravel Breeze） + Next.jsのローカル開発環境構築

今回はMacの以下環境で構築しています。
・M2 MacBook Air
・macOS Sonoma 14.2.1

DockerでLaravelとNext.jsのローカル環境を構築します。

MacにDocker Desktopがインストールされている状態で
以下を読み進めてください。

Laravel SailをベースにDocker環境を構築します。

また、認証機能を実装する前提で、
Laravelの認証パッケージであるLaravel BreezeをAPIモードで使用します。

Next.js側は、Laravel Breezeと連携できるNext.js Editionを使用します。
まず以下コマンドを実行します。

curl -s "https://laravel.build/laravel-nextjs-app" | bash

実行後、ダウンロードなどで少し時間がかかりますので、
コーヒーでも飲みながらお待ちください☕️
完了しましたら、Next.jsのコードをcloneしてください。
cloneしてダウンロードされたファイルの中に
環境変数を設定する.env.exampleというファイルがありますが、
このファイルを.env.localにリネームします。

cd laravel-nextjs-app/

git clone https://github.com/laravel/breeze-next.git frontend

mv frontend/.env.example frontend/.env.local

次に、docker-compose.ymlにNext.js用コンテナの設定を追加します。
また、phpMyAdminでデータを確認したいので、
phpMyAdminのコンテナの設定も合わせて追加しましょう。

frontend:
    image: "node"
    volumes:
        - "./frontend:/var/www/html"
    working_dir: "/var/www/html"
    ports:
        - "3000:3000"
    command: bash -c "npm install && npm run dev"
phpmyadmin:
    depends_on:
        - mysql
    image: phpmyadmin/phpmyadmin
    restart: always
    ports:
        - "5005:80"
    environment:
        PMA_HOST: mysql
        MYSQL_ROOT_PASSWORD: password
    networks:
        - sail

起動してみましょう。

./vendor/bin/sail up -d

初回起動以降はDocker Desktop上で起動/停止しています。

LaravelをAPIモードで使用するため、以下コマンドを実行してください。

./vendor/bin/sail shell

composer require laravel/breeze --dev

php artisan breeze:install api

DBを作成します。
Laravel SailではデフォルトでMySQLを利用する設定になっています。

php artisan migrate

http://localhost/にアクセスすると、
Laravelのバージョンが表示されるようになっていると思います。
これはAPIモードで利用しているためです。

http://localhost/

http://localhost:3000にアクセスすると、
Next.jsで生成された画面が表示されます。

http://localhost:3000

http://localhost:5005にアクセスすると、
phpMyAdminの画面が表示されます。
データの中身を確認したい場合に手軽に確認ができて便利です。

http://localhost:5005

http://localhost:8025/にアクセスをすると、
Mailpitの画面が表示されます。
メールを送信した時に、
この画面上で送信したメールの内容が確認できて便利です。

http://localhost:8025

以上で、Laravel Breezeを利用したLaravel + Next.jsのローカル開発環境が出来上がりました！