Laravel10 + Inertia + React + Sailで環境構築

環境
・Mac
・VSCode

Docker Desktopがインストールされた状態を前提としています。

まずはLaravelアプリケーションを作成します。

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

Laravel公式

「example-app」部分はお好きなプロジェクト名に変更できます。

VSCodeで上記で作成されたディレクトリを開きます。（今回だと「example-app」ディレクトリ）

私はVSCode内のターミナルを使用しているので、今回はその方法で進めていきます。

ターミナルで次のコマンドを入力し、Dockerコンテナを開始します。

$ ./vendor/bin/sail up

Laravel公式

無効なURLです

localhost

にアクセスしてLaravelの画面が出ていたら成功です。

ここでコマンドを短縮できるように設定を行っておきます。

（一旦 control + Cで抜けてください）

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

Laravel公式

これで今までは「./vendor/bin/sail」と打っていたものが「sail」で済ませることができます。

以下コマンドで再度Dockerコンテナを開始します。

$ sail up

Laravel公式

次にReactのインストールを行います。

まずはLaravel Breezeのインストールからです。

$ sail composer require laravel/breeze --dev

Laravel公式

Dockerを使用するので「sail」を付けるのを忘れないでください。

そしてReactをインストールします。

$ sail artisan breeze:install react --ssr

Laravel公式

最後にテーブルのマイグレーションとフロントエンドセットをコンパイルして終了です。

$ sail artisan migrate
$ sail npm install
$ sail npm run dev

Laravel公式

私の場合はsail npm run devで以下のエラーが出て進まなくなったので解決策も載せておきます。

segmentation fault

上記は色々な記事が出てきましたが、私はnodeのバージョンを下げることで解決しました。

docker-compose.ymlファイル中の、build.args定義を変更します。

(NODE_VERSIONがない場合は追加してください)

build:
    args:
        WWWGROUP: '${WWWGROUP}'
        NODE_VERSION: '16' ←ここに使用したいバージョンを記載する

Laravel 9.x Sail環境でNodeのバージョン変更を行う

コンテナイメージを再構築します。

$ sail build --no-cache
$ sail up

Laravel 9.x Sail環境でNodeのバージョン変更を行う

バージョンを確認して、バージョンが切り替わっていたら成功です。

$ sail node -v

以下コマンドを実行できるようになりました。

$ sail npm run dev

この後私はphpmyadminをインストールしました。

docker-compose.ymlを以下のように修正

services:
    laravel.test:
...
    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        links:
            - mysql:mysql
        ports:
            - 8080:80
        environment:
            #PMA_USER: "${DB_USERNAME}"
            #PMA_PASSWORD: "${DB_PASSWORD}"
            PMA_HOST: mysql
        networks:
            - sail
...

【Laravel Sail】phpMyAdminをインストール

以下コマンドでDockerコンテナを再起動します。

$ sail up

下記URLにアクセスします。

http://localhost:8080/

phpmyadminのログイン画面が表示されると成功です。

ログインは.envに書かれている下記情報でログインできます。

DB_USERNAME=sail
DB_PASSWORD=password

また、毎回ログインするのは面倒な場合は上記docker-compose.ymlの以下のコメントを外すとphpmyadminへ自動ログインできます。

#PMA_USER: "${DB_USERNAME}"
#PMA_PASSWORD: "${DB_PASSWORD}"

ですが、この方法は必ず開発環境のみとしてください。

最後にvite.config.jsに以下を追記してください。

こちらを記述することでhttp://localhostにアクセスできるようになります。

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.jsx",
            ssr: "resources/js/ssr.jsx",
            refresh: true,
        }),
        react(),
    ],
    // ここから
    server: {
        host: "0.0.0.0",
        hmr: {
            clientPort: 5173,
            host: "localhost",
        },
    },
    // ここまで
});

以上で環境構築は終了です。

お疲れ様でした。