docker + laravel + Vue.jsでユーザをDBに登録できない

Question

こんにちは。
Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (6) 認証機能とVuexを参考に、勉強をしていました。
しかし、ユーザを登録するときに500エラーが発生し、登録できませんでした。
エラー内容は以下のようになります。

POST http://127.0.0.1:8000/api/register 500 (Internal Server Error)
(Promise/async): "Error: Request failed with status code 500"

found in

---> <Login> at resources/js/pages/Login.vue
       <App> at resources/js/App.vue
         <Root>

Error: Request failed with status code 500
    at createError (app.js?id=695473af3d61191f9d27:711)
    at settle (app.js?id=695473af3d61191f9d27:972)
    at XMLHttpRequest.handleLoad (app.js?id=695473af3d61191f9d27:180)

また、developer toolのNetworkでエラー内容の詳細を確認しました。

"message": "Malformed UTF-8 characters, possibly incorrectly encoded",
    "exception": "InvalidArgumentException",

dockerの環境はサイトのものを用いずに他のサイトを参考に作成しました。

バージョン一覧

Laravel 6.18
laravel-mix 4.0.7
Vue.js 2.6.12
vuex 3.5.1
docker-compose 1.27.4

該当コード

以下のactionsのregisterのconst response = await　axios.post('/api/register', data)でエラーが起きます。

//resources\js\auth.js
import { OK } from '../util'

const state = {
  user: null,
  //apiの呼び出し判定
  apiStatus: null
}

const getters = {
  //ログインチェック
  check: state => !!state.user,
  //ログインしているユーザの名前
  username: state => state.user ? state.user.name : ''
}

const mutations = {
  setUser(state, user) {
    state.user = user
  },
  setApiStatus(state, status) {
    state.apiStatus = status
  }
}

const actions = {
  async register(context, data) {
    const response = await axios.post('/api/register', data)
    context.commit('setUser', response.data)
  },
  async login(context, data) {
    context.commit('setApiStatus', null)
    const response = await axios.post('/api/login', data)
      .catch(err => err.response || err)
    if (response.status === OK) {
      context.commit('setApiStatus', true)
      context.commit('setUser', response.data)
      return false
    }
    context.commit('setApiStatus', false)
    context.commit('error/setCode', response.status, {
      root: true
    })
  },
  async logout(context) {
    const response = await axios.post('/api/logout')
    context.commit('setUser', null)
  },
  //アプリ起動時にログインチェック
  async currentUser(context) {
    const response = await axios.get('/api/user')
    const user = response.data || null
    context.commit('setUser', user)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

//resouces\js\index.js
import Vue from 'vue'
import Vuex from 'vuex'

import auth from './auth'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        auth,
    }
})

export default store

//resources\js\pages\Login.vue
<template>
  <div class="container--small">
    <ul class="tab">
      <li
        class="tab__item"
        :class="{ 'tab__item--active': tab === 1 }"
        @click="tab = 1"
      >
        Login
      </li>
      <li
        class="tab__item"
        :class="{ 'tab__item--active': tab === 2 }"
        @click="tab = 2"
      >
        Register
      </li>
    </ul>
    <div class="panel" v-show="tab === 1">
      <form class="form" @submit.prevent="login">
        <label for="login-email">Email</label>
        <input
          type="text"
          class="form__item"
          id="login-email"
          v-model="loginForm.email"
        />
        <label for="login-password">Password</label>
        <input
          type="password"
          class="form__item"
          id="login-password"
          v-model="loginForm.password"
        />
        <div class="form__button">
          <button type="submit" class="button button--inverse">login</button>
        </div>
      </form>
    </div>
    <div class="panel" v-show="tab === 2">
      <form class="form" @submit.prevent="register">
        <label for="username">Name</label>
        <input
          type="text"
          class="form__item"
          id="username"
          v-model="registerForm.name"
        />
        <label for="email">Email</label>
        <input
          type="text"
          class="form__item"
          id="email"
          v-model="registerForm.email"
        />
        <label for="password">Password</label>
        <input
          type="password"
          class="form__item"
          id="password"
          v-model="registerForm.password"
        />
        <label for="password-confirmation">Password (confirm)</label>
        <input
          type="password"
          class="form__item"
          id="password-confirmation"
          v-model="registerForm.password_confirmation"
        />
        <div class="form__button">
          <button type="submit" class="button button--inverse">register</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tab: 1,
      loginForm: {
        email: "",
        password: "",
      },
      registerForm: {
        name: "",
        email: "",
        password: "",
        password_confirmation: "",
      },
    };
  },
  methods: {
    async login() {
      // authストアのloginアクションを呼び出す
      await this.$store.dispatch("auth/login", this.loginForm);
      // トップページに移動する
      this.$router.push("/");
    },
    async register() {
      // authストアのresigterアクションを呼び出す
      await this.$store.dispatch("auth/register", this.registerForm);
      // トップページに移動する
      this.$router.push("/");
    },
  },
};
</script>

