今までなんだかんだ後回しにしていたシンプルな構成の手順をメモ。
要件
・LaravelをAPI、React(Next.js)をSPAとしてデプロイする。
・それぞれサブドメインで稼働させる。[例]API : api.muchilog.com、SPA：service.muchilog.com
・ログイン機能有り(Cookieベース)
・ReactはNext.js+TypeScript
蛇足ですがJWTはCookieで事足りるなら使わないに越したことはない派です。それではやっていきましょう！
Laravelプロジェクト作成
PHPやComposerのインストールがまだの方は過去記事を参考にしてください。
まずはプロジェクトを作成します。ターミナルにてプロジェクトを作成したいフォルダへcdコマンドを使って移動後、
composer create-project --prefer-dist laravel/laravel cookieApiと入力します。「cookieApi」がプロジェクト名にあたるので、好きな名前に変えてください。
作成が完了したら、cdコマンドでプロジェクト内に移動しサーバをコマンドで起動します。
cd cookieApi
php artisan serve
-- 起動した場合、サーバのアドレスが表示される
INFO Server running on [http://127.0.0.1:8000]. ちなみに127.0.0.1とは自分自身のことを表すIPアドレスです。
ブラウザからアクセスして以下のような画面が表示されたらOK。
ちなみにLaravelのバージョンは10でした。一旦この状態で放置。
[Laravel]ログイン処理実装
まずはLaravelの中でログインができるようにしていきましょう。Laravelにはいくつかの認証パッケージが存在しますが、今回はBreezeを使います。プロジェクトルートに移動して以下のコマンドを実行。
composer require laravel/breeze確認用のUIは必要ないので、Breeze api用のartisanを実行。
php artisan breeze:install apiこのままではMySQLへの接続ができないので、マイグレーションが実行できません。
まずは今回のプロジェクトで使用するDBとログインユーザを作成しておいてください。LaravelプロジェクトをRDBMSへと接続する設定を追加します。.envファイルを開き、以下の記述を変更。
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=cookietest
DB_USERNAME=cookietest
DB_PASSWORD=testそれぞれ自分自身が設定したものへ変更してください。そして以下のコマンドを実行。
php artisan migrateテーブルが作成されていることを確認してください。
その後、サーバを起動するとバージョン情報が表示されるかと思います。
php artisan serveこんな一瞬でこれだけの物が出来てしまうなんて最高ですね。
api処理でもcookieを使うように設定を追加します。
app/Http/Kernel.phpにて以下のように変更。
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
\Illuminate\Routing\Middleware\ThrottleRequests::class.':api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Session\Middleware\StartSession::class,
],config.cors.phpにて
'supports_credentials' => true,
になっているか確認。
.envに以下を追加。
SANCTUM_STATEFUL_DOMAINS=localhost:3000
SESSION_DOMAIN=localhostここまでで、一旦Laravel単体での認証機能は準備できました。
[React(Next.js)]の準備
一から作ると超大作記事になってしまいます。素晴らしいリポジトリを見つけたのでこれをベースにします。
https://github.com/kullarkert/breeze-next-ts
ダウンロード後、.env.exampleをコピペして.env.localを作成します。開くとバックエンドのパスを書くところがあるので変更する必要があれば変えてください。
この状態で、
npm install
npm run devを実行するとLaravelの画面が出てきますが、Next.js側で再現してあるだけなので気にせず。まずはユーザ情報を登録してみてください。
まとめ
一応形にはなりましたが、これだけでは実務で足りないものがあるのも事実。ただログイン周りを実装したことがない人にとってはコードを読み進めると良い勉強になると思います。
