【WSL】 Laravel 12 / Sail / Breeze で開発環境構築する

Laravel
記事内に広告が含まれています。

以前(2023年頃)に LaravelSail で Breeze のセットアップまでを行うポストを作成しましたが、それと同様に、2025年11月現在のバージョンである Laravel12 の開発環境を作成したいと思います。

ちなみに前回の環境作成はこちらのポストです。

今回も前回同様、WSL と Docker を使用します。

ちなみに2025年4月ごろから、Laravel Breezeの利用は推奨されていないようですが、認証の仕組みをもたせるのに便利なので、ひとまず組み込むことを目的に進めたいと思います。

どうしても出来ないとなったら、次の手段を考えることとします。

1. Laravel Sail でプロジェクト作成

まずは、Docker Desktopを起動させましょう。
全てはそこからです。

次に、プロジェクト名を考えます。
プロジェクト名は sample とか demo などでも良かったのですが、開発を続ける気にもならない名前だとテンションも下がるので、今回のプロジェクト名は「laravel-books」とし、書籍の管理アプリを作る体で進めることとします。

例によって、私の環境は /home/tsuxxxxxx/source 以下にまとめているので、sourceディレクトリまで移動して下記コマンドを実行します。

参考までに、下記がsourceディレクトリ以下の状況です。

下記コマンドを実行します。

実行すると laravel-books ディレクトリが生成され、それ以下にファイル群が展開されます。
割と時間がかかるので、気長に待ちましょう。

終盤というか最後に、Ubuntuのルートパスワードの入力を求められるので入力します。

これで、プロジェクトの作成が完了しました。
お疲れ様です。

 

1-2. UbuntuからLaravel Sailを起動

下記コマンドでUbuntuからLaravel Sailを立ち上げます。

Docker Desktop も以下のような状態になればOKです。

 

2. phpMyAdminを追加

では次に、phpMyAdminの設定(インストール)を行います。

2-1. Laravel Sailの停止

Laravel Sailが起動していたら停止させます。

./vendor/bin/sail stop

2-2. VS Codeでプロジェクトファイルを開く

VS Code を起動し、プロジェクト全体を読み込ませます。
ウィンドウ左下の接続先からWSLを選択し、今回のプロジェクトを指定します。

2-3. compose.yaml ファイルの編集

プロジェクト中に含まれている compose.yaml に下記内容を追記します。
yamlファイルはインデントなどにかなりシビアで、一行ずれているだけでエラーとなるので、細心の注意でコピペしましょう。

ちなみに以前、同様の環境を作成した際は、docker-compose.yml だったのですが、バージョンが上がったことで変更になったのでしょうか…?

 

3. 「.env」ファイルの編集(Laravelの環境設定)

プロジェクト内の設定ファイルの編集を行います。

3-1. データベース設定の確認

プロジェクトフォルダ内にある .env ファイルを開き、データベースの設定を確認しておきます。

デフォルトで下記のような設定となっていました。
DB_USERNAMEとDB_PASSWORDは、phpMyAdminにログインする時に必要な情報です。

 

3-2. 環境設定の編集

続いて.envファイル内の環境設定を行います。
デフォルトでは英語の設定になっているところを、日本語設定にするなどします。

 

3-3. タイムゾーン変更

Laravel 12では config/app.php を直接変更する必要があるとのこと。

もしくは、config/app.phpで

として、.envで

と設定します。

3-4. sailの再起動

ここまで完了したら、Laravel Sail の再起動を行います。

phpMyAdmin も起動しているようです。

4. ブラウザアクセス

4-1. Laravel トップページへのアクセス

まず Laravel のトップ画面を開きます。

http://localhost

なんだか格好いいページが表示されました。
ひとまず安心。

4-2. phpMyAdmin

では次にphpMyAdminです。
compose.yaml に設定したポート番号を指定します。

http://localhost:8081

無事に両方ともアクセスできているようです。
ここまではバッチリですね。

ログインできるかもテストしておきます。
先程の3-1で確認したユーザー名(sail)とパスワード(password)でログインできるはずです。
※パスワードはあえてデフォルト値でテストしています。

無事にログインできました。

4-3. ログイン情報の設定箇所

ログイン画面の設定箇所についてまとめておきます。

4-3-1. .envファイル

Laravel Sailの環境では、MySQLコンテナとphpMyAdminコンテナの両方が、プロジェクトのルートディレクトリにある .envファイル から以下の環境変数を読み込んでいます。

変数名 phpMyAdminでの役割 デフォルト値(一般的なSailの場合)
DB_USERNAME ユーザー名(MYSQL_USERNAMEとしてphpMyAdminに渡される) sail
DB_PASSWORD パスワード(MYSQL_ROOT_PASSWORDとしてphpMyAdminに渡される) password または設定した値