//routes\api.php
<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

//会員登録
Route::post('/register', 'Auth\RegisterController@register')->name('register');
//ログイン
Route::post('/login', 'Auth\LoginController@login')->name('login');
//ログアウト
Route::post('/logout', 'Auth\LoginController@logout')->name('logout');
//ログインユーザ
Route::get('/user', fn () => Auth::user())->name('user');

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use App\User;
use Illuminate\Foundation\Auth\RegistersUsers;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Illuminate\Http\Request;

class RegisterController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Register Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles the registration of new users as well as their
    | validation and creation. By default this controller uses a trait to
    | provide this functionality without requiring any additional code.
    |
    */

    use RegistersUsers;

    /**
     * Where to redirect users after registration.
     *
     * @var string
     */
    protected $redirectTo = RouteServiceProvider::HOME;

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest');
    }

    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return \App\User
     */
    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);
    }

    protected function registered(Request $request, $user)
    {
        return $user;
    }
}

#docker-compose.ymlのバージョン
version: "3.8"
#docker volumeの設定(ローカルとDockerコンテナ間のファイル共有を設定するオプション)
volumes:
  docker-volume:

#services以下に各コンテナの設定を書く
services:
  #Webサーバーのコンテナ
  web:
    image: nginx:1.18
    ports:
      - "8000:80"
    depends_on:
      - app
    volumes:
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - .:/var/www/html
  #アプリケーションのコンテナ
  app:
    build: ./docker/php
    volumes:
      - .:/var/www/html
  #データベースのコンテナ
  db:
    image: mysql:5.7
    ports:
      - "3306:3306"
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
    environment:
      MYSQL_DATABASE: db_name
      MYSQL_USER: user
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: root
      TZ: "Asia/Tokyo"
    volumes:
      - docker-volume:/var/lib/mysql

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=db
      - PMA_USER=user
      - PMA_PASSWORD=password
    depends_on:
      - db
    links:
      - db
    ports:
      - 8084:80
    volumes:
      - "./phpmyadmin/sessions:/sessions"

試したこと

Vue.js + laravel ユーザ認証 登録ができず困っています
を参考にして、自分もログイン状態で登録を行っていようとしていないか確認しました。

また、冒頭のNetworkのエラーからDBの文字コードが関係していると思い、mysqlのDBの文字コードをlatin1からUTF-８に変更しましたがエラーは海洋しませんでした。

そして、compose updateを行いましたが解消しませんでした。

コマンドではmysqlにアクセスすることはできます。
また、phpmyadminにも接続できます。

わかりにくい箇所をあると思いますが、ご回答いただけますと幸いです。

Comments

[firegrape]

まずは、try~catchでエラー時のレスポンスデータを受け取ってみては
どうでしょうか？
https://neos21.hatenablog.com/entry/2020/07/11/080000

[aroma]

ご回答ありがとうございます。
try-catchで囲むと"message": "Malformed UTF-8 characters, possibly incorrectly encoded",
"exception": "InvalidArgumentException",
が出力されました。
文字コードの変換でエラーが発生しているようです。

Answer 1

"message": "Malformed UTF-8 characters, possibly incorrectly encoded",
    "exception": "InvalidArgumentException",

このエラーメッセージに続いて stacktrace が出ていれば、
サーバー側 PHP のどの部分でエラーが発生しているかを確認して、
どのような文字コードの変換でエラーが発生しているのかを
更に確認して、その部分に必要な対策を実施してみましょう

まだ、この時点ではデータベースが原因とは限らず、
データベースに関係なく文字コードの変換が必要になる例はあるようです

参考:

• Answer: 'Malformed UTF-8 characters, possibly incorrectly encoded' in Laravel
• Answer: Laravel malformed character UTF-8

Comments

[aroma]

ご回答ありがとうございます。
エラーの下にstacktraceが出ているので調べてみようと思います。