[Laravel9Sail×React×Vite]既存プロジェクトをローカルにclone・起動する手順

環境について

ローカルPCの開発環境は以下の通りです。

開発PC OS	Windows10 (WSL2 Ubuntu) + Docker
フレームワーク	Laravel9 Sail
フロント	ReactJS(TypeScript) + Vite でビルド

プロジェクトをclone

GitHubからプロジェクトをローカルの任意のワークスペースにcloneします。

Composerコマンドの実行

以下に記載の通りComposerコマンドを実行し、vendorを生成します。

docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v $(pwd):/var/www/html \
    -w /var/www/html \
    laravelsail/php81-composer:latest \
    composer install --ignore-platform-reqs

phpやcomposerがWSL2のUbuntuに入っている必要はなく、この辺りのコマンドの実行もSailがよろしくやってくれているようです。

注意すべきはPHPのバージョンです。ここでは`php81` を指定していますが、公式も確認しておくと安心かと思います。

Dockerコンテナを起動

vendorを導入したことでsailコマンドが使えるようになりました。

以下のコマンドを実行してLaravel Sail を起動します。

./vendor/bin/sail up -d

※バックグラウンドで起動させたいので`-d` を付けています。

npm install の実行

npm_modulesも生成します。

./vendor/bin/sail npm install

これにて起動の準備は整いました。

アプリを起動する

ビルドする場合は以下を実行。

./vendor/bin/sail npm run build

run dev で起動する場合は以下。

./vendor/bin/sail npm run dev

いずれも `http://localhost` への接続で表示できるかと思います。

補足

`./vendor/bin/sail ~ ` と入力するのが面倒な場合は、エイリアスを設定することでsailのみの入力でコマンドが実行できるようになるようです。※但し、PCを再起動したら設定戻ってました。。永続設定の方法は探し中です。

alias sail='[ -f sail ] && sh sail || sh vendor/bin/sail'

また、`.env` ファイルにてWebサーバーが使用するポートを変更することができます。

80番を他のプログラムが占有していて別のポートを使いたい、という方は以下の記事もご参照くださいませ。

以上です。