工程 3-2 でしたように、.envファイルを開き、DB_USERNAMEDB_PASSWORDに設定されている値を確認してください。

4-3-2. compose.yaml の連携設定

今回設定した compose.yamlphpmyadminサービス設定では、これらの.envファイルの値が適切に参照され、コンテナに渡されていることが確認できます。

  • ユーザー名.envファイルに設定されている DB_USERNAME の値
  • パスワード.envファイルに設定されている DB_PASSWORD の値
  • サーバー名/ホスト名: 設定の通り mysql (これはコンテナ間の通信名であり、phpMyAdminのログイン画面で入力するものではありません)

4-4. インストールされたLaravelのバージョンの確認

トップページの画像がバージョン12のイラストになっているので、おそらくは問題ないとは思いますが、一応コマンドラインからも確認しておきます。

Laravel Framework 12.38.1 がインストールされていることが確認できました。

4-5. warningの解消

Laravelのバージョンを調査した際、下記警告メッセージ(ワーニング)が出ているのが気になるので対処します。

WARN[0000] The “MYSQL_EXTRA_OPTIONS” variable is not set. Defaulting to a blank string.

そもそもこのワーニングは何なのか?

これは Laravel Sail (Docker Compose) がコンテナを起動する際に表示される単なる警告であり、動作上の問題を引き起こすものではありません

  • WARN[0000]: 深刻なエラーではなく、警告(Warning)であることを示しています。
  • MYSQL_EXTRA_OPTIONS: これは MySQL サービスのコンテナ(通常、laravel-books-mysql-1)に渡される環境変数です。
  • variable is not set. Defaulting to a blank string.: この変数がプロジェクトの環境ファイル(通常は .env ファイル)やその他の場所で定義されていないため、Docker Compose はこの変数を何も値のない **空の文字列** ("") と見なして処理を続行していることを意味します。

つまるところ、この警告メッセージは、環境変数 MYSQL_EXTRA_OPTIONS が設定されていないため、システムがそれを空の文字列として扱っていることを示しています。

この定数の用途

MYSQL_EXTRA_OPTIONSは、MySQL サーバー起動時に渡す追加のコマンドラインオプションを指定するために使用されます。
例えば、特殊な設定ファイルを使いたい場合や、パフォーマンス関連の特定のフラグを渡したい場合などに .envファイルでこの変数を設定します。

結論として、この警告はMySQLサービスが既定のオプションで起動されていることを示しているだけです。Laravelアプリケーションの通常の開発や実行には影響しませんので、無視しても問題ありません

無視しても良いとのことですが、コンソールに表示されるのは精神衛生上よろしくないので.env ファイルに下記行を追加しておきます。

これでワーニングも回避できました。
グゥレイト!

5. Laravel Breeze のセットアップ

Larabel Breeze とはなんぞや。

簡単にいうと、ユーザ認証機能のパッケージです。ユーザを作成して。ログイン、ログアウトをさせるアレです。Laravelではいくつか同様の機能のパッケージがあるようですが、比較的とっつきやすいのが Larabel Breeze とのことなので、使ってみたいと思います。

5-1. Laravel Sail 起動

トップページや phpMyAdmin が起動しているので、すでに sail は起動していると思いますが、起動していない場合は下記コマンドで起動します。

./vendor/bin/sail up -d

5-2.Laravel Breeze のインストール

VS Codeでプロジェクトを開き、インストールコマンドを入力します。
Ctrl + @ 同時押し、もしくはメニューバーにある「パネルの切り替え」で VS Code のターミナルを開きます。

下記コマンドを入力し、composer を使って laravel/breeze パッケージを追加します。
composert とは PHPer にはおなじみのパッケージマネージャーです。

インストールに成功したら、続いてLaravelで利用する準備をします。次のコマンドを入力します。
今度は「artisan」というツールを利用します。

下記のように、質問が3個表示されますので、回答していきます。
上下左右のカーソル移動で選択肢を変更し、エンターキーで決定。

↑ここでは、一番上の「blade」を選択します。

↑ダークモードを使用するかということなので、とりあえず「No」を選択します。

↑テスト用フレームワークです。お好みでどうぞ。従来型が PHPUnit、よりモダンなのが Pest という指標がある程度です。今回は「Pest」を選択しました。

↑途中経過の画面はこんな感じです。

しばらく待つと、インストールが終了します。

完了したのかどうか、プロジェクトをブラウザに表示します。
右上にLogin/Registerボタンがあれば成功です。

http://localhost/

↑インストールは成功したようです。

「Log in」ボタンを押してみると、ログイン画面へ遷移します。

もう片方の「Register」ボタンを押すと、ユーザー作成画面へと遷移します。

 

5-3. マイグレートでDBにテーブルを作成する

Breezeのインストールは完了しましたが、ユーザ情報等を登録するデータベーステーブルがまだない状態ですので、migrate 機能を使ってテーブルを作成します。

