【Docker初心者向け】React + Laravel + MySQLの環境をDocker Composeでサクッと構築する　

Docker

久貝建都

2026年04月30日

リンクをコピーしました

はじめに

メンバーズの久貝建都です！

本記事では、React、Laravel、MySQLを組み合わせたフルスタック環境を、Docker Composeでまとめて構築する手順を解説します。

DockerFileやcompose.yamlの各命令の項目も解説しながらなぜ動くのかも併せてわかりやすく解説します。

最終的には、サーバーを立ち上げて簡単なAPIの作成と動作確認をするところまで行いたいと思います。

前提条件

今回使用するツールは以下のとおりです。

OS：Ubuntu
Docker Engine
Docker Compose v2
好きなエディター(vscode等)

今回、ReactとLaravelを使いますがNode.jsとPHPはインストールしなくても大丈夫です。

全体の構成とディレクトリ構成

今回は以下のようなシンプルな構成で作成していきます。

ディレクトリ構造

ディレクトリ名はmy-appにしておきます。

フロントエンド (React)：ユーザーが見る画面を担当
バックエンド (Laravel)：データの処理やデータベースとの通信を担当
データベース (MySQL)：データを保存

それぞれ3つのコンテナが、Docker内部のネットワークを通じてお互いに通信できる状態を作ります。

Docker と Docker Compose

この後の手順に進む前に軽くDockerとDocker Composeについて触れておきます。

Dockerとは

Dockerとは、「コンテナ」と呼ばれる独立した環境を使って、アプリケーションの開発・配布・実行を行うためのオープンソースプラットフォームです。

開発者のPC環境やサーバー環境に依存せず、どこでも同じ条件でアプリケーションを動作させることができるのが大きな特徴になります。

Docker Composeとは

Docker Composeは、複数のコンテナを定義し、一度にまとめて実行・管理するツールになります。

今回のような、React、Laravel、MySQLといった複数の要素が連携する環境では、それぞれのコンテナを個別に操作するのは手間がかかります。

Docker composeを使うと、compose.yamlという設定ファイルを用意することで、コマンド一つで環境全体を起動・停止できるようになります。

基礎知識の補足

DockerやDocker Composeの基礎概念についてより詳しく確認したい方は、Qiitaにて私が執筆した以下の記事を良ければ参照してください。

Dockerの基礎：https://qiita.com/KentoKugai/items/265969bd32f07fab7b49
Docker Composeの概要：https://qiita.com/KentoKugai/items/d7d8deca11570419fde7

① プロジェクトの雛形を作成する

まずは、Dockerコンテナを利用してプロジェクトのベースを作成していきます。

プロジェクトのルートディレクトリ作成

すべてのベースとなる親フォルダのみを作成します。サブディレクトリは作成しなくても大丈夫です。※この後実行する生成コマンドによってフォルダが自動的に作成されます

mkdir my-app
cd my-app

アプリケーションの生成

次に、Dockerの公式イメージを一時的に利用して、ソースコード一式を生成します。

このコマンドを実行することで、手元に frontend と backend フォルダが作成されます。

作成したディレクトリに移動した状態で、以下のコマンドを実行してください

Reactの生成

docker run --rm -v "$(pwd):/app" -w /app node:20-slim npm create vite@latest frontend -- --template react-ts

Laravel の生成

docker run --rm -v "$(pwd):/app" -w /app php:8.2-fpm sh -c "apt-get update && apt-get install -y unzip && curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer && composer create-project laravel/laravel backend"

コマンド実行後、ディレクトリに、プロジェクトの雛形が作成されていれば成功です。

コマンド解説

ここで使用した docker run の各オプションの役割は以下の通りです。

--rm

実行終了後に、使い終わったコンテナを自動で削除します。

-v "$(pwd):/app"

ホスト側（自分のPC）のディレクトリを、コンテナ内の /app に同期（マウント）させます。
これにより、コンテナ内で生成されたファイルが手元のPC上にも保存されます。

-w /app

コンテナ内の作業ディレクトリを指定します。
ここでは、appというディレクトリを指定しています。

node:20-slim / php:8.2-fpm

実行に必要なランタイムが含まれた公式イメージです。
これらを利用することで、ローカル環境に直接 Node.js や PHP をインストールせずにプロジェクトを作成できます。

補足事項

