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


関連記事

laravel logo

Deployerで複数の環境やサーバにデプロイするには

1 はじめに2 hosts.ymlファイルの作成3 プロダクション・ステージング環境を分ける3.1 ymlファイルの記載3.2 デプロイコマンド4 複数台のサーバに同時リリースする4.1 ymlファイ ...

rails

RailsでS3に画像をアップロードする

1 はじめに2 今回やりたいこと3 下準備3.1 ImageMagickをインストールする3.2 Gemをインストールする4 レコード生成時にファイルを指定してアップロードする4.1 アップローダを作 ...

【Git】マージコミットを消したい

1 はじめに2 例えばこんなことってないでしょうか?3 マージコミットを消す4 さいごに はじめに こんにちは、tonnyです。 今回はGitのケーススタディ的なものを書きたいと思います。 反面教師と ...

麻雀で自分が何を切るか学習させる

1 はじめに2 プロジェクト名を決めてみる3 何切る問題で考慮される要素3.1 手牌3.2 ドラ3.3 考慮していない要素(本当は入れたい)4 学習の方法5 さいごに はじめに 前回執筆しました、配牌 ...

postgresql

PostgreSQLでテーブルをパーティショニングする

1 はじめに2 パーティショニングとは3 PostgreSQLでのパーティショニング3.1 パーティションテーブルでの制約3.2 パーティショニングの種類4 パーティションテーブルを定義する4.1 古 ...

フォロー

blog-page_side_responsive

2022年7月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

アプリ情報

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