Laravel × Docker × React の環境構築手順を解説

2025年9月12日 最終更新日時 : 2025年9月12日 浅野 龍太郎浅野 龍太郎

Laravel、Docker、Reactを使ったモダンな開発環境を構築したいですか？ この記事では、初心者の方でも迷わず環境構築を進められるよう、手順を詳細に解説します。Dockerを活用することで、環境依存の問題を解消し、スムーズな開発を実現。さらに、LaravelとReactの連携方法についても分かりやすく説明することで、SPA開発の基礎を習得できます。ホットリロードの設定方法も紹介するため、開発効率の大幅な向上も期待できます。つまづきやすいポイントやエラーへの対処法も網羅しているので、安心して読み進めてください。この記事を読み終える頃には、Laravel、Docker、Reactを使ったWebアプリケーション開発のスタートラインに立っていることでしょう。

はじめに

この記事では、Laravel、Docker、Reactを用いたモダンなWebアプリケーション開発環境の構築手順を詳細に解説します。LaravelはPHPで人気の高いWebアプリケーションフレームワーク、Dockerはコンテナ化技術、ReactはJavaScriptのUIライブラリです。これらの技術を組み合わせることで、効率的でスケーラブルな開発環境を実現できます。 これからLaravel、Docker、Reactを学び始める初心者の方から、環境構築でつまずいている方まで、幅広い読者層にとって役立つガイドとなることを目指しています。

特に、以下の内容に焦点を当てて解説を進めます。

項目詳細
LaravelPHPのWebアプリケーションフレームワークであるLaravelのインストールと初期設定について説明します。バージョン管理や依存関係の管理についても触れます。
DockerDockerを用いたコンテナ化環境の構築方法を解説します。Dockerfileとdocker-compose.ymlの作成、コンテナの起動と停止、データの永続化など、実践的な内容を網羅します。
Reactユーザーインターフェースを構築するためのJavaScriptライブラリであるReactの導入方法と基本的な使い方を説明します。コンポーネントの作成、JSXの記法、状態管理など、React開発に必要な知識を習得できます。
連携LaravelとReactを連携させる方法を詳しく解説します。API通信によるデータのやり取りや、フロントエンドとバックエンドの開発ワークフローについても説明します。
ホットリロード開発効率を向上させるためのホットリロードの設定方法を解説します。コードの変更が即座にブラウザに反映されるため、開発スピードを大幅に向上させることができます。
トラブルシューティング環境構築中に発生しやすいエラーとその対処法を紹介します。エラーメッセージの見方やデバッグのテクニックを学ぶことで、問題解決能力を養うことができます。

 各技術の公式ドキュメントへのリンクも掲載しているので、より深く学びたい方はそちらも参照してください。

開発環境の準備

Laravel、Docker、Reactを使った開発環境を構築するために、いくつかのソフトウェアを事前にインストールする必要があります。以下の手順に従って、必要なソフトウェアをインストールしてください。

2.1 必要なソフトウェアのインストール

開発を始める前に、以下のソフトウェアがインストールされていることを確認してください。まだインストールされていない場合は、各公式サイトからダウンロードしてインストールしてください。

ソフトウェア説明インストール方法
Docker Desktopコンテナ化プラットフォーム。LaravelとReactのアプリケーションをコンテナ内で実行します。Docker Desktop公式サイトからダウンロードし、インストールガイドに従ってインストールします。
Docker Compose複数のコンテナを定義・実行するためのツール。LaravelとReact、データベースなどの連携を容易にします。 通常、Docker Desktopのインストールに含まれています。Docker Desktopに含まれていない場合は、Docker Composeのインストールガイドを参照してください。
Node.jsとnpm (またはyarn)Reactの開発に必要なJavaScriptランタイム環境とパッケージマネージャー。Node.js公式サイトからダウンロードし、インストールガイドに従ってインストールします。npmはNode.jsに同梱されています。yarnを使用する場合は、Yarn公式サイトを参照してインストールしてください。
ComposerPHPのパッケージマネージャー。Laravelのインストールと依存関係の管理に使用します。Composer公式サイトからダウンロードし、インストールガイドに従ってインストールします。
Git (任意)バージョン管理システム。プロジェクトの変更履歴を管理し、チーム開発を円滑に進めるために使用します。必須ではありませんが、強く推奨されます。Git公式サイトからダウンロードし、インストールガイドに従ってインストールします。

次のステップでは、プロジェクトの構成について説明します。

