Laravel7のログイン機能

概要

Laravel7をインストール後にログイン機能を実装する。
その際Vueも使えるようにする。

前提

Laravel7がインストールされている
https://qiita.com/a05kk/items/9fbb06c4ff73ffeafae1

実装

1.パッケージのインストール

Composerを使いlaravel/uiパッケージをインストールする。
※バージョン指定しないとエラーが発生する。

composer require laravel/ui:^2.4

2.ログイン機能の実装

artisanコマンドでログイン／ユーザー登録機能が実装される。
※オプションの--authが必要になる。また、これでVueがpackage.jsonに記載される。

php artisan ui vue --auth

テーブルの追加

php artisan migrate

これで、一度画面を更新するとログインとレジスター（登録）ボタンが表示されているはず。

これでログイン機能の実装は完成だが、vueの構築が行われていないのでJS/CSSが適用されていない。（下記はLoginボタンクリック後）

3.npmのインストール

筆者の環境にはnpmが入っていなかったのでnpmを入れる。

sudo yum install -y npm

npm install

.error

added 1174 packages, and audited 1175 packages in 2m

72 packages are looking for funding
  run `npm fund` for details

31 vulnerabilities (14 moderate, 17 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
npm notice
npm notice New minor version of npm available! 8.5.0 -> 8.8.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.8.0
npm notice Run npm install -g npm@8.8.0 to update!
npm notice

脆弱性を含むパッケージがあるということなので、脆弱性を含むパッケージを利用しないバージョンに強制的に戻す。

npm audit fix --force

added 136 packages, removed 538 packages, changed 165 packages, and audited 773 packages in 57s

76 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

4.ビルドする

npm run dev

.error

[webpack-cli] Error: Unknown option '--hide-modules'

--hide-modulesというモジュルーはないよ、というエラー。
また、Laravel5以前は使えていたが6系以降は使えなくなったらしい。
というわけで該当箇所を削除する。

pacage.json

//削除前
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

pacage.json

//削除後
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"

5.再びビルドに挑戦

npm run dev

.error

ERROR in ./resources/js/components/ExampleComponent.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|     <div class="container">
|         <div class="row justify-content-center">

このエラーはLaravel Mixのバージョン6から仕様が変わったたために発生するものである。下記で修正を行う。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js').vue()

.vue()を追加する。

6.再々ビルド

npm run dev

成功した。

7.ログイン画面の確認

JS・CSSが適用された

参考

・更新！！Laravel6/7 (laravel/ui)でのLogin機能の実装方法〜MyMemo
・Laravel 7.x JavaScriptとCSSスカフォールド
・laravel/ui - Packagist
・npm パッケージのバージョンアップと脆弱性対応 – rinoguchi's techlog
・【Laravel】npm run devを実行したら –hide-modulesエラーが出た時の対処法 - SAUNABOUYA.HTML
・【Laravel Mix】 npmのパッケージをupgradeしたらコンパイルできなくなった | Zakkuriブログ