質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

解決済

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

aroma
aroma

総合スコア8

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

1回答

0リアクション

0クリップ

1836閲覧

投稿2020/10/19 13:57

編集2020/10/19 14:00

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

JavaScript

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でエラー内容の詳細を確認しました。

JavaScript

"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)でエラーが起きます。

JavaScript

//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 }

JavaScript

//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

vue

//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>

php

//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

<?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

#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-8に変更しましたがエラーは海洋しませんでした。

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

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

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

aroma

2020/10/21 14:41

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです