Laravel Breezeをインストールしてみた


:::note info
前提
+ 過去記事「[Laravelをインストールしてみた](https://qiita.com/AKFJ21/items/c8f1052b7b321917cafc)」の状態
:::

参照
+ [Laravelスターターキットマニュアル](https://laravel.com/docs/11.x/starter-kits)

---------------------------------------
過去記事の通りにインストールした場合、ログイン認証の機能は自作する必要があった。
けど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を使うことを選択する。

## インストール手順

:::note warn
+ example-appと書かれた箇所は、インストール済Laravelアプリの名前に読み替えてください。
+ /home/appと書かれた箇所は、あなたの既存ディレクトリに読み替えてください。
:::
 
1\. Ubuntuのコンソール画面を開く（以下はコンソール画面での操作です。）
2\. カレントディレクトリ設定
  ```shell:例：
  cd /home/app/example-app
  ```
3\. Laravel Breezeパッケージ格納コマンドを実行
  ```shell:コマンド
  ./vendor/bin/sail composer require laravel/breeze --dev
  ```

4\. 確認
以下のような表示が出たので正常終了したと判断
 ```shell:表示画面
 Using version ^2.2 for laravel/breeze
 ```
 
5\. インストールコマンド実行
 ```shell:コマンド
 ./vendor/bin/sail php artisan breeze:install
 ```
6\. 選択画面表示
何をインストールするか選択肢が表示するので、上下矢印キーで選んでからエンターキーを入力します。
私は「Livewire (Volt Class API) with Alpine」を選びました。
 ```shell:表示画面
 ┌ 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」を選びました。
  ```shell:表示画面
 ┌ Would you like dark mode support? ───────────────────────────┐
 │ ○ Yes / ● No                                                 │
 └──────────────────────────────────────────────────────────────┘
 ```

さらに以下の選択画面が表示します。
使用するテストフレームワークの選択です。
私はどちらでも良いので、「Pest」を選びました。
  ```shell:表示画面
 ┌ Which testing framework do you prefer? ──────────────────────┐
 │ › ● Pest                                                     │
 │   ○ PHPUnit                                                  │
 └──────────────────────────────────────────────────────────────┘
 ```
 
 7\. 確認
以下のような表示が出たので正常終了したと判断
 ```shell:表示画面
   INFO  Livewire scaffolding installed successfully.
```

2024/10/11追記：
最近インストールしたところ、以下のような状態で止まってしまいました。
いつもだと1分ぐらいで終わるところ、ーの文字がクルクル回転しだすところまでは同じですが、途中で回転が止まりずっとそのままの状態でした。
```shell:表示画面

   INFO  Installing and building Node dependencies.

\
```
とりあえずCTRL＋Cで停止させましたが、もう一度Laravelの再インストールからやり直して、上の状態でずっとそのままにしていたらインストールされました。ですが時間は20分ほどかかってました。
なお、以前に調べてみたところでは、以下のコマンドが有効そうでしたが。
参照：https://qiita.com/asadeyy/items/84d2619e4caf9b8dddc9
```shell:コマンド
 ./vendor/bin/sail npm config set strict-ssl false
```
インストールをCNTRL＋Cで止めてから、再度同じインストールコマンドを実行する場合は成功しましたが、Laravelを真っ新な状態でインストールし、インストールコマンドの前に上のコマンドを実行してからインストールコマンドを実行してもダメで、結局は待つことが答えでした。

8\. データベースの構造を設定
```shell:コマンド
./vendor/bin/sail artisan migrate
```

9\. 確認
以下のような表示が出たのでmigrateは実行する必要がなかったようです。Laravelインストール時のデータベース構造に変更はないということですね。
 ```shell:表示画面
   INFO  Nothing to migrate.
```

10\. npm install と run devを実行（インストール時にLiveWireを選択した場合は実行不要っぽい）
```shell:コマンド
./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](http://localhost)

![laravel_top_auth.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3886350/74fadea0-c473-1e2b-599e-97de6d6a4011.png)