Larave9＋React＋Vite＋Breeze（Inertia） sailを使って環境構築してみた

はじめに

初めての投稿です。
Larave9＋React＋Vite＋Inertiaの構成でアプリを作ろうと思い、テストがてらsailを使って環境構築してみました。何度もエラーが出て苦戦したので、同じような構成でアプリを作ろうとしている方の参考になればと思い投稿してみました。

php8.0.24
Laravel 9.33.0
React 18.2.0
vite 3.1.4
※今回の環境構築ではmacOS Catalina10.15.7で行いました。

参考記事
Laravel sail を使って Laravel9 の環境構築を行う
Laravel Sail 導入時に発生したエラーと解決方法

1.Laravel のプロジェクトを作成する

$ curl -s https://laravel.build/laravel-example | bash

# laravel-exampleの部分は任意のプロジェクト名

※私の場合、ここで以下のコマンドを打たないとエラーが出ました。

$　export DOCKER_CONTENT_TRUST=0

2.エイリアスの設定

$ alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

これで

$ sail up -d

だけでsailを起動することができます。

3.envの設定

以下の行を.envに追加します。

.env

APP_SERVICE="laravel.test"

# docker-compose.ymlのコンテナ名と合わせる必要がある

WWWUSER=1000
WWWGROUP=1000

4.docker-compose.ymlの書き換え（phpのバージョンを変える場合）

docker-compose.yml

version: "3"
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.0 # 8.1から8.0に変更
            dockerfile: Dockerfile
            args:
                WWWGROUP: "${WWWGROUP}"
        image: sail-8.0/app　# 8.1から8.0に変更
        extra_hosts:
            - "host.docker.internal:host-gateway"
        ports:
            - "${APP_PORT:-80}:80"
            - "${VITE_PORT:-5173}:${VITE_PORT:-5173}"
        environment:
            WWWUSER: "${WWWUSER}"
            LARAVEL_SAIL: 1
            XDEBUG_MODE: "${SAIL_XDEBUG_MODE:-off}"
            XDEBUG_CONFIG: "${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}"
        volumes:
            - ".:/var/www/html"
        networks:
            - sail
        depends_on:
            - mysql
            - redis
            - meilisearch
            - mailhog
            - selenium
  
    〜以下略〜

phpのバージョンを変更した場合、composerのバージョンも変更する必要がある。

$ sail up -d
$ sail shell
$ composer config platform.php 8.0.24 # 今回のバージョンの場合
$ composer update

5.変更したファイルの反映

ここで以下のコマンドを打つ。
※参考記事　https://laracasts.com/discuss/channels/laravel/groupadd-invalid-group-id-sail

$ sail down --rmi all  
$ sail up

6.Breezeのインストール

$ sail composer require laravel/breeze --dev
$ sail php artisan breeze:install react
$ sail npm install 
$ sail npm run dev

おまけ

phpmyadminをインストール

docker-compose.yml

〜略〜
phpmyadmin:
        image: phpmyadmin/phpmyadmin
        links:
            - mysql:mysql
        ports:
            - 8080:80
        environment:
            #PMA_USER: "${DB_USERNAME}"
            #PMA_PASSWORD: "${DB_PASSWORD}"
            PMA_HOST: mysql
        networks:
            - sail
〜略〜

最後に

本記事を読んでいただきありがとうございます。自分のための備忘録的な記事になってしまいましたが、何かひとつでもお役に立てていれば幸いです。
Qiitaで記事を書くのは初めてのことだったのですが、楽しんで書くことができました。なにか学びがあったときはまた投稿したいと思います。