3. プロジェクトの構成

この章では、Laravel、Docker、Reactを使ったプロジェクトのディレクトリ構成について解説します。適切なディレクトリ構成は、プロジェクトの保守性や拡張性を高める上で非常に重要です。以下の構成例を参考に、ご自身のプロジェクトに合わせて適宜調整してください。

3.1 ディレクトリ構成の概要

本プロジェクトでは、ルートディレクトリ直下に主要なディレクトリを配置します。以下に、各ディレクトリの役割と、その中に含まれる主要なファイルやディレクトリを説明します。

ディレクトリ名役割主な内容
backendLaravelのアプリケーションコードを格納するディレクトリapp, config, database, routes, resources, tests など
frontendReactのアプリケーションコードを格納するディレクトリsrc, public, package.json, package-lock.json など
dockerDocker関連のファイルを格納するディレクトリphp, nginx, mysql などの各サービスのDockerfile, docker-compose.yml など

上記の構成を採用することで、バックエンドとフロントエンドのコードが明確に分離され、それぞれの開発を独立して進めることが容易になります。また、Docker関連のファイルをdockerディレクトリにまとめることで、環境構築の手順も簡潔になります。

3.1.1 backendディレクトリ

backendディレクトリは、Laravelのアプリケーションコードを格納するためのディレクトリです。Laravelの標準的なディレクトリ構造に従います。

3.1.2 frontendディレクトリ

frontendディレクトリは、Reactのアプリケーションコードを格納するためのディレクトリです。create-react-appなどで作成したプロジェクトをこのディレクトリに配置します。

3.1.3 dockerディレクトリ

dockerディレクトリには、Docker関連のファイルを格納します。各サービス（PHP, Nginx, MySQLなど）ごとにサブディレクトリを作成し、それぞれのDockerfileを配置することで、コンテナの設定を管理しやすくします。docker-compose.ymlは、複数のコンテナを連携させるために使用します。

この構成により、LaravelとReactの開発環境をDockerで効率的に構築・管理できます。それぞれの役割を理解し、プロジェクトに合わせて適宜調整してください。

4. Docker環境の構築

この章では、LaravelとReactの開発環境をDockerを使って構築する方法を詳しく説明します。Dockerを使うことで、環境構築の手間を省き、チームメンバー間での開発環境の差異をなくすことができます。

4.1 Dockerfileとdocker-compose.ymlの作成

まずは、Dockerのイメージを定義するDockerfileと、複数のコンテナを管理するdocker-compose.ymlを作成します。

4.1.1 LaravelコンテナのDockerfile

上記のDockerfileでは、PHP 8.1 FPMをベースイメージとして使用し、必要なライブラリをインストールしています。composer installコマンドで、本番環境に必要なパッケージのみをインストールしています。

4.1.2 ReactコンテナのDockerfile

このDockerfileでは、Node.js 18をベースイメージとして使用し、Reactアプリケーションに必要なパッケージをインストールします。npm startコマンドで開発サーバーを起動します。

4.1.3 docker-compose.yml

docker-compose.ymlでは、Laravel、Nginx、MySQL、Reactの4つのコンテナを定義しています。それぞれのコンテナの設定と、コンテナ間の連携を定義しています。LaravelコンテナはPHP 8.1 FPM、データベースはMySQL 8.0、フロントエンドはNode.js 18を使用しています。 Nginxコンテナは、Laravelアプリケーションへのリバースプロキシとして機能します。

4.2 Laravelの初期設定

Laravelコンテナが起動したら、コンテナ内で以下のコマンドを実行してLaravelの初期設定を行います。

これらのコマンドは、依存パッケージのインストール、環境変数の設定、アプリケーションキーの生成、データベースのマイグレーションを行います。

4.3 Reactの初期設定

Reactコンテナが起動したら、コンテナ内で必要なパッケージをインストールします。既にDockerfile内でインストール済みのため、特に追加のコマンド実行は不要です。

これで、LaravelとReactの開発環境がDocker上に構築できました。次の章では、LaravelとReactの連携について説明します。

5. LaravelとReactの連携

この章では、LaravelとReactを連携させる方法を解説します。LaravelをバックエンドとしてAPIを提供し、ReactをフロントエンドとしてそのAPIを利用する構成を構築します。

5.1 APIルートの作成（Laravel側）