もし、この後のファイルを編集した後「ファイルの書き込みができません」というようなエラーが出た場合は、編集権限が不足しています。

自動生成されたファイル所有者がroot ユーザーになってしまうため、通常のエディタでは編集権限がなくエラーになる場合があります。

その場合は、以下のコマンドを実行してください

sudo chown -R $USER:$USER .

②バックエンド環境の定義（Dockerfile）

次に、バックエンド用の環境をカスタマイズします。

標準のPHPイメージにはMySQLと通信するためのドライバが入っていないため、Dockerfile を使って専用の環境をビルドする必要があります。

backend ディレクトリの直下に Dockerfile という名前でファイルを作成してください。

作成したDockerfileに次の内容を記述します。

FROM php:8.2-fpm

# 必要なパッケージとPHP拡張（pdo_mysql等）のインストール
RUN apt-get update && apt-get install -y 
    libpng-dev 
    libonig-dev 
    libxml2-dev 
    zip 
    unzip

RUN docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd

WORKDIR /var/www

各命令の解説

FROM

何のイメージをベースにするか？を指定します。
今回は php:8.2-fpm を指定していますが、これは「PHP 8.2 がインストール済みの Linux 環境」をベースにするという意味です。
こうすることで、ゼロから PHP をインストールする手間を省き、安定した環境からスタートできます。

RUN

イメージを作成する段階で実行するコマンドです。
ここでは、MySQL接続に必要な pdo_mysql などの拡張機能をインストールしています。
これがないと、Laravelからデータベースにアクセスしようとした際にエラーになります。

WORKDIR

コンテナ内での基準となる場所を決めます。
ここでは、コンテナ内での作業ディレクトリを /var/www にしています。

③サービス構成の定義（compose.yaml）

すべてのコンテナを連携させるための、compose.yaml を作成します。

現在のプロジェクトのルートディレクトリである、my-appの直下に作成してください。

touch compose.yaml

作成後以下の内容をcompose.yamlに記述します。

services:
  # フロントエンド (React)
  frontend:
    image: node:20-slim
    volumes:
      - ./frontend:/app
    working_dir: /app
    ports:
      - "5173:5173"
    command: sh -c "npm install && npm run dev -- --host"

  # バックエンド (Laravel)
  backend:
    build: ./backend
    volumes:
      - ./backend:/var/www
    working_dir: /var/www
    ports:
      - "8000:8000"
    command: php artisan serve --host=0.0.0.0 --port=8000

  # データベース (MySQL)
  db:
    image: mysql:8.0
    volumes:
      - ./mysql/data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: laravel_db
      MYSQL_USER: phper
      MYSQL_PASSWORD: password
    ports:
      - "3306:3306"

  # 管理ツール (phpMyAdmin)
  phpmyadmin:
    image: phpmyadmin:latest
    environment:
      - PMA_HOST=db
      - PMA_USER=root
      - PMA_PASSWORD=password
    ports:
      - "8080:80"
    depends_on:
      - db

build: ./backend

image 指定（既製品を使う）とは異なり、指定したディレクトリにある
Dockerfile を基に独自のイメージをビルドします。
今回は pdo_mysql などを追加したカスタム環境が必要なため、この指定を行っています。

volumes（ボリューム）：データの同期と永続化

この設定は 2 つの役割を担っています。

開発効率の向上
./frontend:/app のように記述することで、自分の PC で編集したコードがコンテナ内へ反映されます。
データの保護 データベース（db）の設定で - ./mysql/data:/var/lib/mysqlとしているのは、コンテナを削除しても、データベースに保存したデータが消えないようにするためです。データをコンテナの外（自分の PC 側）に置くことで、環境を壊してもデータは残るようになります。

ports：ポートフォワーディング

"ホスト側のポート:コンテナ側のポート" という形式で記述します。
コンテナは外部から隔離されたネットワーク内にあります。この設定がないとブラウザからアクセスできません。
例えば "5173:5173" とすることで、PC のブラウザで localhost:5173 にアクセスした通信を、コンテナ内の Vite へ転送します。

environment：環境変数

コンテナ内で利用する変数（データベース名やパスワードなど）を設定します。
ここで指定した値は、後ほど Laravel の .env 設定でも使用します。

depends_on：起動順序の制御

