Vue + Vue Router + Vuex + Laravel のチュートリアル(@MasahiroHarada 様 作成)を進める最中に詰まった部分の原因と対策

はじめに

こちらの記事は、@MasahiroHarada 様が作成された以下の記事をのチュートリアルを、実際に自分が行ってみて、詰まった部分や勘違いしていた部分を、他のチュートリアルに挑戦される方向けに残したものです。

Laravel 6 & PHP 7.4 対応】Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。

本当に素晴らしい記事で、Laravel、Vue、spa設計の知見が深まりました。
この場を借りて、改めて感謝申し上げます。

※記事の執筆にあたり、一応ご本人から確認はいただいておりますが、共著でもないため、間違いやご指摘、ご意見は全て私の方に直接いただきますよう、お願い申し上げます。

それでは、よろしくお願いします。

私の開発環境と前提

私が使用した開発環境です。

Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (3) SPA開発環境とVue Routerの記事を参考に、Dockerで作成しました。

Laravelは7.19.0、OSはMacです。

詳しいことは上記の記事にまとめてくださっていますが、前提条件としてご了承ください。
次章より、実際に詰まった部分と解決策を述べます。

npm run watch で何も表示されない

最初に遭遇したエラーは、(3) SPA開発環境とVue Routerのフロントエンドのビルドの項目で、npm run watchを入力しても何も表示されなかったことです。

これは、SPAの仕組み上当然のことで、バックエンドの(Laravelの)サーバーを立てていなかったことが原因でした。

ターミナル等でシェルをもう一つ用意し、バックエンドのサーバーをphp artisan serve --host 0.0.0.0 --port 8081で立ててから、もう一つの方でnpm run watchを行うと無事表示されました。

Illuminate\Foundation\Auth\RegistersUsers.php がない

(4) 認証APIの部分です。
これは、私と同じLaravelの7系、もしくは6系を使っている方は遭遇するかと思います。

対策の詳細はこちらの公式にも載っています。
https://readouble.com/laravel/7.x/ja/authentication.html

具体的には、以下のコードをcomposerファイルのあるディレクトリで実行すると現れてくれるはずです。

# Laravel6系
composer require laravel/ui:^1.0 --dev

# Laravel7系
composer require laravel/ui

参考記事
更新！ Laravel6/7「make:Auth」が無くなった 〜Laravel6/7でのLogin機能の実装方法〜MyMemo

なぜか新規登録ができない

これが個人的には一番びっくりなエラーでした。コードはあっていて新規登録をしようとしても、

POST http://localhost:3000/api/register 405 (Method Not Allowed) message: "The POST method is not supported for this route. Supported methods: GET, HEAD."

というエラーが出ます。これの解決策は、なんとパスワードを8文字以上にすることでした。
Railsのdeviseというログイン機能を作ってくれるライブラリをよく使用していて、そちらは6文字だったので油断しておりました。

参考記事
ユーザー認証のパスワード制限の変更

コントローラーで処理がされない

チュートリアルを進めていき、理解している部分は基本的にコピペで行っていたのですが、それ通りに貼り付けているはずなのにコントローラーが反応してくれない場面がありました。

原因はDIのし忘れ(namespaceの書き忘れ)でした。

Laravelでは別ファイルから使いたい要素を持ってくるときに、use App\Http\Requests\StoreComment;と言った形で主にファイル冒頭に記載をするのですが、内容のコードだけを貼って、こちらをコピペすることを忘れていました。

結果、参照ができずにエラーが出たわけです。しっかりと記事を読んで、コピーのし忘れがないか確認しましょう。

Failed to load resource: the server responded with a status of 405 (Method Not Allowed) が出る

これは、ルーティングに誤りがありました。今回のチュートリアルでは、api.phpとweb.php二つのルーティングがあります。apiを叩く処理を間違った方に書いており、このエラーが発生しました。

「ルーティングを書いている場所はあっているか？」チェックをしてみると解決するかもしれません。

エラーメッセージがインポートできない

(8) エラーハンドリングの章で記載ミス？と思われるものがあります。(2020/7/26現在)コメント欄で@MasahiroHarada 様が回答されていますが、一応記事がそのままだったのでこちらにも記載いたしました。

router.js

import SystemError from './pages/errors/System.vue'
// ここのままだとエラーになるので、
// import SystemError from './pages/errors/500.vue'
// としてあげましょう

/* 中略 */

const routes = [
  /* 中略 */
  {
    path: '/500',
    component: SystemError
  }
]

写真投稿APIのテストが通らない

Dockerで作開発をしていると、 (9) 写真投稿APIのテストが通りません、原因は記事のコメント欄にもあったのですが、一応こちらにまとめます。

基本的には紹介されているこちらの記事通りにやっていただきたいのですが、私はDocker初学者だったので**「再ビルドしてください」**というのが、どうするのかわかりませんでした。

私の場合docker build -t vuesplash_vuesplash_web .で解決しました。（ピリオドも必要です）

謝辞

以上が、自分がチュートリアル実行時に遭遇したエラーです。初歩的なミスもあり、そのような振り返り学習ができたという点でも、こちらのチュートリアルは素晴らしかったです…本当にありがとうございました。