Laravel Breezeを使ってみる


開発環境は、
- Windows10 Pro(64bit)
- PHP 8.1.7 (cli) (built: Jun  7 2022 21:45:53) (ZTS Visual C++ 2019 x64)
- Composer version 2.3.7 2022-06-06 16:43:28
- PostgreSQL 14
- node v14.17.5
- npm 6.14.14
- Laravel 9.21.4
- VITE v3.0.2


Cドライブ直下に、laravelディレクトリを作成し、カレントディレクトリへ
```
cd c:\ && mkdir laravel && cd laravel
```

以下のコマンドを入力し、Laravelのプロジェクトを作成します
```
composer create-project laravel/laravel first_breeze --prefer-dist
```

インストールが終わったら、first_breezeディレクトリをカレントディレクトリにします。
```
cd first_breeze
```

PostgreSQLを起動して、データベースを作成します。
```
create database breeze;
```

次に、データベースの設定を行うため、.envファイルを開き、必要な設定を記述して保存します。
```
DB_CONNECTION=pgsql
DB_HOST=<データベースのホスト名>
DB_PORT=<データベースのポート番号>
DB_DATABASE=breeze
DB_USERNAME=<データベース接続のユーザー名>
DB_PASSWORD=<データベース接続のパスワード>
```

次に、以下のコマンドで、マイグレーションして、テーブルを作成します。
```
php artisan migrate
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/93141291-e644-6a8f-5762-0b20ea3ac355.png)

Composerを利用して、Laravel Breezeをインストールします。
```
composer require laravel/breeze --dev
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/93426782-a5f1-e85e-6351-ca8b2e749937.png)

Breezeパッケージをインストールしたら、以下のコマンドで、フロントエンド部分を作成します。
```
php artisan breeze:install
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/ac75229b-b3c3-1a29-39f5-50eae43e60cf.png)

次に、以下のコマンドを入力
```
npm install && npm run dev
```
以下のような、エラーメッセージが表示される。
```
> esbuild@0.14.49 postinstall c:\laravel\first_breeze\node_modules\esbuild
> node install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for vite@3.0.2: wanted: {"node":"^14.18.0 || >=16.0.0"} (current: {"node":"14.17.5","npm":"6.14.14"})
npm WARN notsup Not compatible with your version of node/npm: vite@3.0.2
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-android-64@0.14.49 (node_modules\esbuild\node_modules\esbuild-android-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-android-64@0.14.49: wanted {"os":"android","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-android-arm64@0.14.49 (node_modules\esbuild\node_modules\esbuild-android-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-android-arm64@0.14.49: wanted {"os":"android","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-darwin-64@0.14.49 (node_modules\esbuild\node_modules\esbuild-darwin-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-darwin-64@0.14.49: wanted {"os":"darwin","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-darwin-arm64@0.14.49 (node_modules\esbuild\node_modules\esbuild-darwin-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-darwin-arm64@0.14.49: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-freebsd-64@0.14.49 (node_modules\esbuild\node_modules\esbuild-freebsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-freebsd-64@0.14.49: wanted {"os":"freebsd","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-freebsd-arm64@0.14.49 (node_modules\esbuild\node_modules\esbuild-freebsd-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-freebsd-arm64@0.14.49: wanted {"os":"freebsd","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-32@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-32@0.14.49: wanted {"os":"linux","arch":"ia32"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-64@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-64@0.14.49: wanted {"os":"linux","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-arm@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-arm):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-arm@0.14.49: wanted {"os":"linux","arch":"arm"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-arm64@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-arm64@0.14.49: wanted {"os":"linux","arch":"arm64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-mips64le@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-mips64le):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-mips64le@0.14.49: wanted {"os":"linux","arch":"mips64el"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-ppc64le@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-ppc64le):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-ppc64le@0.14.49: wanted {"os":"linux","arch":"ppc64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-riscv64@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-riscv64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-riscv64@0.14.49: wanted {"os":"linux","arch":"riscv64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-linux-s390x@0.14.49 (node_modules\esbuild\node_modules\esbuild-linux-s390x):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-linux-s390x@0.14.49: wanted {"os":"linux","arch":"s390x"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-netbsd-64@0.14.49 (node_modules\esbuild\node_modules\esbuild-netbsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-netbsd-64@0.14.49: wanted {"os":"netbsd","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-openbsd-64@0.14.49 (node_modules\esbuild\node_modules\esbuild-openbsd-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-openbsd-64@0.14.49: wanted {"os":"openbsd","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-sunos-64@0.14.49 (node_modules\esbuild\node_modules\esbuild-sunos-64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-sunos-64@0.14.49: wanted {"os":"sunos","arch":"x64"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-windows-32@0.14.49 (node_modules\esbuild\node_modules\esbuild-windows-32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-windows-32@0.14.49: wanted {"os":"win32","arch":"ia32"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: esbuild-windows-arm64@0.14.49 (node_modules\esbuild\node_modules\esbuild-windows-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for esbuild-windows-arm64@0.14.49: wanted {"os":"win32","arch":"arm64"} (current: {"os":"win32","arch":"x64"})

added 92 packages from 123 contributors and audited 112 packages in 204.809s

18 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> @ dev c:\laravel\first_breeze
> vite

failed to load config from c:\laravel\first_breeze\vite.config.js
error when starting dev server:
Error: Cannot find module 'node:path'
Require stack:
- c:\laravel\first_breeze\node_modules\vite\dist\node-cjs\publicUtils.cjs
- c:\laravel\first_breeze\node_modules\vite\index.cjs
- c:\laravel\first_breeze\vite.config.js
- c:\laravel\first_breeze\node_modules\vite\dist\node\chunks\dep-1513d487.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)
    at Function.Module._load (internal/modules/cjs/loader.js:745:27)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (c:\laravel\first_breeze\node_modules\vite\dist\node-cjs\publicUtils.cjs:5:14)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Object._require.extensions.<computed> [as .js] (file:///c:/laravel/first_breeze/node_modules/vite/dist/node/chunks/dep-1513d487.js:62820:17)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `vite`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2022-07-22T12_57_28_833Z-debug.log
```
という風にエラーメッセージが表示された。読んでみると、どうやら、バージョンが、14.17.5では、古いようで、Nodeのバージョンを上げることにした。[公式サイト](https://nodejs.org/ja/)へアクセスすると、現時点の、16.16.0 LTSをインストールすることにした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/cdbf278f-f1cf-ddf2-da8c-1db9c168942d.png)


インストール後、再度、同じコマンドを入力したら、以下のようなメッセージが表示されたので、Webブラウザで、localhost:5173へアクセスすると、以下のような画面が表示された。
```
> dev
> vite


  VITE v3.0.2  ready in 1374 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

  LARAVEL v9.21.4  plugin v0.5.0

  ➜  APP_URL: http://localhost

The Vite server should not be accessed directly. Your Laravel application's configured APP_URL is: http://localhost
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/d98ee193-c887-1015-16d0-64d03d20578f.png)

### 参考リンク
- [スターターキット 9.x Laravel](https://readouble.com/laravel/9.x/ja/starter-kits.html)