Laravelでは、routes/api.php ファイルでAPIルートを定義します。このファイルに定義されたルートは、/api プレフィックスが付与されます。例えば、以下のようにルートを定義することで、/api/articles にGETリクエストを送信すると、すべての記事データを取得できます。

ArticleController の index メソッドでは、データベースから記事データを取得し、JSON形式でレスポンスを返します。

上記のように、Eloquent ORM を使用することで、データベース操作を簡潔に記述できます。

5.2 ReactからAPIを呼び出す

Reactからは、fetch APIやAxiosなどのライブラリを使用してLaravelのAPIを呼び出すことができます。以下は、fetch APIを使用して /api/articles から記事データを取得する例です。

  • {article.title}

useEffectフックを使用して、コンポーネントがマウントされた際にAPIを呼び出しています。取得した記事データは、useStateフックで管理し、リストとして表示しています。

Axiosを使用する場合は、以下のように記述できます。

AxiosはPromiseベースのHTTPクライアントで、エラー処理などが簡潔に記述できるため、Reactアプリケーションでよく利用されます。

方法説明
fetch APIブラウザ標準のAPI。シンプルで使いやすい。
AxiosPromiseベースのHTTPクライアント。エラー処理などが簡潔に記述できる。

どちらの方法でもLaravel APIからデータを取得できますが、プロジェクトの規模や要件に応じて適切な方法を選択することが重要です。

6. ホットリロードと開発効率化の設定

開発における生産性を高めるためには、コードの変更を即座にブラウザに反映させるホットリロードの設定が不可欠です。この章では、LaravelとReactの開発環境でホットリロードを実現する方法と、その他の開発効率化のための設定について解説します。

6.1 Laravelのホットリロード

Laravel Sailでは、デフォルトでホットリロードが有効になっています。PHPファイルを変更すると、自動的に変更が検知され、アプリケーションが再起動します。もし、ホットリロードが機能していない場合は、以下のコマンドでコンテナを再起動してみてください。

また、Laravel Mixを利用している場合は、npm run watchコマンドを実行することで、CSSやJavaScriptファイルの変更も監視し、自動的にコンパイルとブラウザのリフレッシュを行います。

6.2 Reactのホットリロード

Create React Appで作成したReactアプリケーションでは、開発サーバーが起動した時点でホットリロードが有効になっています。npm startコマンドで開発サーバーを起動すると、ファイルの変更が検知され、ブラウザに即座に反映されます。

もしホットリロードが機能しない場合は、ブラウザのキャッシュをクリアするか、開発サーバーを再起動してみてください。

6.3 Docker環境でのホットリロード

Docker環境でホットリロードを有効にするには、適切なボリュームマウント設定が必要です。LaravelとReactのアプリケーションがコンテナ内で実行されている場合、ホストマシン上のコードの変更をコンテナ内に反映させる必要があります。

docker-compose.ymlファイルで、LaravelとReactのアプリケーションのディレクトリをボリュームとしてマウントすることで、ホストマシンとコンテナ間でファイルの同期が可能になります。

6.4 その他の開発効率化のための設定

ホットリロード以外にも、開発効率を向上させるための設定がいくつかあります。以下に代表的なものを紹介します。

設定項目説明
XdebugPHPのデバッグツール。ステップ実行や変数の値の確認などが可能になります。Docker環境でXdebugを使用する場合は、適切な設定が必要です。
PHPStormなどのIDEの活用IDEのコード補完やデバッグ機能を活用することで、開発効率を向上させることができます。PHPStormはLaravel開発に最適なIDEの一つです。
ESLint、Prettierなどのリンター/フォーマッターの導入コードのスタイルを統一し、バグを早期に発見することができます。ESLintとPrettierを併用することで、より効果的にコード品質を向上させることができます。

これらの設定を行うことで、開発プロセスをスムーズに進め、生産性を向上させることができます。個々のプロジェクトの特性に合わせて、最適な設定を選択しましょう。

7. よくあるエラーと対処法

Laravel、Docker、Reactを使った開発環境では、様々なエラーに遭遇する可能性があります。この章では、よくあるエラーとその対処法をまとめ、スムーズな開発を支援します。

7.1 Docker関連のエラー

7.1.1 Dockerコンテナが起動しない

Dockerコンテナが起動しない場合、いくつかの原因が考えられます。まずは、docker-compose logs コマンドでログを確認し、エラーメッセージを特定しましょう。よくある原因としては、ポートの競合、Dockerfileの記述ミス、リソース不足などが挙げられます。

