Doker環境でのNext.jsとLaravel/Breezeで初期画面の認証が出来ません。

Question

実現したいこと

Next.js・Laravel/Breeze・Nginxのコンテナを用いて、Next.jsをフロントエンド、LaravelをBreezeのバックエンドAPIで動かしたいと考えております。
ひとまずはプロキシ等考えずにフロントエンドとバックエンドで通信できる事を目指していたのですが、Breeze-nextの初期認証機能で丸１日つまづいております。

発生している問題・分からないこと

register画面でバリデーションが発生しない正しい形式で入力し、registerボタンを押すと以下の表示が出ます。
Unhandled Runtime Error
Error: Network Error
Call Stack
createError
node_modules/axios/lib/core/createError.js (16:0)
XMLHttpRequest.handleError
node_modules/axios/lib/adapters/xhr.js (99:0)

該当のソースコード

version: '3.9'

services:
  proxy:
    ~~~~
  
  backend:
    container_name: example-be
    build: ./infra/php
    restart: always
    ports: 
      - 8000:8000
    volumes:
      - ./backend:/var/www/html
      - ./infra/php/php.ini:/usr/local/php/php.ini
    depends_on:
      - db
  
  frontend:
    container_name: example-fe
    build: ./infra/node
    tty: true
    restart: always
    environment:
      - WATCHPACK_POLLING=true
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/usr/src/app

  db:
    container_name: example-db
    build: ./infra/mysql
    restart: always
    ports:
      - 3306:3306
    volumes:
      - db-store:/var/lib/mysql
      - ./infra/mysql/my.cnf:/etc/mysql/conf.d/my.cnf
    environment:
      MYSQL_DATABASE: example_db
      MYSQL_ROOT_PASSWORD: rootpassword
      MYSQL_USER: firstuser
      MYSQL_PASSWORD: firstpassword
      TZ: Asia/Tokyo

# Laravel .env

APP_NAME=Laravel
APP_ENV=local
APP_KEY=~~~
APP_DEBUG=true
APP_URL=http://0.0.0.0:8000
FRONTEND_URL=http://frontend:3000

# Nextjs .env.local

NEXT_PUBLIC_BACKEND_URL=http://backend:8000

# Laravel config/cors.php

    'paths' => ['*'],

    'allowed_methods' => ['*'],

    'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

<mysql>
FROM mysql:8.0

COPY ./my.cnf /etc/mysql/conf.d/my.cnf
RUN chmod 644 /etc/mysql/conf.d/my.cnf

<Laravel>
FROM php:8.1-fpm-alpine
# php 8.1
# fpm server
# AlpineLinux ver11 

WORKDIR /var/www/html

ENV COMPOSER_ALLOW_SUPERUSER=1 \
    COMPOSER_HOME=/composer

# install composer
RUN curl -sS https://getcomposer.org/installer | php
RUN mv composer.phar /usr/local/bin/composer

# install packages
RUN apk update
RUN apk add git

# install php extensions
RUN docker-php-ext-install pdo pdo_mysql

<Nextjs>
FROM node:20-alpine

WORKDIR /usr/src/app

# install packages
RUN apk update
RUN apk add git

# git clone https://github.com/laravel/breeze-next.git .　を用いております。

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

1. コンテナを立ち上げ、Laravel・Next双方の開発用サーバーを立ち上げ、localhostの8000番でLaravel、3000番でNextが動作していることは常に確認しています。
2. そもそもコンテナ自体接続できていないと考えていたため、双方のコンテナでpingコマンドを試しましたが通信されており、名前解決も出来ていました。
3. 双方の.envに記述しているURLもコンテナ名でなく実際のIPに変えてみたりしています。
4. 通信の際にわたってくる変数が正しくないのかと考え、直上で変数の中身を見てみましたが.envの内容でした。

他に必要な情報がありましたらお教えいただければ幸いです。

補足

DockerDesktop - v4.15.0

Answer 1

Laravel

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

Next

NEXT_PUBLIC_BACKEND_URL=http://localhost:8000

READMEに書いてること。
https://github.com/laravel/breeze-next

docker-compose.ymlのサービス名で通信できるのはDocker内だけの話。
Dockerの中のLaravelからはDB_HOST=dbでMySQLに繋がる。
Dockerの外であるブラウザからはhttp://backendには繋がらない。

Comments

[Tatsuya1192]

有難うございます！
READMEには目を通していたのですが、コンテナ間通信だとlocalhostではないよな～と誤解してました。
確かにブラウザから通信するのでこの設定でないといけなかったのですね。