Laravel SailをWindowsにインストールする方法を分かりやすく解説② phpMyAdminとLaravel Breeze のインストール

Laravel Sail

Laravel SailをWindowsにインストールする方法について、解説します。今回はphpMyAdminを使えるようにした後、Laravel Breezeパッケージをインストールして認証機能が使えるようにしていきます。

ほかにもエイリアス登録など、盛沢山でお届けしていきます。

Junko
Junko

ひとつひとつ必要な設定を行って、使いやすい環境を作っていきましょう。

なお、WSL2, Ubuntu, Dockerといった必要な環境のインストール方法は前回記事で解説しています。

もしまだ準備できていない場合は、前回の記事を参考に、必要なツールを入れておいてください。

Visual Studio CodeでLaravel Sailプロジェクトを編集できるようにする

ここからプロジェクトを編集する際には、Visual Studio Codeを使っていきましょう。

Junko
Junko

VS Codeについては、別の記事でインストール方法など解説しています。もしまだ入れていない場合には、まずこちらを見てくださいね。

今回作成したプロジェクトは、下記の場所に入っています。

VS CodeのOpen Folderから、下記の場所をたどり、プロジェクトのフォルダを開いてください。

\\wsl$\Ubuntu\home\ユーザー名\test-app

VS Codeとの連携は、下記記事で詳しく解説しています。

Laravel SailでphpMyAdminを使えるようにする

次に、データベースの設定を進めていきましょう。

Laravel Sailは、デフォルトでMySQLが使えるようになっています。ただそのままでは、視覚的にテーブルを見たりすることができません。

不便なので、phpMyAdminを使えるようにして、ブラウザ上でデータベースを確認できるようにしておきます。

① Laravel Sailをとめておく

まずはUbuntu上で ./vendor/bin/sail down を実行し、起動しているLaravel Sailを止めておきます。

② docker-compose.ymlファイルを編集

次にプロジェクトの中のdocker-compose.ymlファイルを開きます。

ファイルの中に、50行目あたり、mysqlの設定の後に、phpMyAdmin用の設定を加えます。

(!バージョンや環境によって、行数は違う可能性があります)

③.envの編集

Visual Studio Codeを起動してプロジェクトフォルダ内の.envファイルを開きます。

データベースの設定を下記のようにしておきます。

④ブラウザでphpMyAdminを確認する

ファイルを保存後、再びUbuntuに戻り、 ./vendor/bin/sail up -d を実行します。

Junko
Junko

ちなみに、エディタ上で上矢印↑を押すと、最近実施したコマンドが出てきます。コマンドを再度入力する手間が省けて便利ですよ。

ブラウザで http://localhost:8080/ を表示すると、次のようにphpMyAdminが出てきます。

ユーザー名とパスワードをいれて、ログインしてみましょう。デフォルトでは、ユーザ名はsail, パスワードは passwordです。

エラー対策:MySQL サーバにログインできません と出る場合

sail downでsailをとめた後、.envファイルのDB_HOST=mysqlを DB_HOST=localhostに変更してください。その後、再度 ./vendor/bin/sail up -d でsailを起動してください。

BASHエイリアスを作ってSailコマンドの入力をラクにする

このあとは、コマンド入力によってマイグレーションを実行したり、認証機能をつけたりしていきます。

Laravelでは、通常コマンドを入力する場合には “php artisan” を最初に入れます。

Laravel Sailの場合には、”./vendor/bin/sail”と入れていきます。これは、プロジェクトの中の /vendor/bin/sailを実行しているためです。

ただ、毎回 “./vendor/bin/sail”といれるのは、結構面倒ですよね。そこで設定を変え、”sail”と入れるだけでコマンドが実行できるようにしましょう。

仮想空間のホームディレクトリに移動します。

\\wsl$\Ubuntu\home\ユーザー名

Junko
Junko

.bashrcは隠しファイルです。表示されない場合は、隠しファイルが表示される設定にしておきましょう。

.bashrcファイルを開き、下記を末尾に1行追加します。

これでOKです。変更を反映させるために、下記を実行します。

ここから先は、コマンドの最初は “./vendor/bin/sail” ではなく、”sail” と入れていきますね。

Laravel Sailに Breezeパッケージをインストールする

Laravelには認証機能(ログイン)等を手軽につけられるパッケージがいくつかあります。Breezeパッケージが一番使いやすいため、こちらを入れていきます。

Junko
Junko

他のパッケージについてご興味あれば、下記の記事にまとめてあります。

① Breezeのインストール

スタートメニューから、Ubuntuエディタをもうひとつ起動させます。

cdコマンドで、プロジェクトの場所まで移動します。

ここで、Breezeパッケージをいれます。

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

”Please execute the [npm install && npm run dev] commands to build your assets.”と表示されます。コマンドを実行していきましょう。

最初に sailをつけて、コマンドを実行します。

② マイグレートする

次に、マイグレートを行います。

③ ログインする

もしLaravel Sailを止めている場合は、下記コマンドで、Laravel Sailを起動します。

ブラウザに http://localhost/ を表示させます。Breezeがインストールされると、右上にlogin Registerメニューが表示されています。

loginボタンをクリックするとloginメニューが表示されます。

④ Laravel Vite利用時はhotファイルを編集する

なお現在、デフォルトでLaravel Mixではなく、Laravel Viteが入るようになっています。Laravel Viteの場合は、次のように、Tailwind CSSが反映されない状態となっています。

プロジェクト内のpublic/hotファイルを開いてみると、URLが http://0.0.0.0:5173と入っているかと思います。このために、このエラーが起こります。次のようにhttp://localhost:5173に変更しておきましょう。

ただhotファイルは、Viteを止めると削除され、npm run dev実行時にまた新たに作成されます。

毎回hotファイルを変更するのは面倒なので、vite.config.jsファイルを開き、下記の設定を加えておきましょう。

ユーザー登録をしてみましょう

ここまで出来たら、一通りの最初の設定は終わりです。

http://localhost/registerページを開き、ユーザー登録をしてみてください。

登録したユーザー情報は、phpMyAdminのusersテーブルに登録されているはずです。

さいごに

ここまででLaravel Sailを使った開発環境ができました。

なおユーザーインターフェースやエラーメッセージの日本語化や、時刻等の初期設定の変更など、行っておいた方が良い設定があります。

下記の記事の「Laravelの初期設定をする」を参考にすすめてください。

 

なおLaravelの使い方をいちから学びたい場合には、【Laravelの教科書】という学習サイトをご用意しています。

学習サイトでは、現在はXAMPP(ザンプ)を使ったインストール方法を紹介していますが、この部分は今回の記事でご紹介しているので、飛ばしてください。

インストールの後はLaravelの基本の仕組みを学びつつ、フォーラムサイトを作っていくという実践的な内容です。

【Laravelの教科書を通じて作成するWebアプリの画面】

Junko
Junko

どんな機能が搭載できるのか気になったら、下記の案内ページを見てみてくださいね。基礎編部分は無料です。

Laravelの教科書について詳しく知る

Laravel Sail Laravel入門

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

Laravel8版と、最新のLaravel9版、ふたつのテキストご用意してます♪

Laravel関連のご相談承ってます♪
「Webアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Laravel関連のご相談承ってます♪
「Webアプリを開発してほしい」
「社内にLaravelが分かる人がいない。コンサルしてほしい」
そんな企業様のご依頼承っています。
お問い合わせはこちら
Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました