質問編集履歴

投稿予定のアカウントを間違えたため削除しました。

2024/08/25 10:30

投稿

退会済みユーザー

スコア0

title CHANGED Viewed

	@@ -1,1 +1,1 @@
1	- ~~Docker環境で構築~~した~~LaravelBreezeとNext.jsでログイン機能が使えない~~
1	+ アカウント変更のため当記事内容は削除しました。

body CHANGED Viewed

@@ -1,286 +1,1 @@
-### 実現したいこと
-Laravel Breezeをバックエンド、Next.jsをフロントエンドとしてAPI連携の勉強のため、普段使用させていただいている[Docker環境](https://github.com/ucan-lab/docker-laravel)のリポジトリをUse this templateで自分のリポジトリにコピーしAPI連携用に改造しています。
-既存のリポジトリにinfra/dorker/next/Dockerfileを作成し中でnode.js環境を入れました。
-Laravelのwelcome画面右上に表示されているLoginリンクからログインができるようにしたいです。
-![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-08-25/8b69801d-46ab-4cba-9f34-ded76f8637a1.png)
-`docker compose up -d`で起動させログイン画面の表示まではできましたが、ログイン情報を入力しログインボタンを押下するとエラーが発生しており進められない状況です。
-### 発生している問題・分からないこと
-Loginボタンをクリックすると、左下にerrorが表示される
-![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-08-25/a47386b0-5d5b-41b9-88e9-f90b9606ed33.png)
-errorをクリックしたら表示される画面
-![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-08-25/fcdb1090-1502-4c9d-a11b-4c56191dc70b.png)
-### エラーメッセージ
-```error
-Unhandled Runtime Error
-Error: Network Error
-Call Stack
-createError
-node_modules/axios/lib/core/createError.js (16:1)
-XMLHttpRequest.handleError
-node_modules/axios/lib/adapters/xhr.js (99:1)
-```
-### 該当のソースコード
-```infra/docker/nuxt/Dockerfile
-FROM node:20.17-alpine
-ENV TZ =UTC
-WORKDIR /workspace
-COPY ./client /workspace
-RUN npm install
-CMD ["npm", "run", "dev"]
-```
-```infra/docker/php/Dockerfile
-FROM php:8.3-fpm-bullseye AS base
-WORKDIR /workspace
-# timezone environment
-ENV TZ=UTC \
-  # locale
-  LANG=en_US.UTF-8 \
-  LANGUAGE=en_US:en \
-  LC_ALL=en_US.UTF-8 \
-  # composer environment
-  COMPOSER_HOME=/composer
-ARG UID=1000
-ARG GID=1000
-COPY --from=composer:2.7 /usr/bin/composer /usr/bin/composer
-RUN <<EOF
-  apt-get update
-  apt-get -y install --no-install-recommends \
-    locales=2.31-13+deb11u10 \
-    git=1:2.30.2-1+deb11u2 \
-    unzip=6.0-26+deb11u1 \
-    libzip-dev=1.7.3-1 \
-    libicu-dev=67.1-7 \
-    libonig-dev=6.9.6-1.1 \
-    default-mysql-client=1.0.7
-  locale-gen en_US.UTF-8
-  localedef -f UTF-8 -i en_US en_US.UTF-8
-  docker-php-ext-install \
-    intl \
-    pdo_mysql \
-    zip \
-    bcmath
-  # permission denied bind mount in Linux environment
-  groupadd --gid $GID phper
-  useradd --uid $UID --gid $GID phper
-  mkdir /composer
-  mkdir -p /home/phper/.config/psysh
-  chown phper:phper /composer
-  chown phper:phper /workspace
-  chown phper:phper /home/phper/.config/psysh
-  apt-get clean
-  rm -rf /var/lib/apt/lists/*
-EOF
-FROM base AS development
-COPY ./infra/docker/php/php.development.ini /usr/local/etc/php/php.ini
-USER phper
-FROM base AS development-xdebug
-RUN <<EOF
-  pecl install xdebug
-  docker-php-ext-enable xdebug
-EOF
-COPY ./infra/docker/php/xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini
-USER phper
-FROM base AS deploy
-COPY ./infra/docker/php/php.deploy.ini /usr/local/etc/php/php.ini
-COPY --chown=phper:phper ./server /workspace
-USER phper
-RUN <<EOF
-  composer install --quiet --no-interaction --no-ansi --no-dev --no-scripts --no-progress --prefer-dist
-  composer dump-autoload --optimize
-  chmod -R 777 storage bootstrap/cache
-  php artisan optimize:clear
-  php artisan optimize
-EOF
-```
-```compose.yaml
-volumes:
-  db-store:
-services:
-  app:
-    build:
-      context: .
-      dockerfile: ./infra/docker/php/Dockerfile
-      args:
-        UID: ${UID:-1000}
-        GID: ${GID:-1000}
-      target: ${APP_BUILD_TARGET:-development}
-    volumes:
-      - type: bind
-        source: ./server
-        target: /workspace
-    environment:
-      # Please remove this environment variable, after created the Laravel project. Please write in .env
-      - DB_CONNECTION=${DB_CONNECTION:-mysql}
-      - DB_HOST=${DB_HOST:-db}
-      - DB_PORT=${DB_PORT:-3306}
-      - DB_DATABASE=${DB_DATABASE:-laravel}
-      - DB_USERNAME=${DB_USERNAME:-phper}
-      - DB_PASSWORD=${DB_PASSWORD:-secret}
-  next:
-    build:
-      context: .
-      dockerfile: ./infra/docker/next/Dockerfile
-    ports:
-      - "3000:3000"  # Nuxt.js の開発サーバーのポート (変更可能)
-    volumes:
-      - type: bind
-        source: ./client
-        target: /workspace
-  web:
-    build:
-      context: .
-      dockerfile: ./infra/docker/nginx/Dockerfile
-    ports:
-      - target: 80
-        published: ${WEB_PUBLISHED_PORT:-80}
-        protocol: tcp
-        mode: host
-    volumes:
-      - type: bind
-        source: ./server
-        target: /workspace
-  db:
-    build:
-      context: .
-      dockerfile: ./infra/docker/mysql/Dockerfile
-    ports:
-      - target: 3306
-        published: ${DB_PUBLISHED_PORT:-3306}
-        protocol: tcp
-        mode: host
-    volumes:
-      - type: volume
-        source: db-store
-        target: /var/lib/mysql
-        volume:
-          nocopy: true
-    environment:
-      - MYSQL_DATABASE=${DB_DATABASE:-laravel}
-      - MYSQL_USER=${DB_USERNAME:-phper}
-      - MYSQL_PASSWORD=${DB_PASSWORD:-secret}
-      - MYSQL_ROOT_PASSWORD=${DB_PASSWORD:-secret}
-  mailpit:
-    image: axllent/mailpit
-    ports:
-      - target: 8025
-        published: ${MAILPIT_PUBLISHED_PORT:-8025}
-        protocol: tcp
-        mode: host
-```
-```server/.env
-APP_URL=http://localhost:8000
-FRONTEND_URL=http://localhost:3000
-FRONTEND_URL=http://localhost:3000
-APP_LOCALE=en
-APP_FALLBACK_LOCALE=en
-APP_FAKER_LOCALE=en_US
-```
-```client/.env.local
-NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
-```
-### 試したこと・調べたこと
-- [x] teratailやGoogle等で検索した
+投稿記事は載せるアカウントを間違えたため削除しました。
-- [ ] ソースコードを自分なりに変更した
-- [ ] 知人に聞いた
-- [ ] その他
-##### 上記の詳細・結果
-**検索して試したこと**
-- リストバックエンドとフロントエンドのenvファイルの確認
-Laravel側
-```.env
-APP_URL=http://localhost:8000
-FRONTEND_URL=http://localhost:3000
-```
-Next.js側
-```.env.local
-NEXT_PUBLIC_BACKEND_URL=http://localhost:8000
-```
-- リストバックエンドとフロントエンドのenvの設定変更
-Laravel側
-```.env
-APP_URL=http://localhost
-FRONTEND_URL=http://localhost:3000
-```
-Next.js側
-```.env.local
-NEXT_PUBLIC_BACKEND_URL=http://localhost
-```
-[侍テラコヤの質問であった内容](https://terakoya.sejuku.net/question/detail/18379)を試しましたが、別のエラーがブラウザのコンソールに表示されました。
-```console:error
-GET http://localhost/api/user 500 (Internal Server Error)
-```
-### 補足
-テンプレートとして初期インストールされるNext.jsとLaravelのプロジェクトに関するファイル階層は省略しています。
-ディレクトリ階層は以下の通りです。
-docker-laravel
-├── LICENSE
-├── Makefile
-├── README.md
-├── Taskfile.yml
-├── client
-│   └── Next.jsのプロジェクト
-├── compose.yaml
-├── infra
-│   └── docker
-│       ├── mysql
-│       │   ├── Dockerfile
-│       │   └── my.cnf
-│       ├── next
-│       │   └── Dockerfile
-│       ├── nginx
-│       │   ├── Dockerfile
-│       │   └── default.conf
-│       └── php
-│           ├── Dockerfile
-│           ├── php.deploy.ini
-│           ├── php.development.ini
-│           └── xdebug.ini
-└── server
-    └── Laravelのプロジェクト

Next.js Laravel Docker API