Laravel Filamentを使用した管理画面構築の巻（３）上

前回、filamentでのリソース作成を行い少しだけ管理画面らしくなりましたので、今回は少し離れてしまうかもしれませんが、

• Breezeをインストール後にマルチログインの実装

をやっていきたいと思います。

但し書きになりますが、ここで申し上げています「マルチログイン」は、一般ユーザーと管理ユーザーとで別々のログイン機能を有することを指しています。（マルチ認証と言われているところもあると思います。）ECサイトでは、一般ユーザーはログイン後にマイページが表示され、管理ユーザーはログイン後に管理画面が表示されるというように、よく使用されている機能かと思います。

以下は前回までの表示状態になります。

現状は、画像をご覧頂くとお判りの通り、filament（管理画面）側のみの認証しかありませんので、一般ユーザー用の認証機能を追加します。Breezeパッケージを導入します。

プロジェクトディレクトリに移動して、以下でBreezeパッケージのインストールまで行います。

$ composer require laravel/breeze
$ php artisan breeze:install

Breezeインストール時に以下を聞かれます。

Which stack would you like to install?

スタックとは、特定の技術やツールの組み合わせを指します。Laravel Breezeのインストール時には、フロントエンドの技術スタックを選択することが求められます。今回（filament導入後）の場合だと以下が選択可能です。

• Blade with Alpine（LaravelのテンプレートエンジンであるBladeを使用したシンプルなフロントエンドスタック）
• Livewire（Volt Class API） with Alpine（PHPだけで動的なフロントエンドUIを構築するためのツールであるLivewireを使用したスタック）
• Livewire（Volt Functional API） with Alpine（PHPだけで動的なフロントエンドUIを構築するためのツールであるLivewireを使用したスタック）
• React with Inertia（Inertia.jsを使用して、Reactのシングルページアプリケーションを構築するスタック）
• Vue with Inertia（Inertia.jsを使用して、Vueのシングルページアプリケーションを構築するスタック）

私自身がバックエンド側でフロントエンド側の技術について知識が乏しいですが、LivewireはPHPだけで動的なフロントエンドUIを構築できるというところに興味が引かれましたので、今回は「Livewire（Volt Functional API） with Alpine」を選択しました。（今回は触れませんが・・・）

Would you like dark mode support?

これはダークモード表示のサポートをしますかということですのでお好みです。

Which testing framework do you prefer?

テストツールに何を使用しますかということでしたのでPHPUnitを選択しました。

Breezeのインストールが完了したので、確認でフロント画面を見てみましょう。

ありゃりゃ、エラーになっていますね。

エラー内容を確認すると、Viteがmanifest.jsonが見つけられないと怒られているようです。

これまたフロントエンドの話なのですが、調べてみたところ以前のLaravelのバージョンではLaravel Mix（cssやjsをコンパイル・圧縮するフロントエンドのビルドツール、webpackのラッパーらしい）というのが使われていたようなのですが、最近のLaravelのバージョン（Laravel9以降）からデフォルトのビルドツールがViteというものに変わったそうです。

manifest.json自体は、これまた知識不足のため調べたところ以下コマンドの実行により

public/build/manifest.json

が生成されるそうです。

$ npm run build

npmコマンドを実行するためには、node.js と npm のパッケージをインストールする必要がありますのでインストールしていきます。今回の環境はUbuntuですので以下になります。

# apt install -y nodejs npm
# npm install n -g
# n stable
# apt purge -y nodejs npm
# apt autoremove -y

ざっくりと説明しますと、

1. nodejs と npm のとりあえずパッケージをインストール
2. n というnode.js のバージョン管理ツールをインストール
3. 安定版（最新版）のnode.js をインストール
4. 1.でインストールしたとりあえずのパッケージを削除
5. とりあえずのパッケージをインストールした際に一緒にインストールされた関連パッケージを削除

という流れになります。

先程の一連のコマンドが実行できたら、node.js と npm のバージョンを確認してみます。

それぞれ安定版（最新版）になっていることが確認できました。この後、依存関係のパッケージをインストールします。

$ npm install

インストールできたら、ようやくnpmコマンドの実行です。

$ npm run build

buildした時にコンソールにも表示されていますが、manifest.jsonが生成されていることが確認できました。では改めてフロントページを見てみましょう。

表示されましたね。

Breezeをインストールしたので、画面右上に「Log in」と「Resister」が追加されていると思います。

結構長くなってしまったので、マルチログインの実装は次回の下巻に持ち越します。