徐々に寒くなってきましたが、皆様お元気にお過ごしでしょうか。
1日が短く感じるこんな時期は効率的に開発して、生産的な活動に有限な時間を回していきたいものですね。
概要
管理画面を楽に作れるツールは続々と登場しますね。当ブログでは、以前にNext.js製のCMSツール Strapiの導入手順についてもご紹介しました。
本連載では、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へのログインがひとまず、行えました。
まとめ
記事が長くなってまいりましたので、Filamentでどのように管理画面構築を行うかは、次回記事に内容として回したいと思っております。
2023/11/26追記。第2回を投稿しました!
参考記事:
連載記事をお読みいただきありがとうございました!
引き続き当ブログをよろしくお願いいたします。