下記コマンドを入力します。

 

あっという間にテーブル作成が終了しました。
データベースがマイグレートされ、ユーザ認証に必要な4つのテーブルが作成されました。

5-4. ユーザ登録を行う

それでは先程作成された「Register」ボタンをクリックして、実際にユーザー登録してみます。

先程確認した通り、「Register」ボタンをクリックすると、ユーザー登録画面が表示されます。
NameとEmail、PasswordとConfirm Passwordには同じパスワードを入力します。
なお、登録する内容(メールアドレスとか)は実在しない適当な文字列でも構わないとのことです。

例として、下記内容を登録します。

Name:toogie
Email:手持ちのGメールアドレス
Password / Confirm :12345678

ユーザー情報を入力したあとに「REGISTER」ボタンをクリックすると、ダッシュボード画面が表示されます。

 

5-5. データベースに登録されている内容を確認する

ユーザも登録できたところで、DBにはどのように登録されているのか確認してみます。
phpMyAdminにアクセスします。

http://localhost:8081/

laravel データベースをクリックし、中にある users テーブルをクリックします。

 

6. Laravelの言語設定を変更し、日本語化する

インストールしたばかりの Breeze は英語にてメッセージが表示されているので、日本語ファイルを当てて日本語化します。
下記の3つの初期設定を行います。

  1. タイムゾーン
  2. 言語
  3. 警告メッセージの日本語化

6-1. タイムゾーンの設定

これらはすでに工程3-2、3-3 で行っていますが、まだ行っていない人はこの際に変更してください。

Laravelをインストールしたフォルダの中の config/app.php ファイルを開きます。
70行目ぐらいに timezone があるので 【Asia/Tokyo】 と変更します。

‘timezone’ => ‘UTC’,
↓↓ 変更 ↓↓
‘timezone’ => ‘Asia/Tokyo’,

 

6-2. 言語の変更

続いて.env ファイル内の環境設定を行います。7行目付近の設定を、日本語とすべく変更します。

APP_LOCALE=ja
APP_FALLBACK_LOCALE=ja
APP_FAKER_LOCALE=ja_JP

config/app.php 設定について

config/app.php ファイルの 80行付近に下記設定がありますが、.envファイルで日本語化していれば、その設定が第1引数にセットされる仕組みなので、デフォルトのままでOKです。

‘locale’ => env(‘APP_LOCALE’, ‘en’),
‘fallback_locale’ => env(‘APP_FALLBACK_LOCALE’, ‘en’),
‘faker_locale’ => env(‘APP_FAKER_LOCALE’, ‘en_US’),

 

6-3. メッセージの日本語化

最後にLaravelのユーザーインターフェースや警告メッセージ等を日本語にしていきます。

残念ながら言語の設定を変えただけでは、日本語にはなりません。
Laravelはデフォルトでは英語用のメッセージしかないので、日本語訳を追加する必要があります。

日本語訳の置き場所は、プロジェクト直下の lang ディレクトリの中となります。 旧来のLaravelでは lang ディレクトリはデフォルトで存在しましたが、先程も調べた今回インストールされたLaravel 12では自分で作成する必要があるようです。(といっても、下で紹介するコマンドを使えば自動作成されます)

例えば業務システムやマニアックな単語を必要とするシステムなどは、ひとつひとつ地道に日本語化していく必要は後々必要になってくるとは思いますが、まずは有志の方が作成し公開してくれている言語ファイルを使用する方法を紹介します。

6-3-1. 言語パッケージインストール

 

6-3-2. 言語ファイルの展開

 

上記2つのコマンドを実行後、プロジェクト直下に「lang」ディレクトリが追加され、配下の ja ディレクトリに

  • ja/auth.php
  • ja/pagination.php
  • ja/passwords.php
  • ja/validation.php
  • ja.json

これらのファイルが出来上がっていれば完了です。

完了したらば一度サーバーを再起動します。
Ubuntu のターミナル上で Ctrl + C キーでサーバーを中止し、そして改めて起動します。

./vendor/bin/sail up -d

ブラウザで初期画面を表示し、先程ユーザを作成した「Register」リンクをクリックします。
すると。。。

おおお、見事日本語化されました。
Login画面の方も確認します。

こちらもちゃんと日本語化されています。
ログインしてみましょう。

英語だった部分がすべて日本語になっています。素晴らしい。

と、自分で後で読んで分かりやすいようにプロジェクトの作成からphpMyAdminBreezeLaravel 12のメッセージの日本語化までを一通りやってみました。

この環境を使い、次はまた掲示板やツイッターのようなメッセージをポストしてDBに保存する、いわゆるCRUDアプリを作ってみたいと思います。

Laravel
スポンサーリンク
シェアする
toogieをフォローする
タイトルとURLをコピーしました