コンテナ間の依存関係を示します。
例えば phpMyAdmin は、データベース（db）が立ち上がっていないとエラーになります。
depends_on を使うことで、「まず db を起動してから、次に phpmyadmin を起動する」という順序を Docker に守らせることができます。

④ 環境の構築と起動

Dockerfile や compose.yamlが揃ったので、これらを基にコンテナを構築（ビルド）して起動します。

プロジェクトのルートで以下のコマンドを実行してください。

docker compose up -d --build

コマンド解説

compose.yaml の定義に従って、ネットワーク、ボリューム、コンテナの作成と起動を一括で行います。

-d

デタッチモードという意味です。
コンテナをバックグラウンドで実行します。
これを使わない場合、ターミナルにコンテナのログが流れ続け、そのターミナルで別の操作ができなくなります。ログを確認したい場合はこちらは不要です。

--build

コンテナを起動する前に、Dockerfile を基にイメージの作成を行います。
今回はバックエンドに独自の Dockerfile を用意したため、初回はこのオプションをつけて確実にビルドを行う必要があります。

⑤ Laravel の接続設定（.env）

コンテナは起動しましたが、このままでは Laravel がデータベースを認識できません。 Laravel の環境設定ファイルである .env を、Docker 環境に合わせて修正します。

backend/.env を開き、以下の項目を探して書き換えてください。

DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=laravel_db
DB_USERNAME=phper
DB_PASSWORD=password

通常、ローカル PC にデータベースをインストールしている場合は 127.0.0.1 や localhost と指定しますが、Docker Compose を使う場合はサービス名である db を指定します。

Docker Compose 内では、サービス名がそのままホスト名として解決されるため、backend コンテナから db という名前でアクセスできるようになります。

⑥データベースの初期化（マイグレーション）

最後に、Laravel からデータベースに対してテーブル作成のコマンド（マイグレーション）を送り、実際に接続できるかを確認します。

docker compose exec backend php artisan migrate

コマンドの解説

exec

現在起動しているコンテナの中で、特定のコマンドを実行します。

backend

実行対象のサービス名です。

php artisan migrate

Laravel のマイグレーションを実行するコマンドです。

実行して Nothing to migrate. が表示されれば、フロントエンド、バックエンド、データベースのすべての連携が正常に行われています。

⑦ 動作確認

すべての設定が完了し、コンテナが正常に起動していれば、ブラウザから各サービスにアクセスできるようになります。

各サービスのアクセス先URL

compose.yamlで設定したURLでサイトにアクセスできます。

コンテナの稼働状況と一緒に以下のコマンドでも確認可能です。

docker compose ps

フロントエンド (React)

http://localhost:5173

バックエンド (Laravel)

http://localhost:8000

データベース管理ツール (phpMyAdmin)

http://localhost:8080

ログイン情報は compose.yaml で設定した以下の値を使用します。

ユーザ名：root パスワード：password（または設定したパスワード）

各URLにアクセス後画面が表示されていれば成功です！

APIの作成と動作確認（疎通確認）

環境が整ったので、試しに、ReactからLaravelのデータを取得できるか確認したいと思います。

①Laravel側：APIエンドポイントの作成

まず、以下のコマンドでAPI用のルートファイルを作成します。

docker compose exec backend php artisan install:api

②エンドポイントの作成

backend/routes/api.php を編集し、テスト用のデータを返すルートを定義します。

// backend/routes/api.php

use Illuminate\Support\Facades\Route;

Route::get('/hello', function () {
    return response()->json(['message' => 'Hello from Laravel!']);
});

これで、http://localhost:8000/api/hello を通じてJSONデータを取得する準備が整いました。

③ React側からのリクエスト

次に、ReactからこのAPIを呼び出す処理を記述します。 frontend/src/App.tsx を以下のように書き換え、ボタン操作でデータを取得できるようにします。

import { useState } from 'react'

function App() {
  const [message, setMessage] = useState('')

  const fetchHello = async () => {
    try {
      // Laravelのエンドポイントへリクエストを送信
      const response = await fetch('http://localhost:8000/api/hello')
      const data = await response.json()
      setMessage(data.message)
    } catch (error) {
      console.error('通信エラー:', error)
    }
  }

  return (
    <div style={{ padding: '20px' }}>
      React + Laravel 連携確認
      データを取得する
      {message && サーバーからの返答: {message}}
    
  )
}

export default App