🙆

【Monolithic】Laravel + ReactでWebアプリケーションを作る

2024/11/22に公開

Docker

Laravel11の解説が欲しかったので、自分がやったことのメモ。

環境

PHP 8.3.12 (cli) (built: Sep 24 2024 18:08:04) (NTS)
Laravel Framework 11.33.2
react 18.2.0
typescript 5.6.3
tailwindcss 3.2.1
Breeze

Laravel sailで環境構築

これまではyamlファイルをなんとかこねくり回して作っていたものの、エラーも多くて何回も泣きを見てきました。でもLaravel sailはyamlファイルなしでDocker環境を作ってくれるのでとてもいいです。

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

カレントディレクトリの直下にapp/が作成されます。appの部分は適宜名前を変更してもOK。

cd app/　//自分の用意したディレクト名
./vendor/bin/sail up -d

-dをつけないとdocker compose同様ターミナルが占拠されるので注意。
そしてこの時点では高確率でhttp://localhost/でエラーが起きています。

SQLSTATE[42S02]エラーはGPTに聞いちゃダメ

SQLSTATE[42S02]: Base table or view not found: 1146 Table 'laravel.sessions' doesn't exist

自分のhttp://localhost/にはこのエラーが出ていました。
この対応はこのサイトのコマンドを参考にして解決。

./vendor/bin/sail artisan migrate

要は、artisan migrateして、テーブルを作成しちゃえば解決です。
それでも解決しないときはこちらも確認↓

ちなみにGPTに質問すると、下記の手順をおすすめされます。

php artisan session:table
php artisan migrate

php artisan migrateはinfoが出て成功するのに、このときはエラーが残ったままでした。
php artisan migrateと./vendor/bin/sail artisan migrateは似て非なるものと理解。
キャッシュのせいかな？と思ってdocker-compose down --volumesまでしてしまい、Dockerの履歴をきれいに無くした、私のしかばねをみんなは超えて下さい。

Breezeで認証機能を簡単に付与

./vendor/bin/sail composer require laravel/breeze --dev
./vendor/bin/sail artisan breeze:install react --typescript

これも一瞬でインストールできました。
react --typescriptなnpxの時と書き方が紛らわしいので要注意です。もちろん、--typescriptがないと.jsxになります。

Inertiaとは

参考サイトでは下記のような説明があります。
Inertiaはフロントエンドとバックエンドを繋ぐ橋のような機能なんですね。本来なら設定を細々しない溶けないけど、、BreezeならインストールついでにInertiaも設定済みにしてくれるってことことかと解釈しました。違ったら誰かご指摘ください。

今回はフロントエンドに React を使います。その場合、Inertiaというツールを使うと、フロント側（React）とバックエンド側（Laravel）の連携を自動で行ってくれます。Inertiaを導入する場合は色々と設定しなければいけないことがあるのですが、Laravel Breezeのスターターキットを使うと、それら諸々の設定も自動で行ってくれるのでさらに便利です。
https://qiita.com/Sho-taro/items/820e4117c5b5f4c6717f

sailコマンドを使うときはインストールが必要

少し脱線しますが、Laravelアプリを作ろうとして必ずこれを忘れるのでメモしておきます。

% sail artisan breeze:install react
zsh: command not found: sail

もし上記のようなnot foundが出た下記のコマンドでインストール＆エイリアスを通します。

composer require laravel/sail --dev
alias sail='[ -f ./vendor/bin/sail ] && ./vendor/bin/sail || echo "Sail not found"'

これでsailコマンドが使えるようになります。

インストール完了

localhostの右上にloginとregisterが現れたら完了です。

ファイルも全てtsxまたはtsで制作されています。

一度jsxで構築してしまうと後から変更が面倒なので、消して作り直した方が早いです。
強いエンジニアだと、「その状態から立て直してこそエンジニアだろ！」と怒るかもしれませんが、タイパが悪いので！！！！サーセン！！！！っとエア謝りしながらコーディングに進もうと思います。