laravel/breeze-nextについて

2024年12月3日 09:09

next.jsを使って今までやってきたようなのを移植する試みのようだ。少しだけ古い。

これはbreezeと通信するためのfrontendだけだった

frontendの起動

ここにコピーしたものをdocker-compose.ymlを付けて置いてあるからこれを徐に起動すること。

docker-compose up

なお、docker-compose.yml の中身

version: '3.8'

services:
  frontend:
    image: node:22
    container_name: breeze-next
    working_dir: /app
    volumes:
      - .:/app
      - /app/node_modules
    ports:
      - "3000:3000"
    command: >
      sh -c "npm install && npm run build && npm start"
    environment:
      - CHOKIDAR_USEPOLLING=true

起動したら当該の3000ポートにアクセス

すると、ちょっと古めのbreezeのガワが出てくる。コネクションに失敗しているのは前回まででやってきたネタからわかるように/api/user へアクセスしているんだけどbackendのurlの指定が適当だし、そもそもbackendサーバーが起動していないせい。

これに関しては.env で

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

このurlを変更するのであるが、backendも起動する必要がもちろんある。

backendの起動

backendはbackend/の中のlaravel11を起動するREADME.mdにも書いておいた

docker run --rm -it -v $(pwd):/app composer install
cp .env.example .env
./vendor/bin/sail up
./vendor/bin/sail artisan key:gen
./vendor/bin/sail artisan migrate:fresh --seed

これでbackendサーバーが起動したので

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

を当該サーバーのurlに変更すること

frontendの.envの書き換えと確認

サーバー再起動する。ここでは本番を見据えてlocalhost以外で起動しているが、以下のようになる。

とりあえずbackendの.env

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:3000
SANCTUM_STATEFUL_DOMAINS=localhost:3000
APP_PORT=8000

この辺を修正する事

でまあ一応これをやっておく

% ./vendor/bin/sail php artisan config:clear

   INFO  Configuration cache cleared successfully.

すると

へと変化する

とはいえ

これだけ動いたとて問題はこの先にあるんだろうけどねえ

#nextjs #laravel #react #laravel_breeze #laravel初心者