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

はじめてのrails、まずはローカル環境構築してみる

1 はじめに2 必要なライブラリ・ツールのインストール2.1 homebrew, rbenv2.2 rbenv-communal-gems3 最新安定版のrubyをインストール4 bundler, r ...

Go言語

Go言語の基礎〜Go 1.11 開発環境構築とパッケージバージョン管理〜

1 はじめに2 Go言語(Golang)とは2.1 シンプルな構文2.2 コンパイル言語2.3 並行処理2.4 その他の特徴3 Go開発環境の構築3.1 Goのインストール3.1.1 1. homeb ...

postgresql

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

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

Pythonで書かれたスクレイピングのコードをRubyで書いてみる

1 はじめに2 仕様3 ソースコード4 使用したモジュール、Gem5 対象ページを取得6 XPATHから目的のものを抜き出す7 次のページのリンクを取得する8 さいごに はじめに 以前、技術評論社さん ...

Rubyを使ってDialogflowのお勉強

1 はじめに1.1 環境2 とりあえずAPIで叩いてみる2.1 テスト用のIntentを作成2.2 Gemの設定3 Eventについて3.1 WELCOMEイベント3.2 パラメータ付きで叩く3.3 ...

フォロー

blog-page_side_responsive

2022年7月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

アプリ情報

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