Zenn
📝

Laravel 8 × React でログイン機能を実装する

2021/03/13に公開
Laravel
PHP
React
tech

はじめに

Laravel 8とReactでログイン機能を実装してみます
実装には laravel/ui を使用します

環境

$ php -v
PHP 7.4.9 (cli) (built: Aug  8 2020 11:29:07) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.9, Copyright (c), by Zend Technologies
    with Xdebug v2.9.6, Copyright (c) 2002-2020, by Derick Rethans

$ composer -V
Composer version 1.10.20 2021-01-27 15:41:06

$ node -v
v14.7.0

$ npm -v
6.14.7

実装の流れ

1. Laravelプロジェクトを作成します

$ composer create-project laravel/laravel laravel-react --prefer-dist "8.x"
$ php artisan -V
Laravel Framework 8.32.1

2. laravel/ui をインストールします

  • 自分の環境だと、composer requireにてメモリ不足となってしまいましたので、 COMPOSER_MEMORY_LIMIT=-1 をつけています。メモリ不足にならないようでしたら、不要です
$ cd laravel-react
$ COMPOSER_MEMORY_LIMIT=-1 composer require laravel/ui

3. Reactのログイン機能をインストールします

$ php artisan ui react --auth

4. npm installを行います

$ npm install

5. npm run devを行います

$ npm run dev

> @ dev /src/laravel-react
> npm run development


> @ development //src/laravel-react
> mix

        Additional dependencies must be installed. This will only take a moment.
 
        Running: npm install resolve-url-loader@^3.1.2 --save-dev --legacy-peer-deps

とメッセージが表示された場合は、以下のように resolve-url-loader@^3.1.2 をインストールし、その後、npm run dev を行います

$ npm install resolve-url-loader@^3.1.2 --save-dev --legacy-peer-deps
$ npm run dev

6. データベースを作成します

  • データベースには sqlite を使用します
$ touch database/database.sqlite

7. .envを修正します

  • DB_CONNECTION に sqlite を指定し、 DB_DATABASE の設定は削除します
  • MySQLなどのRDBを使用する場合は .env の設定を使用するRDBに合わせて変更してください
-DB_CONNECTION=mysql
+DB_CONNECTION=sqlite
 DB_HOST=127.0.0.1
 DB_PORT=3306
-DB_DATABASE=laravel
 DB_USERNAME=root
 DB_PASSWORD=
  • MAIL_MAILER に log を指定します
-MAIL_MAILER=smtp
+MAIL_MAILER=log

8. キャッシュをクリアします

$ php artisan cache:clear
Application cache cleared!

9. マイグレーションを実行します

  • users と password_resets, failed_jobs が作成されます
$ php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (6.43ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (3.94ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (6.27ms)

10. ビルトインサーバーを起動します

$ $ php artisan serve
Starting Laravel development server: http://127.0.0.1:8000
[Sat Mar 13 16:27:13 2021] PHP 7.4.9 Development Server (http://127.0.0.1:8000) started

11. サイトにアクセスします

  • http://127.0.0.1:8000 にアクセスするとLaravelの初期画面が表示されます

  • Laravelの初期画面の右上の Login ボタンをクリックするか、 http://127.0.0.1:8000/login にアクセスすると、ログイン画面が表示されます

  • Register ボタンをクリックするか、 http://127.0.0.1:8000/register にアクセスすると、ユーザー登録画面が表示されます

  • name, email, password を入力して、 Register ボタンをクリックすると、ログイン後の画面が表示されます

  • 右上のプルダウンメニューを選択すると、 Logout ボタンがあるので、クリックすると、ログアウトされます

  • ログイン画面の Forgot Your Password? リンクをクリックするか、 http://127.0.0.1:8000/password/reset にアクセスすると、パスワードリセット画面が表示されます

    • メールアドレスを入力して、Send Password Reset Link をクリックすると、 メールが送信されますが、 7の設定にて storage/logs/laravel.log にメールを出力するようにしているので、 laravel.log にパスワードリセットのリンクが出力されます

まとめ

Laravel 8 × React でログイン機能を実装してみました
微調整は必要ですが、 laravel/ui を使えば簡単にログイン機能が実装できるので、参考にしてみてください
ソースコードはこちらに格納しています

参考

laravel/ui
Laravel 8.x JavaScriptとCSSスカフォールド

Discussion