Laravel SailでDocker環境構築

2021/10/02に公開
1

はじめに

Laravel SailはMySQL、Redis、開発者向けの電子メールテストツールであるMailHogが動作する状態でdocker環境を構築できるため、優れたスタート地点で開発を始められます。

この記事ではさらに、開発環境支援ツールとして以下もdockerに追加します。

  • phpMyAdmin(データベース接続クライアントツール)
  • RedisInsight(Redis接続クライアントツール)

この記事を読むと、PHPのデバッグ、MailHogの使い方、phpMyAdmin、RedisInsightのインストール方法を知ることができます。

筆者の開発環境

筆者の開発環境は以下の通りです。
下記を前提に記述している箇所は適当に読み替えていただければと思います。

  • Windows10 Professional
  • vscode
  • wsl2(ubuntu 20.04)
  • Docker Desktopインストール済み

バージョン情報

  • PHP: 8.0.11
  • laravel/framework: v8.62.0
  • laravel/sail: v1.11.0
  • xdebug3

Laravelアプリケーションの作成

Laravelアプリケーションを作成します。

curl -s https://laravel.build/example-app | bash

sailコマンドを公式ドキュメントに従いエイリアスにします。

$ vim ~/.bashrc
alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'
$ source ~/.bashrc

sail upしてLaravelアプリケーションを起動します。

$ cd example-app
$ sail up -d

http://localhostでWelcome画面を確認できます。

vscode

vscode拡張機能の「PHP Debug」をインストールします。

launch.jsonを作成し、以下の通り記述します。

.vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost",
            "webRoot": "${workspaceFolder}",
            "port": 12345
        },
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "hostname": "0.0.0.0",
            "port": 9003,
            "pathMappings": {
                "/var/www/html": "${workspaceRoot}"
            }
        }
    ]
}

pwa-chrome

Google GhromeでJavascriptをデバッグするために使用します。
portを指定することで、Googleにログインできるようになり、ソーシャルログイン等が可能になります。

Listen for Xdebug

PHPをデバッグするために使用します。

PHP XDebug

xdebugをインストールします。
以下はxdebug3の設定です。

$ sail root-shell
$ apt update
$ apt install php-xdebug
$ apt install vim
$ vim /etc/php/8.0/cli/conf.d/20-xdebug.ini
zend_extension=xdebug.so
[xdebug]
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_port=9003

sail stopしてsail-8.0/appコンテナイメージを保存します。

$ sail stop
$ docker commit sail-8.0/appのコンテナID sail-8.0/app
$ sail down

.envファイルに以下を追加することでxdebugが動作するようになります。
XDEBUG_MODEは2021年8月初旬にsailに追加された機能なので、それ以前にインストールしたLaravelアプリケーションでは動作しません。

.env
SAIL_XDEBUG_MODE=develop,debug

sailを再起動します。

$ sail up -d

vscodeでブレークポイントを設定し、Laravelアプリケーションを操作すると、ブレークポイントで停止するようになります。

MailHog

MailHogは開発者向けの電子メールテストツールです。 Laravelで送信したメールの内容をブラウザ上で確認できます。 宛先に設定した実際のメールアドレス宛には送信されません。

fromを設定することでメールを送受信できるようになります。

.env
MAIL_FROM_ADDRESS=mailhog@mailhog.com

http://localhost:8025でMailHogに接続できます。

以下はパスワードリセットメールの例です。


パスワードリセット画面

MailHog

phpMyAdmin

データベース接続クライアントツールとしてphpMyAdminを使用します。
docker-compose.ymlに以下を追加します。

docker-compose.yml
    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        environment:
            - PMA_HOST=mysql
        ports:
            - 8080:80
        volumes:
            - ./infra/docker/phpmyadmin/sessions:/sessions
        networks:
           - sail
        depends_on:
            - mysql
$ mkdir -p ./infra/docker/phpmyadmin/sessions

http://localhost:8080でphpMyAdminに接続できます。

ユーザー、パスワードは.envの以下の設定です。

.env
DB_USERNAME=sail
DB_PASSWORD=password

RedisInsight

筆者の開発環境ではキャッシュをredisにしています。
デフォルトのファイルより確認しやすいからです。

RedisInsightとは、RedisのGUIツールです。

RedisInsightには、次の機能が備わっています。

  • Redisデータベースの視覚化
  • Redisモジュールの組み込みサポート
  • Redisのメモリ解析
  • Redisコマンドの追跡
  • 直感的なCLI
  • Redisの管理

docker-compose.ymlに以下を追加します。

docker-compose.yml
    redisinsight:
        image: redislabs/redisinsight:latest
        ports:
            - '8001:8001'
        volumes:
            - ./infra/docker/redisinsight:/db
        networks:
            - sail
        depends_on:
            - redis

RedisInsightを動作させるためには、以下のディレクトリが必要です。
RedisInsightの公式ドキュメントに従い、権限を変更する必要があります。

$ mkdir -p ./infra/docker/redisinsightsessions
$ sudo chown 1001 ./infra/docker/redisinsightsessions

http://localhost:8001でRedisInsightに接続できます。

データベースの登録を開始します。

以下のように入力して、「ADD REDIS DATABASE」ボタンを押下します。

example-appボタンを押下します。

管理画面が表示されます。

.gitignore

phpMyAdmin、RedisInsightのために追加した以下のディレクトリはローカル環境でのみ必要となります。
なので、.gitignoreに以下を追記して、gitの追跡対象外にします。

.gitignore
/infra

よく使うsailコマンドまとめ

コマンド 説明
sail up sailを起動する
sail up -d バックグラウンドでsailを起動する
sail down sailをシャットダウンする
sail stop sailを停止する
sail shell PHP実行コンテナにsailユーザーでログインする
sail root-shell PHP実行コンテナにrootでログインする
sail composer composerコマンドを実行する
sail artisan artisanコマンドを実行する
sail npm npmコマンドを実行する
sail node nodeコマンドを実行する
sail test PHPUnitのテスト実行
sail test --group orders PHPUnitのテストのオプションも指定できる

URLまとめ

以下に各アプリケーションのURLをまとめました。

項目 URL
Laravelアプリケーション http://localhost
phpMyAdmin http://localhost:8080
MailHog http://localhost:8025
RedisInsight http://localhost:8001

まとめ

Laravel Sailは至れり尽くせりの環境ですぐに開発を開始できるところがいいですね。

それから、ログ出力を追加しておくことをオススメします。

https://zenn.dev/yamabiko/articles/laravel-logging

さらに、Jetsreamを導入して爆速フロントエンド環境を構築したい方は以下の記事をご覧くださいませ。

https://zenn.dev/yamabiko/articles/laravel-jetstream-vite

Discussion