Laravel UI ログイン機能のセットアップ

Laravel UI のログイン機能が使える状態を目指します。

NOTE: コマンドを実行する場所に注意

学習サイトでは、実行場所がわかるように、$ と $$ を使用して表記します。例えば以下のコマンドはホストコンピュータで入力することを示します。詳細については 前のページ も参照ください。

$ ls
$ docker compose up -d
$ docker compose down

# WSL
$ docker run --rm -it -v "$PWD":/home/node/app -w /home/node/app -p 5173:5173 -u 1000:1000 node:16.16.0-alpine sh -c "npm install && npm run dev"
# Mac
$ docker run --rm -it -v "$PWD":/home/node/app -w /home/node/app -p 5173:5173 node:16.16.0-alpine sh -c "npm install && npm run dev"

そして、以下のコマンドはコンテナ内で入力することを示します。

$$ ls
$$ php artisan serve --host 0.0.0.0

コンテナ内に入るには以下のコマンドを入力します。

$ docker compose exec php bash

本ページの流れ

1. Composer に Laravel UI を追加する。
2. Laravel UI のログイン機能を React で扱うための準備を行う。
3. Laravel UI のログイン機能が使えるかを確認する。

1. Composer に Laravel UI を追加する。

Laravel UI (opens new window) は認証周りの機能の雛型を生成してくれる Laravel 公式のライブラリです。 Laravel のようなフレームワークを用いた開発では、認証周りの機能を自前で実装するのではなく、Laravel UI のような認証ライブラリを活用することで、開発を効率的に進めていくことができます。

php artisan serve --host 0.0.0.0 でサーバーを起動している場合は、Ctrl + C で停止し、以下のコマンドで Laravel UI パッケージを Composer の依存関係に追加します。

$$ composer require laravel/ui

2.Laravel UI のログイン機能を React で扱うための準備を行う

Laravel UI のログイン機能を React で扱うための機能を以下のコマンドでインストールします。(docker compose exec php sh で PHP コンテナの中に入ってから実行。)

$$ php artisan ui react --auth

コマンドを実行すると、 Please run [npm install && npm run dev] to compile your fresh scaffolding. という npm install を実行してくださいといった旨のメッセージが表示されます。

• php artisan ui react --auth 実行後のターミナル

ここで、（後のトラブル回避のために、） vite.config.js を以下のように修正してださい。

~~/vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        react(),
    ],
    server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost',
        },
    },
});

次に、ターミナルで新しくタブ（またはウィンドウ）を開いて以下のコマンドを入力してください。 新しくタブやウィンドウを開いた際には、プロジェクトルートであることを確認し、そうでない場合は cd コマンドを使用して移動してください。

WIN

コマンド例

$ docker run --rm -it -v "$PWD":/home/node/app -w /home/node/app -p 5173:5173 -u 1000:1000 node:16.16.0-alpine sh -c "npm install && npm run dev"

MAC

コマンド例

$ docker run --rm -it -v "$PWD":/home/node/app -w /home/node/app -p 5173:5173 node:16.16.0-alpine sh -c "npm install && npm run dev"

npm install と npm run dev が実行され、node のサーバが起動します。

• node のサーバが起動時のターミナル表示

サーバが起動できたら、http://localhost:5173/ (opens new window) をブラウザで開いて、ページが表示されていることを確認します。

表示が確認できたら、正常に起動できたことを意味しますので、ブラウザのタブは閉じていただいて構いません。

これ以降の開発では、docker run --rm -it -v "$PWD":/home/node/app... コマンドで実行中のコンテナは起動したままにしておいてください。（開発終了時は Ctrl + C で終了してください。）これは、React.js を用いたフロントエンドを実装するにあたり、 Node.js 環境下でビルドが必要なためです。上記の http://localhost:5173/ (opens new window) にブラウザでアクセスできることを確認したのは、 JavaScript のファイルの変更が検出された際に自動的にビルドされる仕組みが準備完了であることを確認するためです。

3. Laravel UI のログイン機能が使えるかを確認する。

PHP コンテナでサーバを起動後、http://localhost:8000 (opens new window) を開くと右上にログイン・新規登録ページへのリンクがあります。

$$ php artisan serve --host 0.0.0.0

register をクリックし新規登録を行います。(入力する情報は覚えていれば適当な値で構いません。)

新規登録が完了したら、phpMyAdmin の users テーブルにデータが追加されていることを確認します。

右上のリンクから、ログアウト、ログインを試し、正常に動作するかを確認できたら、Laravel UI のログイン機能は完了です。

※ ここまで確認できたら、適宜 Git に Commit ＆ Push しておきましょう。

コマンド例