Laravel 12 × React 19 で爆速開発！ECサイト構築用ボイラープレート「laravel-react-boilerplate」の紹介

Laravel ＆ React.js で作成したECサイト構築の為のボイラープレート

目次

最新のフレームワークを使用してフルスタックなWebアプリケーションを開発したいけれど、環境構築や認証周りの実装に時間がかかってしまう…そんな悩みはありませんか？

本記事では、Laravel 12 と React 19 をベースに、ECサイトの基本機能を網羅した学習用サンプルアプリケーション「laravel-react-boilerplate」をご紹介します。Dockerを利用したクリーンな開発環境と、実戦的な機能をすぐに試せる構成になっています。

🌙 laravel-react-boilerplate とは？

このプロジェクトは、最新の技術スタックを用いて ECサイトの標準的な機能（商品管理、カート、決済、画像管理、マルチ認証など） を実装したボイラープレートです。

単なる「Hello World」レベルのサンプルではなく、Stripeによる決済やMinio（S3互換）による画像ストレージ、Googleソーシャルログインなど、実務で即戦力となる実装例が豊富に含まれています。また、AWS ECS (Fargate) へのデプロイ構成まで含まれており、ローカル開発から本番環境まで一貫して学べるのが特徴です。

エンジニア

Laravel 12 と React 19 の組み合わせは非常に強力です。このボイラープレートを使えば、面倒な初期設定をスキップして、すぐにロジックの開発に集中できますよ！コーディング規約のドキュメントも同梱されているので、チーム開発の参考にもなります。

こんな方におすすめ

  • Laravel / React を最新バージョンで一から学習したい方
  • Docker Compose を利用した標準的な開発環境を手軽に構築したい方
  • Stripe決済やS3互換ストレージなど実務レベルの実装例を参照したい方
  • マルチログイン認証（フロント画面・管理画面）の実装を学びたい方
  • GoogleソーシャルログインなどOAuth連携を試してみたい方
  • ECS FargateへのAWSデプロイの流れを体験したい方

主な特徴と利用技術

* **最新スタック**: Laravel 12 / PHP 8.2 / React 19 / TypeScript / Tailwind CSS / Vite を採用。
* **インフラ完結**: Docker Compose で Apache 2.4, MySQL 8, Adminer, Mailpit, Minio が一発で立ち上がります。
* **実戦的機能**: マルチログイン認証（フロント/管理画面）や、Stripe決済、S3互換ストレージの実装例を網羅。
* **AWSデプロイ**: CloudFormation（ネストスタック）/ ECS Fargate / RDS MySQL 8 / S3 / ALB 構成のデプロイガイドを同梱。
* **品質管理**: PHPUnit / PHPStan / Laravel Pint によるテスト・静的解析、ESLint / Prettier によるJS品質管理、Storybook によるコンポーネント管理も含まれています。

整理されたディレクトリ構造

大規模開発にも耐えられるよう、Domain層やService層を意識したディレクトリ構成になっています。フロントエンドは管理画面（AdminLTE 3）とフロント画面（React 19）で完全に分離されており、それぞれ独立して開発・ビルドが可能です。

.
├── app                 # Laravel アプリケーション (Domain層/Service層を分離)
├── bootstrap           # フレームワーク起動設定
├── config              # 各種設定ファイル
├── database            # Migration / Seeder
├── docker              # Docker設定ファイル (MySQL, Minio等)
├── documents           # 設計書・規約ドキュメント
├── public              # 公開ディレクトリ
├── resources
│   └── assets
│       ├── admin       # 管理画面用 (AdminLTE 3)
│       └── front       # フロント画面 (React 19)
├── routes              # ルーティング設定
├── scripts             # Makefile から呼び出すシェルスクリプト群
├── tests               # PHPUnit / Featureテスト
├── Makefile            # プロジェクト操作用コマンド集
└── package.json        # フロントエンド依存関係

3ステップで完了する環境構築

Makefileが用意されているため、複雑なコマンドを覚える必要はありません。事前に docker と docker-compose（または Docker Desktop）が動作する環境を用意しておきましょう。

  • リポジトリをクローン: GitHubからソースを取得します。
  • 初期化コマンドの実行: make init で環境構築を開始します。
  • コンテナの起動: make up で各サーバーを立ち上げます。
# 初期化処理（初回のみ、または環境をフルリセットしたい場合）
$ make init

# Dockerを起動して各サーバーを構築
$ make up

# サーバーの状態を確認
$ make ps

# Webサーバー(appコンテナ)にログインしてテスト実行
$ make app
> php artisan photo_upload --run  # テスト用画像をMinioにアップロード
> ./vendor/bin/phpunit             # テストの実行

# コンテナに入らずにテストを実行する場合
$ make test

起動後は http://localhost/ でフロント画面、http://localhost/admin/ で管理画面にアクセスできます。

※ Windows環境の方は、WSL2上での動作を推奨します。WSL2のセットアップは Microsoftの公式ドキュメント をご参照ください。

便利な外部ツール群

開発をサポートするツールも、Docker起動後にすぐ利用可能です。

デザイナー

Storybookが入っているので、UIコンポーネントの確認もスムーズですね。MailpitでメールのHTMLレイアウト確認がブラウザで完結するのも嬉しいポイントです！MinioはデフォルトでID: admin / PW: password でログインできます。

