BackEnd

Laravel Sail 環境に Laravel Breeze を導入してみた

投稿日:

はじめに

Laravel8から、Laravel UIの後継としてLaravel Breezeが登場しました。
Laravel Sail 環境に導入して最短でローカル開発環境を構築してみたいと思います。

Laravel Sail とは

公式で出されているDocker環境構築セットみたいなものです。非常に簡単にDocker環境を構築する事が出来ます。
詳細は過去記事を参照ください。

Laravel Breeze とは

一通りの認証機能が揃っているスターターキットです、Viewファイルも用意されています。
新規登録、ログイン、ログアウトなどの一般的なアプリケーションの共通機能箇所の実装が楽に出来る様になります。
詳細はこちら

Laravel Breeze のインストール

予め、Laravel Sail を利用してDocker環境構築しておいてください。

Composer

Laravel Breeze をインストールします。
今回は、2行目の最後に vue を付けて、フロントフレームワークとしてVueを含めます。
ちなみに、 react と入力すればReactが、何も入力しないとAlpine.jsが含まれる様です。


cd Laravelプロジェクト階層
./vendor/bin/sail composer require laravel/breeze --dev
./vendor/bin/sail php artisan breeze:install vue // vueを指定

npm

Laravel Breeze パッケージがインストール出来たら、JSパッケージもインストールします。


./vendor/bin/sail npm install
./vendor/bin/sail npm run dev

マイグレーション

認証機能に必要なテーブルのマイグレーションファイルが用意されています。
Laravel Sail 導入時にマイグレーションしていない場合は、migrateしておきましょう
./vendor/bin/sail php artisan migrate

確認

これでデフォルト画面や認証に必要なファイル一式が生成されており、
http://localhost からホーム画面を表示すると、Login と Register ボタンが追加されています。
新規ユーザー登録やログインする事も既に可能です。

Inertia.js

Laravel Breezeには、Inertia.jsが含まれています。
詳細は上記の公式リンクを参照して頂きたいのですが、ざっくり言うと、LaravelバックエンドとVue(React)フロントサイドの連携をより簡単に行える様にするものです。
具体的には、LaravelからVueのレンダリングにbladeファイルを通じて値を渡して行っていましたが、直接行う事が出来ます。

例えば、ホーム画面のレンダリング用の値渡しは以下のコードで行われています。
bladeファイルに値を渡すかの様にVue側に値を渡す事が出来る様です。

Vue側では、今まで通りPropsの定義をするだけです。

さいごに

Laravel SailとLaravel Breezeを使うと、短時間でDocker開発環境に認証機能付のJSフレームワーク利用したアプリケーション開発が可能になります。
TailwindというCSSフレームワークも使用されているので、そちらもチェックしてみようと思います。

おすすめ書籍

プロフェッショナルWebプログラミング Laravel これからはじめるVue.js 3実践入門 Vue.js入門 基礎から実践アプリケーション開発まで

blog-page_footer_336




blog-page_footer_336




-BackEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

rails

Active Strageを使用してユーザーのアバターを登録、表示する

1 はじめに1.1 環境2 セットアップ2.1 前準備2.2 マイグレーションファイル作成2.3 設定ファイル3 実際に使って見る3.1 モデル3.2 コントローラー3.3 ビュー4 個人的メモ4.1 ...

laravel logo

LaravelのFacade(ファサード)とは? 何気なく使用していた裏側の仕組みを解説!

1 はじめに1.1 Facadeを使用しているクラス2 Facadeの仕組み3 Facadeの作成3.1 サンプルコードに必要な実装3.2 Serviceの作成3.3 Facadeクラスの作成3.4 ...

rails

関連するモデルのレコードを一緒に作成する方法

1 はじめに1.1 前提条件2 実装2.1 モデルの作成2.2 コントローラの作成2.3 Viewの作成3 さいごに はじめに フォームからレコードを作成する際に、関連するモデルのレコードを一緒に作成 ...

rails

【Puma】アプリサーバのチューニング

1 はじめに2 チューニングで注意する項目3 子プロセスの数3.1 最低3つの子プロセスを割り当てる3.2 最大子プロセス数3.3 CPUコア数と子プロセス数3.4 なぜPumaの子プロセス数を増やす ...

Go言語

Goのfmt.print系関数のまとめ

1 はじめに2 print関数の命名規則3 各print関数の説明3.1 Print(標準出力へ出力)系関数3.2 Sprint(文字列を出力)系関数3.3 Fprint(ファイルへ出力)系関数4 書 ...

フォロー

blog-page_side_responsive

2022年7月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。