エラーメッセージ対処法
port is already allocated既に他のプロセスがポートを使用しているため、docker-compose.yml のポート番号を変更するか、使用中のプロセスを停止します。ポート番号の変更は、React側とLaravel側両方の設定を修正する必要がある ことに注意してください。
no such file or directoryDockerfile内で指定したファイルやディレクトリが存在しない可能性があります。パスを確認し、正しく指定されているか確認してください。COPYコマンドのミスもよくあるため、.dockerignore ファイルの内容も確認 し、必要なファイルが除外されていないか確認しましょう。
Out of memoryDockerに割り当てられているメモリが不足している可能性があります。Docker Desktopの設定でメモリを増やすか、不要なコンテナを停止してリソースを解放しましょう。Docker DesktopのResourcesタブから設定を変更できます。

7.1.2 コンテナ内のLaravelが動作しない

コンテナは起動するものの、Laravelが正しく動作しない場合、以下の点をチェックしてみてください。

  • .env ファイルの設定：データベースの接続情報やAPP_KEYが正しく設定されているか確認しましょう。特に、DB_HOSTはDocker環境に合わせて適切な値を設定する必要があります。通常は、データベースコンテナ名となります。
  • ファイルのパーミッション：Laravelのstorageディレクトリやbootstrap/cacheディレクトリに適切なパーミッションが設定されているか確認しましょう。chown コマンドを使って所有者を変更する 必要があります。
  • composer installの実行：必要なPHPパッケージがインストールされているか確認しましょう。コンテナ内で composer install を実行する必要があります。

7.2 React関連のエラー

7.2.1 npm startが実行できない / 画面が真っ白になる

npm start が実行できない、または実行できても画面が真っ白になる場合は、以下の点をチェックしてみてください。

  • package.json の dependencies：必要なパッケージがインストールされているか、バージョンに互換性があるか確認しましょう。npm install を実行して、パッケージをインストールまたは更新してください。
  • ポートの競合：既に他のプロセスがポートを使用している可能性があります。package.json の scripts セクションでポート番号を変更するか、使用中のプロセスを停止します。ポート番号の変更は、React側とLaravel側両方の設定を修正する必要がある ことに注意してください。
  • JavaScriptのエラー：ブラウザの開発者ツール（コンソールタブ）でJavaScriptのエラーを確認しましょう。エラーメッセージに基づいて対処してください。

7.3 LaravelとReactの連携に関するエラー

7.3.1 API通信が失敗する

LaravelとReactのAPI通信が失敗する場合は、以下の点をチェックしてみてください。

  • CORS設定：Laravel側にCORSの設定が必要です。fruitcake/laravel-cors パッケージ を使用するのが一般的です。設定ファイルで許可するオリジンを設定してください。
  • APIルートの確認：Laravel側のAPIルートが正しく設定されているか、React側で正しいURLを指定しているか確認しましょう。
  • CSRFトークン：POSTリクエストを送信する場合は、CSRFトークンをヘッダーに含める必要があります。React側でmetaタグからCSRFトークンを取得し、リクエストヘッダーに設定する 必要があります。

これらの対処法を試しても解決しない場合は、エラーメッセージや状況を具体的に記述し、インターネットで検索するか、コミュニティフォーラムで質問してみましょう。

8. まとめ

この記事では、Dockerを用いてLaravelとReactの開発環境を構築する手順を解説しました。Dockerを利用することで、環境構築の手間を大幅に削減し、チーム開発における環境の統一性を高めることができます。 Laravel側でAPIルートを作成し、React側からAPIを呼び出すことで、効率的な開発を実現できます。ホットリロードの設定を行うことで、コード変更が即座にブラウザに反映され、開発効率がさらに向上します。 よくあるエラーとその対処法も紹介しましたので、開発中に問題が発生した場合の解決に役立つでしょう。 この記事が、LaravelとReactを使ったWebアプリケーション開発の一助となれば幸いです。

投稿者プロフィール

浅野 龍太郎
浅野 龍太郎代表取締役
チートの自動検出に関する研究を行いながら、業務効率化のためのシステムやWebサービスを開発しています。
現場の声を大切にし、「使いやすさ」と「実用性」を兼ね備えた開発を心がけています。
カテゴリー
システム開発、技術解説
前の記事
初めてでも安心！laravelで作る予約管理システム
2025年9月11日
次の記事
【保存版】Laravel Reverbでのリアルタイムアプリ構築ガイド
2025年9月15日