【開発環境】Laravel+Filamentでらくらく管理画面を構築する方法。第1回ベース構築編

徐々に寒くなってきましたが、皆様お元気にお過ごしでしょうか。

1日が短く感じるこんな時期は効率的に開発して、生産的な活動に有限な時間を回していきたいものですね。

概要

管理画面を楽に作れるツールは続々と登場しますね。当ブログでは、以前にNext.js製のCMSツール Strapiの導入手順についてもご紹介しました。

入稿管理システム「Strapi」をMySQL DBで運用する方法。類似サービスも交えて紹介。

個人開発のサービスを開発している中で、Wordpressのようなインターフェースで、コンテンツをガンガン入稿したい...

本連載では、PHPの管理画面作成ライブラリFilamentについて、インストールから開発環境での疎通を行い、CSVダウンロード機能が利用できるようになるまでを極力丁寧に、画像付きで解説して参ります。

どうぞ最後までお付き合いください。

本連載のゴール

Laravel+Filamentを使い、DockerでMySQLデータベースを立て、ローカルで開発環境が利用できる＆CSVダウンロード機能を利用できるようになるまで整える。

対象読者

git/PHP/Laravel/Dockerについて基本的な知識を持っている、プログラミング中級者以上の方
管理画面を少ない手順で構築しようとしている方

要件定義

今回はあくまで技術的な評価を行うため、サンプルプロジェクトを作製しますが、前提として以下のように要件を定義します。

構築するのはSaaSサービスの管理画面
サービスの利用者=一般ユーザーの基本情報を管理者ユーザーにより編集したい。
他、サービスでユーザーが登録したデータの閲覧を行えるようにしたい。
ユーザー一覧をCSVでダウンロードできるようにしたい。

設計

上記の要件を基づいて、簡単に設計を行います。

開発環境で、WWWを経由せずとも、Dockerがあればデータベースに接続し動くようにする。開発環境を立ち上げるphp artisan serve とLaravel sailを使うことにより実現可能。
Filamentをインストールし、/adminでアクセスできるようにする。

構築: Laravelプロジェクトへの疎通まで

Githubのレポジトリ作成

何はともあれ、Githubのレポジトリ作成から行います。こちらから適当な名称でprivateレポジトリの作成を実施。

Laravelのインストール

以下はお手元のローカル環境(Macを想定)で行います。Composerが未インストールの方はあらかじめご用意ください。

Laravelの最新版をインストールしていきます。

cd /User/username/dev/

# laravelのプロジェクトをインストール
composer create-project laravel/laravel test-filament
cd test-filament

Laravel Sailのインストール

開発環境では、仮想環境としてLaravel Sailを利用します。中身はDocker ですが、ユーザーからすると意識しないくらい、コマンドを打つだけでできるくらいに抽象化されています。Dockerを未インストールの方はこちらからいれておきましょう

# プロジェクトのルートで実行。sailをinstall
$ composer require laravel/sail --dev
$ php artisan sail:install

# ここで、mysqlを選択してください
 ┌ Which services would you like to install? ───────────────────┐
 │ mysql                                                        │
 └──────────────────────────────────────────────────────────────┘

Sail scaffolding installed successfully.
[+] Running 1/1
 ⠿ mysql Pulled                                                                                                                                                                                                                                                          2.5s
Sail images installed successfully.
[+] Building 1.8s (16/16) FINISHED
# ここでDocker Imageをダウンロード。省略 ...                                                                                                                                                                                                                               0.0s
Sail build successful.

SailのMySQLコンテナへの疎通設定

.envの以下の設定部分を変更します。

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=sail
DB_PASSWORD=password

Sail 起動

以下のコマンドで、Dockerコンテナをビルドします(DB/user/passwordも.envの設定で作られるはず) すでにdockerの操作に慣れていらっしゃる方も多いかと思いますが基本的なコマンドを列記いたします。どのようなコマンドが他にあるかは、sail helpでもご確認いただけます。

# sail 起動
sail up -d

# 起動状況の確認
sail ps

# webサーバに入る
sail bash
exit # 出る

# mysqlクライアントに入る
sail mysql
> exit # 出る

# 初期テーブルをマイグレーション
sail artisan migrate

# sail 終了
sail down

sail up -dが成功しないときは、すでに作成してしまったMySQLコンテナのボリュームを削除してください。(誤って他のプロジェクトの削除はしないようお気をつけください)

% sail artisan migrate

  INFO  Preparing database.

Creating migration table ............................................................................................................... 47ms DONE

  INFO  Running migrations.

2014_10_12_000000_create_users_table ................................................................................................... 44ms DONE
2014_10_12_100000_create_password_reset_tokens_table ................................................................................... 41ms DONE
2019_08_19_000000_create_failed_jobs_table ............................................................................................. 34ms DONE
2019_12_14_000001_create_personal_access_tokens_table .................................................................................. 39ms DONE

DBへの疎通が無事行え、マイグレーションを行うとこのようにログが出ます。

Chrome等のブラウザにhttp://localhost/を打ち込むと

無事Laravelプロジェクトのトップページが表示されました。

構築: Filamentをインストール

Laravelプロジェクトをすでに運用中の方はよろしければこちらからお読みください。

filamentのインストール

公式サイトのGet Startedを参照します。2023/11/22現在で最新のFilament v3.0を選択していきます。

sail composer require filament/filament:"^3.0-stable" -W

