前提
- 過去記事「Laravelをインストールしてみた」の状態
参照
過去記事の通りにインストールした場合、ログイン認証の機能は自作する必要があった。
けどLaravelにはその機能もインストールするだけで簡単に実装できる。
インストール時の選択肢１
マニュアルを見ると先ず選択肢として２つのキットがあるのでどちらか選ぶ必要がある。
- Laravel Breeze
- Laravel Jetstream
マニュアルを見ると、JetstreamはBreezeよりも高機能で２要素認証機能もあるようだが「Breezeでコツを掴んでから」って書かれてたのでBreezeをインストールすることにした。
Breezeをインストールする場合の選択肢２
Breezeを選択しても、さらに選択肢がある。
- Breeze and Blade
- Breeze and Livewire
- Breeze and React / Vue
- Breeze and Next.js / API
初学者ならBladeを選ぶのが良いと思いますが、Livewireの説明に「Laravel Livewire は、Vue や React などの最新の JavaScript フレームワークで構築されたフロントエンドと同様に、ダイナミックでモダンで生き生きとした Laravel を利用したフロントエンドを構築するためのフレームワークです。Livewire は、主に Blade テンプレートを使用し、Vue や React などの JavaScript 駆動の SPA フレームワークのよりシンプルな代替手段を探しているチームに最適です。」って書かれていたのでLivewireを使うことを選択する。
インストール手順
- example-appと書かれた箇所は、インストール済Laravelアプリの名前に読み替えてください。
- /home/appと書かれた箇所は、あなたの既存ディレクトリに読み替えてください。
1. Ubuntuのコンソール画面を開く（以下はコンソール画面での操作です。）
2. カレントディレクトリ設定
cd /home/app/example-app
3. Laravel Breezeパッケージ格納コマンドを実行
./vendor/bin/sail composer require laravel/breeze --dev
4. 確認
以下のような表示が出たので正常終了したと判断
Using version ^2.2 for laravel/breeze
5. インストールコマンド実行
./vendor/bin/sail php artisan breeze:install
6. 選択画面表示
何をインストールするか選択肢が表示するので、上下矢印キーで選んでからエンターキーを入力します。
私は「Livewire (Volt Class API) with Alpine」を選びました。
┌ Which Breeze stack would you like to install? ───────────────┐
│ › ● Blade with Alpine │
│ ○ Livewire (Volt Class API) with Alpine │
│ ○ Livewire (Volt Functional API) with Alpine │
│ ○ React with Inertia │
│ ○ Vue with Inertia │
│ ○ API only │
└──────────────────────────────────────────────────────────────┘
さらに以下の選択画面が表示します。
画面を暗色モードで使うか、左右キーで選択してからエンターキーを入力します。
私は「Yes」を選びました。
┌ Would you like dark mode support? ───────────────────────────┐
│ ○ Yes / ● No │
└──────────────────────────────────────────────────────────────┘
さらに以下の選択画面が表示します。
使用するテストフレームワークの選択です。
私はどちらでも良いので、「Pest」を選びました。
┌ Which testing framework do you prefer? ──────────────────────┐
│ › ● Pest │
│ ○ PHPUnit │
└──────────────────────────────────────────────────────────────┘
7. 確認
以下のような表示が出たので正常終了したと判断
INFO Livewire scaffolding installed successfully.
2024/10/11追記：
最近インストールしたところ、以下のような状態で止まってしまいました。
いつもだと1分ぐらいで終わるところ、ーの文字がクルクル回転しだすところまでは同じですが、途中で回転が止まりずっとそのままの状態でした。
INFO Installing and building Node dependencies.
\
とりあえずCTRL＋Cで停止させましたが、もう一度Laravelの再インストールからやり直して、上の情愛でずっとそのままにしていたらインストールされました。ですが時間は20分ほどかかってました。
なお、以前に調べてみたところでは、以下のコマンドが有効そうでしたが。
参照：https://qiita.com/asadeyy/items/84d2619e4caf9b8dddc9
./vendor/bin/sail npm config set strict-ssl false
インストールをCNTRL＋Cで止めてから、再度同じインストールコマンドを実行する場合は成功しましたが、Laravelを真っ新な状態でインストールし、インストールコマンドの前に上のコマンドを実行してからインストールコマンドを実行してもダメで、結局は待つことが答えでした。
8. データベースの構造を設定
./vendor/bin/sail artisan migrate
9. 確認
以下のような表示が出たのでmigrateは実行する必要がなかったようです。Laravelインストール時のデータベース構造に変更はないということですね。
INFO Nothing to migrate.
10. npm install と run devを実行（インストール時にLiveWireを選択した場合は実行不要っぽい）
./vendor/bin/sail npm install
./vendor/bin/sail npm run dev
プロンプトは戻って来ないので処理させたままにしておいて、新たにUbuntuのコンソールを起動します。
なお、npm run devを止める時は、qと入力してエンターを入力すれば止まります。
11. Laravelによるシステム画面の表示を確認
WEBブラウザを起動して下記URLにアクセスして、Laravelの画面が表示されることを確認します。
「Login」と「Register」のリンクが表示されるようになりました。
http://localhost
