記事公開日
最終更新日
Docker Composeで立ち上げたLaravelを Voyagerでカスタマイズする
前回の記事、「Docker ComposeでLaravel検証環境をサクッと立ち上げる」では、Docker Compose で Laravel 検証環境を立ち上げる手順についてご紹介しました。
今回は、前回の内容から一歩進めて、Dockerコンテナ内で動作しているLaravelにカスタマイズを加えて、Webアプリケーションとして利用するための手順をご紹介していきます。
使用するツール
Voyager
Voyager は、一言でいうと Laravel に管理画面を追加するためのパッケージです。
が、単に管理画面が追加されるというだけでなく、以下のような便利な機能が揃っています。
メディア マネージャー
画像、音声、動画のファイルを複数アップロードしたり、削除したりできます。
自前でアップローダーを実装しなくて済むので、UIやセキュリティ面で悩む必要がなく、便利です。
メニュー ビルダー
ログインユーザーのロール（権限）ごとに異なるメニューを設定することができます。
データベース マネージャー
phpMyAdmin のような SQL クライアントツールを用意しなくても、Voyager から DB にテーブルを追加・削除したり、テーブル名や列の型を変更したりすることができます。
BREAD/CRUD ビルダー
一般的によく使われる「 CRUD 」のことを、Voyager では BREAD と呼んでいます（ Browse, Read, Edit, Add, Delete ）。
データベースマネージャーで作成したテーブル（とモデル）に対応して BREAD を作成すると、一覧画面、詳細画面、追加、編集、削除のそれぞれの画面や機能が追加されます。
環境構築
構成図
本記事の手順を実行すると、以下の図のようなサービス一式が構築されます。
構成としては、前回の記事とほぼ同様になりますが、Voyager が Laravel 8 に対応しきっていないため、 Laravel 7をインストールするように Dockerfile を変更しています。
また、 Voyager のデータベースマネージャーがあるので phpMyAdmin は不要に思われるかもしれませんが、データベースマネージャーではデータのインポートやエクスポートを一括実行することができないので、念のため残しておきます。
手順
①以下のコマンドを実行して、ローカルにリポジトリを複製します。
https://github.com/qesblog/laravel-voyager-on-docker-containers にアクセスして内容を確認できます。$ git clone https://github.com/qesblog/laravel-voyager-on-docker-containers |
$ cd laravel-voyager-on-docker-containers |
以下の値を設定値として埋め込んでいるので、これらをVS Codeなどのテキストエディタで検索・一括置換すると楽です。
| 設定項目 | 埋め込まれている定数値 | 備考 |
|---|---|---|
| MYSQL_ROOT_PASSWORD | ROOTPASSWORD |
DBコンテナで動作するMySQLのrootパスワード |
| DB_DATABASE | DATABASENAME |
DB名 |
| DB_USERNAME | USERNAME |
LaravelからMySQLにアクセスする際のユーザー名 |
| DB_PASSWORD | USERPASSWORD |
LaravelからMySQLにアクセスする際のパスワード |
| APP_URL | http:\/\/example.com/ |
Laravelが動作しているURL |
※定数値は sed コマンドの引数に渡すため、必要に応じてエスケープしておく必要があります。
④ host.sh を実行します。
$ bash ./host.sh |
スクリプトファイル host.sh には、以下の様な処理が呼び出されるようにコマンドが記載されています。
- Docker コンテナをビルド・起動
- Docker コンテナの中に入り設定値を置換・DBをマイグレート
- Voyager のインストール・サンプルデータの生成
- 新規ビュー・ルートの追加
⑤ブラウザを開いて、Laravelにアクセスします。
アクセスするドメインやIPアドレスは、環境により異なります。
Dockerを動かしているホストマシン自体で http://localhost にアクセスするのが一番お手軽です。
（ https ではなく http なので、Chromeなどを使っている場合は勝手に補完されないように注意が必要です）
⑥続いて、Voyagerにアクセスします。
URLは、⑤でLaravelにアクセスしたIPアドレスに/adminを追加したものです。
Dockerを動かしているホストマシン自体でアクセスするなら http://localhost/admin です。
（ https ではなく http なので、Chromeなどを使っている場合は勝手に補完されないように注意が必要です）
Voyagerでの操作
Voyagerにアクセスし、ログインを済ませると、以下のような画面が表示されます。
Voyagerをインストールする際にサンプルデータを一緒にインストールしているため、いくつかのデータが既に用意された状態になっています。
そのため、ダッシュボードに、
1 User, 4 Posts, 1 Page
のように表示されています。
続いて、左側のメニューアイコンから、Users画面を開いてみます。
Adminユーザー（現在ログインしているユーザー）が存在していることが分かります。
ユーザー名の変更などの操作は、この画面から行います。
次に、Posts画面を開きます。ユーザーと同様に、サンプルデータが予め用意されています。
最後に、Voyagerではなく、Laravel本体（URLの末尾に
/admin を付けないもの）にアクセスしてみます。前回の記事では、Laravel標準のWelcomeページが表示されていましたが、今回は、Voyagerのインストールが完了した後に、新規のビューとルートを追加する作業も、スクリプト内に記載し、実行しているため、先程Voyagerの中で確認したPosts（投稿）を一覧／詳細表示するようになっています。
まとめ
本記事では、Docker Compose を利用して立ち上げた Laravel 検証環境に、VoyagerをインストールしてWeb アプリケーションとして利用するための手順について簡単にご紹介しました。
次回以降、さらに Laravelをカスタマイズしていき、
本番環境にデプロイして運用していくために必要な知識について、ご紹介できればと考えています。
このブログで参照されている、 Git は、米国およびその他の国における Software Freedom Conservancy, Inc. の商標または登録商標です。
このブログで参照されている、 GitHub は、米国およびその他の国における GitHub Inc. の商標または登録商標です。
このブログで参照されている、DockerおよびDocker Composeは、米国およびその他の国における Docker Inc. の商標または登録商標です。
このブログで参照されている、Microsoft、Windows、その他のマイクロソフト製品およびサービスは、米国およびその他の国におけるマイクロソフトの商標または登録商標です。
