Laravel + Sail + React + Inertia + TypeScript + Breeze + Vite の環境構築方法

環境
今から作成するLaravelアプリを入れたいディレクトリに移動
Laravelアプリを作成
Laravelアプリ内に移動してVSCodeを起動
Laravel Sailを導入
Laravel Breezeパッケージをインストール
breezeをインストール
Inertiaをインストール（サーバーサイド）
Inertiaをインストール（クライアントサイド）
開発サーバーを起動する

環境

M2 MacOS Sonoma
PHP 8.1
Laravel 10
React 18
TypeScript
Laravel Breeze
Vite
Docker Desktop
zsh

今から作成するLaravelアプリを入れたいディレクトリに移動

cd work

Laravelアプリを作成

今回はLaravel10を使いたかったのでこちらを参考にしました。

（example-app 部分はご自身のアプリ名にしてください）

composer create-project laravel/laravel:^10.0 example-app

Laravelアプリ内に移動してVSCodeを起動

こちらはお好みでどうぞ

私はここから先はVSCodeのターミナルで叩いていきます。

cd example-app
code .

Laravel Sailを導入

Laravelで用意されているDockerが簡単に使えるものです。（こちらを参考にしました）

Docker Desktopがインストールされていることを前提にしています。

まだインストールされていない方はこちらからインストールしてください。

Laravel Sailをインストール

composer require laravel/sail --dev

Artisanコマンドを実行

php artisan sail:install

ここで

Which services would you like to install?

と聞かれたので私は「mysql」を選択しました。

エイリアスの設定（こちらを参考にしました）

本来なら./vendor/bin/sail up というコマンドでこのまま進めていけるのですが、ずっと./vendor/bin/sail と叩くよりもsail とだけ叩けるようになると楽だね。ということで進めるのが以下の設定になります。

今回はzshを使用しているのでそちらで説明を進めますが、bashなど他の環境の方は「bash laravel sail エイリアス」などで検索していただくと記事が出てくるかと思います。

設定ファイルを開く

vi ~/.zshrc

以下の内容を追加する

内容を記述するには「i」キーを押すと入力モードになります。

入力が完了したら「:wq」とすると入力モードから抜け、上書き保存して閉じるといった動きになります。

alias sail='sh $([ -f sail ] && echo sail || echo vendor/bin/sail)'

以下のコマンドで反映させる

source ~/.zshrc

以下のコマンドでSailが起動できるか確認してください。

sail up -d

以下のようにStartedと出ていれば成功です

出ている内容は人によって変わります。

[+] Running 2/2
 ✔ Container example-app-mysql-1         Started                                                                                                                                     0.0s 
 ✔ Container example-app-laravel.test-1  Started

Laravel Breezeパッケージをインストール

（ここからはこちらとこちらを参考にしました）

sail composer require laravel/breeze --dev

breezeをインストール

これで認証ビュー、ルート、コントローラなどのファイルが追加されます。

sail php artisan breeze:install react --typescript

Inertiaをインストール（サーバーサイド）

LaravelでInertia.jsを使用するため、以下コマンドでinertia-laravelパッケージをインストールします。

composer.jsonに、inertiajs/inertia-laravelパッケージの依存関係が追加されます。

sail composer require inertiajs/inertia-laravel

Inertiaをインストール（クライアントサイド）

ReactアプリケーションにInertia.jsを導入するため、以下コマンドで@inertiajs/inertia-reactパッケージをインストールします。

ReactアプリケーションでInertia.jsを使用するためのコンポーネントとフックが提供されます。

sail npm install @inertiajs/inertia-react

開発サーバーを起動する

sail npm install
sail npm run dev

これで以下のような文字が出力されたら成功です。

（数字などの内容は環境によって変わります）

> dev
> vite


  VITE v5.2.11  ready in 198 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://100.00.0.0:5173/
  ➜  press h + enter to show help

  LARAVEL v10.48.10  plugin v1.0.2

  ➜  APP_URL: http://localhost

ここでAPP_URL: <http://localhost> と書かれているhttp://localhost にアクセスすると、以下のような画面が表示されると成功です。

（画面の色はPCの設定によって変わります）

上記画面はresources/js/Pages/Welcome.tsx が表示されています。

お疲れ様でした！！