ところで、バージョン記号をつけなくても、v3系は入るようです...まあこの辺りは公式に沿ってということで。

Panelを作成

Filamentのインスールが無事すみましたら、Panelを作製します。Panelとは要するにダッシュボードのようです。

ドキュメントの表示に沿って「admin」を入力しエンターを押します。

$ sail artisan filament:install --panels

# ここでパネル名を入れます。 ┌ What is the ID? ─────────────────────────────────────────────┐
 │ admin                                                        │
 └──────────────────────────────────────────────────────────────┘

# 以下自動的に必要なファイルが生成されます。
   INFO  Filament panel [app/Providers/Filament/AdminPanelProvider.php] created successfully.

   WARN  We've attempted to register the AdminPanelProvider in your [config/app.php] file as a service provider. If you get an error while trying to access your panel then this process has probably failed. You can manually register the service provider by adding it to the [providers] array.

  ⇂ public/js/filament/forms/components/color-picker.js
  ⇂ public/js/filament/forms/components/date-time-picker.js
  ⇂ public/js/filament/forms/components/file-upload.js
  ⇂ public/js/filament/forms/components/key-value.js
  ⇂ public/js/filament/forms/components/markdown-editor.js
  ⇂ public/js/filament/forms/components/rich-editor.js
  ⇂ public/js/filament/forms/components/select.js
  ⇂ public/js/filament/forms/components/tags-input.js
  ⇂ public/js/filament/forms/components/textarea.js
  ⇂ public/js/filament/tables/components/table.js
  ⇂ public/js/filament/widgets/components/chart.js
  ⇂ public/js/filament/widgets/components/stats-overview/stat/chart.js
  ⇂ public/js/filament/filament/app.js
  ⇂ public/js/filament/filament/echo.js
  ⇂ public/js/filament/notifications/notifications.js
  ⇂ public/js/filament/support/async-alpine.js
  ⇂ public/js/filament/support/support.js
  ⇂ public/css/filament/forms/forms.css
  ⇂ public/css/filament/support/support.css
  ⇂ public/css/filament/filament/app.css

   INFO  Successfully published assets!

   INFO  Configuration cache cleared successfully.

   INFO  Route cache cleared successfully.

   INFO  Compiled views cleared successfully.

   INFO  Successfully upgraded!

# 気が向いたら、GithubのレポジトリのStarをつけるのに同意いたしましょう
 ┌ All done! Would you like to show some love by starring the Filament repo on GitHub? ┐
 │ YES                                                                                 │
 └─────────────────────────────────────────────────────────────────────────────────────┘

Filamentログイン用のユーザーを生成

下記を入力してログインユーザーを作ります。

$ sail artisan make:filament-user

 ┌ Name ────────────────────────────────────────────────────────┐
 │ yuta                                                         │
 └──────────────────────────────────────────────────────────────┘

 ┌ Email address ───────────────────────────────────────────────┐
 │ yuta@hogehogehoge.com                                        │
 └──────────────────────────────────────────────────────────────┘

 ┌ Password ────────────────────────────────────────────────────┐
 │ ••••••••••••••••                                             │
 └──────────────────────────────────────────────────────────────┘

   INFO  Success! yuta@hogehogehoge.com may now log in at http://localhost/admin/login.

無事ログインユーザーができました。

ドメインの制限解除設定

Filament独自の制約なのですが、ログイン時のメールアドレスの制限解除設定を行わないとログインが完了しません。 これは、WebサーバにFilamentを設置した時の 最低限のフェールセーフ と思います。

Basicなどをおかずに裸で置いた場合、ブルートフォース攻撃で突破される可能性が非常に高いからだと思われます。

このままでは使えませんので設定作業を進めます。具体的には

継承など呼び出しを追加する。
app/Models/User.phpに、canAccessPanelメソッドを追加する。yourdomain.comの部分を、作成したユーザーのドメインに変更します。

必要があります。

 <?php
 
namespace App\Models;
 
# 下記行のuseを追加する
use Filament\Models\Contracts\FilamentUser;
use Filament\Panel;
use Illuminate\Foundation\Auth\User as Authenticatable;
 
# 下記行で、implements FilamentUserを追加する
class User extends Authenticatable implements FilamentUser
{
    // ...
 
    public function canAccessPanel(Panel $panel): bool
    {
		# 下記の行のyourdomain.com部分を変える
        return str_ends_with($this->email, '@hogehogehoge.com') && $this->hasVerifiedEmail();
    }
}

Filamentへのログイン

こちらまで行って

http://localhost/admin/login

にアクセス。

ID/パスワードを入力し、

ログインが完了すると、ダッシュボードのトップページが表示されます。

Filamentへのログインがひとまず、行えました。

先述の閲覧制限解除が完了していませんと、404エラーが出るのでくれぐれもご注意ください。

まとめ

記事が長くなってまいりましたので、Filamentでどのように管理画面構築を行うかは、次回記事に内容として回したいと思っております。

2023/11/26追記。第2回を投稿しました！

参考記事:

【開発環境】Laravel+Filamentでらくらく管理画面を構築する方法。第2回画面構築の基本編

本連載は、Laravel+Filamentというフレームワーク＆ライブラリの組み合わせを通じて、インストールから入りひとまず簡単に...

連載記事をお読みいただきありがとうございました！
引き続き当ブログをよろしくお願いいたします。