* **Mailpit**: 送信メールのキャッチ（`http://localhost:8025/`）
* **Minio**: S3互換ストレージ管理（`http://localhost:9001`）— ID: admin / PW: password
* **Adminer**: データベースGUI管理（`http://localhost:8888/`）
* **Storybook**: UIコンポーネントカタログ（`http://localhost:6006/`）

コード品質管理の仕組み

このボイラープレートには、チーム開発を意識したコード品質管理の仕組みも整備されています。

* **PHPStan**: PHP の静的解析ツール。型の不整合や未定義変数などを事前に検出します。
* **Laravel Pint**: Laravel公式のPHPコードフォーマッター。PSR-12準拠のスタイルに自動整形します。
* **ESLint / Prettier**: TypeScript/JSXのLintとフォーマットを自動化。
* **Rector**: PHPコードの自動リファクタリングツール。非推奨APIの置き換えなどを検出・修正できます。

コミット前に make pre-commit を実行することで、フォーマットとテストをまとめて実施できます。コーディング規約は documents/ ディレクトリ内にLaravel・React それぞれ別途ドキュメントとして用意されています。

AWSへのデプロイ

本リポジトリには、ECS Fargate へのデプロイに必要な CloudFormation テンプレートや Dockerfile、シェルスクリプトがすべて含まれています。以下のわずか2コマンドでAWSへのデプロイを体験できます。

# AWS用のDockerイメージをビルドしてECRにプッシュ
$ make aws-build

# CloudFormationスタックを作成・更新してECSにデプロイ
$ make aws-deploy

構成は CloudFormation（ネストスタック）/ ECS Fargate / RDS MySQL 8 / S3 / ALB というシンプルかつ実践的なアーキテクチャです。本番に近い環境を手元で再現しながら、インフラ構成もあわせて学ぶことができます。

まとめ

「laravel-react-boilerplate」は、最新のLaravelとReactを学びたい方にとって、最高のスタート地点となるはずです。

  • 最新の Laravel 12 & React 19 / PHP 8.2 / TypeScript 構成を体験できる
  • Dockerによるクリーンで再現性の高い開発環境
  • ECサイトに必要な実戦的機能の実装例が満載
  • PHPStan・Pint・ESLintなど品質管理ツールが最初から整備済み
  • CloudFormation + ECS Fargate による本番デプロイ構成まで学べる
  • Makefileによる直感的な操作が可能

まずはGitHubリポジトリをチェックして、make init から始めてみましょう！

[GitHub: isystk/laravel-react-boilerplate](https://github.com/isystk/laravel-react-boilerplate)

作成したアプリケーション

フロント画面

https://laraec.isystk.com/

フロント画面の主な機能

  • ログイン/ログアウト
  • 会員登録（メール認証付き仮登録フロー）
  • パスワードリマインダ
  • 商品一覧・商品詳細
  • カートに追加
  • 決済処理（Stripe）
  • お気に入り追加
  • お問い合わせ
  • ソーシャルログイン（Google）

管理画面

https://laraec.isystk.com/admin/

管理画面の主な機能

  • ログイン/ログアウト
  • 商品管理（一覧・登録・編集・削除）
  • 注文履歴
  • 顧客管理
  • お問い合わせ管理
  • 画像管理（Minio / S3互換ストレージ）
  • CSVダウンロード
  • PDFダウンロード
  • 画像アップロード

バッチ処理

  • 月別売上金額出力バッチ（make batch から対話式で選択・実行可能）
  • 商品画像アップロードバッチ（Minioへの初期データ投入）

本記事で解説した ECS Fargate へのデプロイ構成を実際に確認・試せるサンプルアプリケーションを公開しています。

Githubを開く

Laravel 12 と React 19 を組み合わせた学習用の EC サイトボイラープレートです。本記事で紹介した CloudFormation テンプレートや Dockerfile、Makefile によるデプロイスクリプトがすべてリポジトリに含まれており、make aws-build & make aws-deploy の2コマンドで ECS へのデプロイを体験できます。

  • インフラ：CloudFormation（ネストスタック）/ ECS Fargate / RDS MySQL 8 / S3 / ALB
  • フロントエンド：React 19 / TypeScript / Tailwind CSS / Vite
  • バックエンド：Laravel 12 / PHP 8.2 / Stripe 決済 / ソーシャルログイン（Google）
  • 品質管理：PHPUnit / PHPStan / Laravel Pint / Rector / ESLint / Prettier
  • ローカル開発：Docker Compose / Minio（S3互換）/ Mailpit / Adminer / Storybook

デプロイ構成の参考実装として、また Laravel + React のフルスタック構成を手元で動かしながら学ぶ出発点として活用してみてください。

2件のコメント

  1. ピンバック: 保守性の高い管理画面のデザインを考える－AdminLTE3 | isystk's blog

  2. フロントのデバッグ方法について質問させてください。
    こちらのECサイトのプロジェクトでReactの学習のためにデバッグ実行をしたいと考えています。
    開発時に使用したツールやデバッガーの設定方法を教えていただけると幸いです。
    サーバサイドはPHPStormでXdebugの設定をしてデバッグ実行ができたのですが、フロントのデバッグ実行ができなかったため、コメントしました。
    どうぞよろしくお願いいたします。

    このコメントに返信

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。